Django和websocket實現(xiàn)簡單的多人聊天的示例代碼
更新時間：2025年01月10日 10:02:28 作者：jjw_zyfx
本文主要介紹了使用Django和WebSocket實現(xiàn)一個簡單的多人聊天應(yīng)用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1、版本及環(huán)境 python 為3.9.12, django為4.2詳細(xì)信息如下：
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("有人進(jìn)行連接了。。。。")
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、至此即可在瀏覽器中進(jìn)行簡單的多人聊天，結(jié)果如下：
到此這篇關(guān)于Django和websocket實現(xiàn)簡單的多人聊天的示例代碼的文章就介紹到這了,更多相關(guān)Django websocket多人聊天內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Python實現(xiàn)PC屏幕截圖并自動發(fā)送郵件
在當(dāng)前的數(shù)字化世界中,自動化已經(jīng)成為我們?nèi)粘Ｉ詈凸ぷ髦械年P(guān)鍵部分,本文我們將探討如何使用Python來實現(xiàn)一個特定的自動化任務(wù) - PC屏幕截圖自動發(fā)送到指定的郵箱,感興趣的可以了解下2023-11-11
pycharm 使用anaconda為默認(rèn)環(huán)境的操作
這篇文章主要介紹了pycharm 使用anaconda為默認(rèn)環(huán)境的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-02-02
這篇文章主要介紹了為python設(shè)置socket代理的方法,需要的朋友可以參考下2015-01-01
python多項式擬合之np.polyfit 和 np.polyld詳解
這篇文章主要介紹了python多項式擬合之np.polyfit 和 np.polyld的實例代碼，python數(shù)據(jù)擬合主要可采用numpy庫，庫的安裝可直接用pip install numpy等,需要的朋友跟隨小編一起學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了Python腳本去除文件的只讀性操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
在linux下實現(xiàn) python 監(jiān)控usb設(shè)備信號
今天小編就為大家分享一篇在linux下實現(xiàn) python 監(jiān)控usb設(shè)備信號，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-07-07
python啟動辦公軟件進(jìn)程(word、excel、ppt、以及wps的et、wps、wpp)
見如下源代碼，也可從附件中下載。2009-04-04
這篇文章主要介紹了python讀寫操作csv和excle文件代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03
python中浮點數(shù)比較判斷!為什么不能用==(推薦)
這篇文章主要介紹了python中浮點數(shù)比較判斷!為什么不能用==,本文給大家分享問題解決方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Python反射操作對象屬性方法詳解,在Python面對對象中，通過字符串的形式去操作對象的屬性方法就稱之為反射(在Python中一切事物都是可以為對象),需要的朋友可以參考下2023-08-08