首頁 > 軟體

django channels使用和設定及實現群聊

2022-05-31 14:00:10

1.1WebSocket原理

http協定

  • 連線
  • 資料傳輸
  • 斷開連線

websocket協定,是建立在http協定之上的。

  • 連線,使用者端發起。
  • 握手(驗證),使用者端傳送一個訊息,後端接收到訊息再做一些特殊處理並返回。 伺服器端支援websocket協定。

1.2django框架

django預設不支援websocket,需要安裝元件:

pip install channels

設定:

註冊channels

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'channels',
]

在settings.py中新增 asgi_application

ASGI_APPLICATION = "ws_demo.asgi.application"

修改asgi.py檔案

import os
from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter, URLRouter
 
from . import routing
 
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'ws_demo.settings')
 
# application = get_asgi_application()
 
application = ProtocolTypeRouter({
    "http": get_asgi_application(),
    "websocket": URLRouter(routing.websocket_urlpatterns),
})

在settings.py的同級目錄建立 routing.py

from django.urls import re_path
 
from app01 import consumers
 
websocket_urlpatterns = [
    re_path(r'ws/(?P<group>w+)/$', consumers.ChatConsumer.as_asgi()),
]

在app01目錄下建立 consumers.py,編寫處理處理websocket的業務邏輯。

from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer
 
 
class ChatConsumer(WebsocketConsumer):
    def websocket_connect(self, message):
        # 有使用者端來向後端傳送websocket連線的請求時,自動觸發。
        # 伺服器端允許和使用者端建立連線。
        self.accept()
 
    def websocket_receive(self, message):
        # 瀏覽器基於websocket向後端傳送資料,自動觸發接收訊息。
        print(message)
        self.send("不要回復不要回復")
        # self.close()
 
    def websocket_disconnect(self, message):
        # 使用者端與伺服器端斷開連線時,自動觸發。
        print("斷開連線")
        raise StopConsumer()

小結

基於django實現websocket請求,但現在為止只能對某個人進行處理。

2.0 實現群聊

2.1 群聊(一)

前端:

<!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="sendMessage()">
    <input type="button" value="關閉連線" onclick="closeConn()">
</div>
 
<script>
 
    socket = new WebSocket("ws://127.0.0.1:8000/room/123/");
 
    // 建立好連線之後自動觸發( 伺服器端執行self.accept() )
    socket.onopen = function (event) {
        let tag = document.createElement("div");
        tag.innerText = "[連線成功]";
        document.getElementById("message").appendChild(tag);
    }
 
    // 當websocket接收到伺服器端發來的訊息時,自動會觸發這個函數。
    socket.onmessage = function (event) {
        let tag = document.createElement("div");
        tag.innerText = event.data;
        document.getElementById("message").appendChild(tag);
    }
 
    // 伺服器端主動斷開連線時,這個方法也被觸發。
    socket.onclose = function (event) {
        let tag = document.createElement("div");
        tag.innerText = "[斷開連線]";
        document.getElementById("message").appendChild(tag);
    }
 
    function sendMessage() {
        let tag = document.getElementById("txt");
        socket.send(tag.value);
    }
 
    function closeConn() {
        socket.close(); // 向伺服器端傳送斷開連線的請求
    }
 
</script>
 
</body>
</html>

後端:

from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer
 
CONN_LIST = []
 
 
class ChatConsumer(WebsocketConsumer):
    def websocket_connect(self, message):
        print("有人來連線了...")
        # 有使用者端來向後端傳送websocket連線的請求時,自動觸發。
        # 伺服器端允許和使用者端建立連線(握手)。
        self.accept()
 
        CONN_LIST.append(self)
 
    def websocket_receive(self, message):
        # 瀏覽器基於websocket向後端傳送資料,自動觸發接收訊息。
        text = message['text']  # {'type': 'websocket.receive', 'text': '阿斯蒂芬'}
        print("接收到訊息-->", text)
        res = "{}SB".format(text)
        for conn in CONN_LIST:
            conn.send(res)
 
    def websocket_disconnect(self, message):
        CONN_LIST.remove(self)
        raise StopConsumer()

2.2 群聊(二)

第二種實現方式是基於channels中提供channel layers來實現。(如果覺得複雜可以採用第一種)

setting中設定 。

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer",
    }
}

如果是使用的redis 環境

pip3 install channels-redis
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
        "CONFIG": {
            "hosts": [('10.211.55.25', 6379)]
        },
    },
}

consumers中特殊的程式碼。

from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer
from asgiref.sync import async_to_sync
 
 
class ChatConsumer(WebsocketConsumer):
    def websocket_connect(self, message):
        # 接收這個使用者端的連線
        self.accept()
 
        # 將這個使用者端的連線物件加入到某個地方(記憶體 or redis)1314 是群號這裡寫死了
        async_to_sync(self.channel_layer.group_add)('1314', self.channel_name)
 
    def websocket_receive(self, message):
        # 通知組內的所有使用者端,執行 xx_oo 方法,在此方法中自己可以去定義任意的功能。
        async_to_sync(self.channel_layer.group_send)('1314', {"type": "xx.oo", 'message': message})
 
        #這個方法對應上面的type,意為向1314組中的所有物件傳送資訊
    def xx_oo(self, event):
        text = event['message']['text']
        self.send(text)
 
    def websocket_disconnect(self, message):
        #斷開連結要將這個物件從 channel_layer 中移除
        async_to_sync(self.channel_layer.group_discard)('1314', self.channel_name)
        raise StopConsumer()

好了分享就結束了,其實總的來講介紹的還是比較淺 

如果想要深入一點 推薦兩篇部落格 

【翻譯】Django Channels 官方檔案 -- Tutorial - 守護窗明守護愛 - 部落格園

django channels - 武沛齊 - 部落格園

到此這篇關於django channels使用和設定及實現群聊的文章就介紹到這了,更多相關django channels設定內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com