03-04-06-Django實時通訊之聊天室

先上圖看效果（加867284461群獲取demo）

第一步：安裝模塊

Django==2.1.4 #channels2.0最低django版本要求是1.11+，python3.5+
channels==2.1.7
channels-redis==2.3.3

第二步：配置settings.py

#1 加入app
INSTALLED_APPS = [
	...
    'app01.apps.App01Config',
    'channels',
]
#2 配置channels layer
ASGI_APPLICATION = 'django_websocket.routing.application' #自己routing的路徑
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [('127.0.0.1', 6379)], #需修改redis的地址
        },
    },
}

第三步：配置路由

在項目settings文件同級目錄中新增routing.py

from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from app01 import routing

application = ProtocolTypeRouter({
    'websocket': AuthMiddlewareStack(
        URLRouter(
            routing.websocket_urlpatterns# 指明路由文件是django_websocket/routing.py,類似於路由分發
        )
    ),
})

最后在app里配置路由和對應的消費者，(我是app01下的routing.py)：

from django.urls import path
from . import consumers

websocket_urlpatterns = [
    path('ws/chat', consumers.Chatting), #consumers.Chatting 是該路由的消費者
]

第四步:在app目錄下編寫consumers.py

from channels.generic.websocket import AsyncWebsocketConsumer
import json
class Chatting(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_group_name = 'xiaoyuanqujing'
        # 加入聊天室
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # 離開聊天室
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    # 通過WebSocket，接收數據
    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
        print(message)
        # Send message to room group
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message
            }
        )

    # Receive message from room group
    async def chat_message(self, event):
        message = '匿名用戶：' + event['message']
        print('返回')
        # 通過WebSocket發送
        await self.send(text_data=json.dumps({
            'message': message
        }))

第五步：前端發起websocket請求

 var chatSocket = new WebSocket(
            'ws://' + window.location.host + '/ws/chat');

        chatSocket.onmessage = function (e) {
            var data = JSON.parse(e.data);
            var message = data['message'];
            console.log(message)
            var datamsg=$('#chat-log').val()+message+'\n'
            $('#chat-log').val(datamsg)
        };

        chatSocket.onclose = function (e) {
            console.error('Chat socket closed unexpectedly');
        };
        $('#chat-message-submit').click(function () {
            if (chatSocket.readyState === 1) {
                var message = $('#chat-message-input').val()
                chatSocket.send(JSON.stringify({
                    'message': message
                }));
                $('#chat-message-input').val("")
            } else {
                console.log("還沒有連接")
            }


        })

第六步：啟動redis，啟動項目

愉快的聊天吧