Django和websocket实现简单的多人聊天

1、版本及环境 python 为3.9.12, django为4.2详细信息如下:

复制代码
asgiref           3.8.1
attrs             24.2.0
autobahn          24.4.2
Automat           24.8.1
cffi              1.17.1
channels          3.0.3
constantly        23.10.4
cryptography      44.0.0
daphne            3.0.2
Django            4.2
hyperlink         21.0.0
sqlparse          0.5.3
tomli             2.2.1
Twisted           24.11.0
txaio             23.1.1
typing_extensions 4.12.2
tzdata            2024.2
zope.interface    7.2

Django安装指定版本(上边的安装包也有可能安装多了,但必须要有python,Django, channels)

复制代码
pip install django==4.2 -i https://pypi.tuna.tsinghua.edu.cn/simple

2、创建Django项目

复制代码
django-admin startproject ws_demo
python manage.py startapp app01

3、安装channels

复制代码
pip install channels==3.0.3 -i  -i https://pypi.tuna.tsinghua.edu.cn/simple

4、项目整体目录结构如下:

5、配置setting文件

复制代码
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    "channels",   # 添加channels
    "app01.apps.App01Config"   # 添加app01
]

# 在setting最后添加一个 "ws_demo.asgi.application" 意思是"项目名称.asgi文件.application变量名称"
ASGI_APPLICATION = "ws_demo.asgi.application"

6、asgi.py文件中的内容如下;

复制代码
import os
from channels.routing import ProtocolTypeRouter, URLRouter
# from django.conf.urls import url
# from chat import consumers
from django.core.asgi import get_asgi_application
from . import routings

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'ws_demo.settings')
# application = get_asgi_application()
application = ProtocolTypeRouter({
    "http": get_asgi_application(),
    'websocket': URLRouter(routings.websocket_urlpatterns)
})

7、新建routings.py文件,其内容如下:

复制代码
from django.urls import re_path
from app01 import consumers

websocket_urlpatterns = [
    # 示例 url : xxxxx/room/x1/
    re_path(r"room/(?P<group>\w+)/$", consumers.ChatConsumer.as_asgi())
]

8、ws_demo下的urls.py中的内容如下:

复制代码
from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    # path("admin/", admin.site.urls),
    path('index/', views.index),
]

9、在app01应用下新建templates目录,并在其下新建index.html,其内容如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .message {
            height: 300px;
            border: 1px solid #dddddd;
            width: 100%;
        }
    </style>
</head>

<body>
<div class="message" id="message"></div>
<div>
    <input type="text" placeholder="请输入" id="txt">
    <input type="button" value="发送" onclick="sendMsg()">
    <input type="button" value="关闭连接" onclick="closeConn()">
    <input type="button" value="重新建立连接" onclick="connect()">
</div>

<script>
    var socket = null;
    function connect() {
        socket = new WebSocket("ws:/127.0.0.1:8000/room/123/");

        // 连接完成以后 客户端自动触发
        socket.onopen = function (event) {
            let tag = document.createElement("div")
            tag.innerHTML = "连接已建立"
            document.getElementById("message").appendChild(tag)
        }

        // 回调函数 当服务端有消息发送到时,自动触发
        socket.onmessage = function (event) {
            console.log(event.data);
            let tag = document.createElement("div");
            tag.innerText = event.data;
            document.getElementById("message").appendChild(tag)
        }

        // 当连接关闭时,触发
        socket.onclose = function (event) {
            let tag = document.createElement("div")
            tag.innerHTML = "连接已断开"
            document.getElementById("message").appendChild(tag)

        }
    }
    function sendMsg() {
        let tag = document.getElementById("txt")
        socket.send(tag.value)
    }
    function closeConn() {
        // 向服务端发送断开连接
        socket.close();
    }
    connect()
</script>
</body>
</html>

10、在app01应用下新建consumers.py文件其内容如下:

py 复制代码
from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer

#  简单版群聊就是定义个数组,并在连接时把对象添加到数组内,在断开链接时移除对象
CONN_LIST = []

class ChatConsumer(WebsocketConsumer):  # 继承WebsocketConsumer
   def websocket_connect(self, message):
       print("有人进行连接了。。。。")
       CONN_LIST.append(self)
       # 有客户端向后端发送 WebSocket 连接的请求时,自动触发(握手)
       self.accept()

   def websocket_receive(self, message):
       # 浏览器基于 WebSocket 向后端发送数据,自动触发接收消息
       print(message)
       #  一对一聊天
       # if message["text"] == "close":
       #     self.send("服务端主动关闭连接")
       #     #  服务端主动关闭连接
       #     self.close()
       # self.send(message["text"])
       for conn in CONN_LIST:
           conn.send(message["text"])



   def websocket_disconnect(self, message):
       # 客户端向服务端断开连接时,自动触发
       CONN_LIST.remove(self)
       print("连接断开!!")
       raise StopConsumer()

11、运行项目 在项目根目录下执行:

复制代码
python manage.py runserver

12、至此即可在浏览器中进行简单的多人聊天,结果如下:


相关推荐
强化生物科研小助手6 小时前
CAS:47623-98-3,DiSBAC2(3)一种慢反应的膜电位敏感探针
django·html·pygame
橘猫云计算机设计9 小时前
基于springboot的考研成绩查询系统(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·python·考研·django·毕业设计
程序员一诺11 小时前
【Django开发】前后端分离django美多商城项目第15篇:商品搜索,1. Haystack介绍和安装配置【附代码文档】
后端·python·django·框架
小狗很可爱1 天前
视图函数的应用
django
鹅肝手握高V五色1 天前
Wireshark入门教程:如何抓取和过滤网络数据包
websocket·网络协议·tcp/ip·http·网络安全·https·udp
CryptoPP1 天前
深入实践:基于WebSocket的全球化金融数据实时对接方案。 马来西亚、印度、美国金融数据API
websocket·网络协议·金融
麦麦大数据1 天前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
网络抓包与爬虫1 天前
Wireshark——抓包分析
websocket·网络协议·tcp/ip·http·网络安全·https·udp
仙女很美哦1 天前
Flutter视频播放、Flutter VideoPlayer 视频播放组件精要
websocket·网络协议·tcp/ip·http·网络安全·https·udp
兔子的洋葱圈1 天前
【django】1-2 django项目的请求处理流程(详细)
后端·python·django