一、後端

python、django（channels）

1.1、安裝channels

pip install channels
pip install channels_redis

1.2、配置專案settings.py檔案中的INSTALLED_APPS值

新增channels、專案主站名稱

1.3、配置專案settings.py檔案中新增ASGI_APPLICATION

1.4、在APP（子站）中新建routing.py檔案

from django.conf.urls import url

from myChat.conView import ChatService

websocket_urlpatterns 
 
= [
    url(r"ws/", ChatService()),
]

1.5、在APP（子站）中新建conView.py檔案

import json
import time

from channels.generic.websocket import WebsocketConsumer


class ChatService(WebsocketConsumer):
    # 當Websocket建立連線時
    def connect(self):
        print("已連線")
        self.accept()
        # 每隔2秒給前端傳送資料
 

        for i in range(10):
            time.sleep(2)
            self.send(text_data=json.dumps({
                'code': 200,
                'message': "djhafkja"
            }))

    # 當Websocket接收到訊息時
    def receive(self, text_data=None, bytes_data=None):
        print("已收到訊息")

    # 當Websocket發生斷開連線時
 

    def disconnect(self, code):
        print("已斷開")

1.6、在專案（主站）中新建routing.py檔案

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

import myChat.routing

application = ProtocolTypeRouter({
    "websocket": AuthMiddlewareStack(
        URLRouter(
            myChat.routing.websocket_urlpatterns
        )
    ),
})

1.7、啟動

python .\manage.py runserver

二、前端

vue

    initWebSocket() {
      this.websock = new WebSocket("ws://127.0.0.1:8000/ws/");
      this.websock.onmessage = this.WebSocketOnMessage;
      this.websock.onopen = this.WebSocketOnOpen;
      this.websock.onerror = this.WebSocketOnError;
      this.websock.onclose = this.WebSocketOnClose;
    },

    WebSocketOnMessage(e) {
      this.msg.push(JSON.parse(e.data).message);
      console.log("WebSocketOnMessage");
      console.log(e);
      console.log(JSON.parse(e.data).message);
    },

    WebSocketOnOpen(e) {
      console.log("WebSocketOnOpen");
      console.log(e);
    },

    WebSocketOnError(e) {
      console.log("WebSocketOnError");
      console.log(e);
    },

    WebSocketOnClose(e) {
      console.log("WebSocketOnClose");
      console.log(e);
      console.log(e.code);
    },

三、效果