Django和websocket實現(xiàn)簡單的多人聊天的示例代碼
1、版本及環(huán)境 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、創(chuàng)建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、項目整體目錄結(jié)構(gòu)如下:

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文件中的內(nèi)容如下;
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文件,其內(nèi)容如下:
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中的內(nèi)容如下:
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應(yīng)用下新建templates目錄,并在其下新建index.html,其內(nèi)容如下:
<!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="發(fā)送" onclick="sendMsg()">
<input type="button" value="關(guān)閉連接" 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/");
// 連接完成以后 客戶端自動觸發(fā)
socket.onopen = function (event) {
let tag = document.createElement("div")
tag.innerHTML = "連接已建立"
document.getElementById("message").appendChild(tag)
}
// 回調(diào)函數(shù) 當(dāng)服務(wù)端有消息發(fā)送到時,自動觸發(fā)
socket.onmessage = function (event) {
console.log(event.data);
let tag = document.createElement("div");
tag.innerText = event.data;
document.getElementById("message").appendChild(tag)
}
// 當(dāng)連接關(guān)閉時,觸發(fā)
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() {
// 向服務(wù)端發(fā)送斷開連接
socket.close();
}
connect()
</script>
</body>
</html>
10、在app01應(yīng)用下新建consumers.py文件其內(nèi)容如下:
from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer
# 簡單版群聊就是定義個數(shù)組,并在連接時把對象添加到數(shù)組內(nèi),在斷開鏈接時移除對象
CONN_LIST = []
class ChatConsumer(WebsocketConsumer): # 繼承WebsocketConsumer
def websocket_connect(self, message):
print("有人進行連接了。。。。")
CONN_LIST.append(self)
# 有客戶端向后端發(fā)送 WebSocket 連接的請求時,自動觸發(fā)(握手)
self.accept()
def websocket_receive(self, message):
# 瀏覽器基于 WebSocket 向后端發(fā)送數(shù)據(jù),自動觸發(fā)接收消息
print(message)
# 一對一聊天
# if message["text"] == "close":
# self.send("服務(wù)端主動關(guān)閉連接")
# # 服務(wù)端主動關(guān)閉連接
# self.close()
# self.send(message["text"])
for conn in CONN_LIST:
conn.send(message["text"])
def websocket_disconnect(self, message):
# 客戶端向服務(wù)端斷開連接時,自動觸發(fā)
CONN_LIST.remove(self)
print("連接斷開?。?)
raise StopConsumer()
11、運行項目 在項目根目錄下執(zhí)行:
python manage.py runserver
12、至此即可在瀏覽器中進行簡單的多人聊天,結(jié)果如下:


到此這篇關(guān)于Django和websocket實現(xiàn)簡單的多人聊天的示例代碼的文章就介紹到這了,更多相關(guān)Django websocket多人聊天內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

