INSTALLED_APPS = [
    'channels',  # 項目中要使用channels做WebSocket了
]

ASGI_APPLICATION = "saas.routing.application" # 項目名.routing.application

# -*- coding:utf-8 -*-
# 作者：IT小學(xué)生蔡坨坨
# 時間：2021/4/23 18:21
# 功能：channels相關(guān)路由

from channels.routing import ProtocolTypeRouter, URLRouter
from django.conf.urls import url

from web import consumers

application = ProtocolTypeRouter({
    "websocket": URLRouter([
        url(r'^chat/$', consumers.ChatConsumer),
    ])
})

# -*- coding:utf-8 -*-
# 作者：IT小學(xué)生蔡坨坨
# 時間：2021/4/23 18:25
# 功能：channels相關(guān)視圖

from channels.exceptions import StopConsumer
from channels.generic.websocket import WebsocketConsumer

# 定義一個列表，用于存放當(dāng)前在線的用戶
CONSUMER_OBJECT_LIST = []


class ChatConsumer(WebsocketConsumer):

    def websocket_connect(self, message):
        """
        客戶端瀏覽器發(fā)來連接請求之后就會被觸發(fā)
        :param message:
        :return:
        """

        # 服務(wù)端接收連接，向客戶端瀏覽器發(fā)送一個加密字符串
        self.accept()
        # 連接成功
        CONSUMER_OBJECT_LIST.append(self)

    def websocket_receive(self, message):
        """
        客戶端瀏覽器向服務(wù)端發(fā)送消息，此方法自動觸發(fā)
        :param message:
        :return:
        """

        print("接受到消息了。", message)

        # 服務(wù)端給客戶端回一條消息
        # self.send(text_data=message["text"])
        for obj in CONSUMER_OBJECT_LIST:
            obj.send(text_data=message["text"])

    def websocket_disconnect(self, message):
        """
        客戶端瀏覽器主動斷開連接
        :param message:
        :return:
        """

        # 服務(wù)端斷開連接
        CONSUMER_OBJECT_LIST.remove(self)
        raise StopConsumer()

<!-- css樣式 -->
<style>
    pre {
        display: block;
        padding: 9.5px;
        margin: 0 0 10px;
        font-size: 18px;
        line-height: 1.42857143;
        color: #333;
        word-break: break-all;
        word-wrap: break-word;
        background-color: #00aaaa;
        border-radius: 12px;
    }
</style>

<!-- body內(nèi)容 -->
<div style="width: 600px;height: 574px;margin: auto;margin-top: 20px;">
    <div class="panel panel-success">
        <div class="panel-heading">在線實時聊天室</div>
        <div class="panel-body">
            <div style="border: #f5f5f5 2px solid;width: 570px;height: 400px;overflow:scroll">
                <div id="content">
                    <!-- 聊天記錄 -->
                </div>
            </div>
            <div style="border-color: white;margin-top: 10px">
                <textarea type="text" id="txt" placeholder="請輸入消息內(nèi)容......" class="form-control"></textarea>
            </div>
        </div>

        <div class="table">
            <div>
                <button class="btn btn-danger" onclick="closeLink();" style="margin-left: 74%">斷開連接</button>
                <button class="btn btn-success" onclick="sendMsg();">發(fā)送</button>
            </div>
        </div>
    </div>
</div>

<!-- 消息模板 -->
<div id="recordTemplate" class="hide">
    <div class="right-info">
        <!-- 用戶 -->
        <p>匿名用戶：</p>

        <!-- 消息內(nèi)容 -->
        <pre>

            </pre>
    </div>
</div>


<!-- js代碼 -->
<script>
    var STATUS; // 是否連接的標(biāo)志
    var ws = new WebSocket("ws://127.0.0.1:8000/chat/");

    ws.onopen = function () {
        // 客戶端在握手環(huán)節(jié)驗證成功之后，自動執(zhí)行此方法
        console.log("連接成功。")
    };

    ws.onmessage = function msg(event) {
        var $item = $("#recordTemplate").find('.right-info').clone();
        $item.find('pre').html(event.data);
        $("#content").append($item);
    };

    function sendMsg() {
        if (STATUS == false) {
            swal({
                title: "已斷開",
                text: "當(dāng)前已斷開連接，刷新頁面重新連接。"
            });
        } else {
            ws.send($("#txt").val());
            $("#txt").val("");
        }
    }

    function closeLink() {
        ws.close();
        STATUS = false;
        console.log("斷開連接");
        swal({
            text: "成功斷開連接，刷新頁面重新連接。"
        });
    }
</script>