INSTALLED_APPS = [
 'channels',  # 項(xiàng)目中要使用channels做WebSocket了
]
ASGI_APPLICATION = "saas.routing.application" # 項(xiàng)目名.routing.application

# -*- coding:utf-8 -*-
# 作者：IT小學(xué)生蔡坨坨
# 時(shí)間：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é)生蔡坨坨
# 時(shí)間：2021/4/23 18:25
# 功能：channels相關(guān)視圖
from channels.exceptions import StopConsumer
from channels.generic.websocket import WebsocketConsumer
# 定義一個(gè)列表，用于存放當(dāng)前在線的用戶
CONSUMER_OBJECT_LIST = []

class ChatConsumer(WebsocketConsumer):
 def websocket_connect(self, message):
  """
  客戶端瀏覽器發(fā)來連接請(qǐng)求之后就會(huì)被觸發(fā)
  :param message:
  :return:
  """
  # 服務(wù)端接收連接，向客戶端瀏覽器發(fā)送一個(gè)加密字符串
  self.accept()
  # 連接成功
  CONSUMER_OBJECT_LIST.append(self)
 def websocket_receive(self, message):
  """
  客戶端瀏覽器向服務(wù)端發(fā)送消息，此方法自動(dòng)觸發(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):
  """
  客戶端瀏覽器主動(dòng)斷開連接
  :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">在線實(shí)時(shí)聊天室</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="請(qǐng)輸入消息內(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é)驗(yàn)證成功之后，自動(dòng)執(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>