channel是第三方工具包，对于不支持websocket协议的框架可以借助此包实现websocket

 pip3 install channel  

Project Interprete 搜索  “channel”即可

  1. INSTALLED_APPS = [
  2.     'django.contrib.admin',
  3.     'django.contrib.auth',
  4.     'django.contrib.contenttypes',
  5.     'django.contrib.sessions',
  6.     'django.contrib.messages',
  7.     'django.contrib.staticfiles',
  8.     'app01.apps.App01Config',
  9.     'channels',
  10. ]

配置完app后，还要对ASGI_APPLICATION配置：

  1. # 配置 channel
  2. ASGI_APPLICATION = "MiniChat.routing.application"

如果不配置就会报错：

  1. CommandError: You have not set ASGI_APPLICATION, which is needed to run the server.

在app下新建routing.py文件，此文件相当于django的url.py

MiniChat/routing.py

  1. from channels.routing import ProtocolTypeRouter, URLRouter
  2. from django.conf.urls import url
  3. from chat import consumers
  5. application = ProtocolTypeRouter({
  6.     "websocket":URLRouter([
  8.     ])
  9. })

此文件相当于django中的view.py文件

MiniChat/consumers.py

  1. #!usr/bin/env python
  2. #-*- coding:utf-8 _*-
  3. from channels.generic.websocket import WebsocketConsumer
  4. from channels.exceptions import StopConsumer
  6. class ChatConsumer(WebsocketConsumer):
  8.     def websocket_connect(self, message):
  9.         """
  10.         客户端发送请求进来，触发此方法
  11.         :param message:
  12.         :return:
  13.         """
  14.         self.accept()
  16.     def websocket_receive(self, message):
  17.         """
  18.         客户端发送消息，触发此方法，并返回数据
  19.         :param message:
  20.         :return:
  21.         """
  22.         self.send()
  24.     def websocket_disconnect(self, message):
  26.         """
  27.         客户端主动断开链接，触发此方法
  28.         :param message:
  29.         :return:
  30.         """
  31.         # 服务端触发异常 StopConsumer
  32.         raise StopConsumer
  36.

consumers.py

最终项目目录：

基于上面的配置，先创建一个视图：

  1. from django.shortcuts import render
  3. # Create your views here.
  4.  
  5. def index(request):
  7.     return render(request, "index.html")

然后在app01中创建一个templates包，在这个包中创建一个index.html.再去实现html文件：

Django默认模板查找顺序是从根目录查找，找不到再去app中查找

  1. <div>
  2.     <div>
  3.         <input type="text" id="txt">
  4.         <input type="button" value="send" onclick="sendMsg();">
  5.         <input type="button" value="close" onclick="closeConn();">
  6.     </div>
  7.     <h2>聊天记录</h2>
  8.     <div id="content">
  9.  
  10.     </div>
  11. </div>

现在跑一下项目文件，浏览器页面显示：

 

 现在再去完善下html文件

  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  2. <script>
  3.  
  4.     var ws = new WebSocket("ws://127.0.0.1:8000/chat/");
  6.     ws.onopen = function(){
  7.         // 客户端验证握手环节完成之后，自动执行该方法
  8.         console.log("链接成功。。。")
  9.     };
  11.     ws.onmessage = function (event) {
  12.         //  接受服务端发送的消息
  13.         //  客户端完成握手验证之后 触发该方法
  14.         console.log(event.data);
  15.         var tag = $("<div>");
  16.         tag.text(event.data);
  17.         $("#content").append(tag);
  18.         console.log(1)
  20.     };
  22.     function sendMsg() {
  23.         // ws.send()：发送消息
  24.       ws.send($("#txt").val());
  26.     };
  28.     function closeConn() {
  29.         // ws.close()：关闭Websocket链接
  30.         console.log("断开链接。。。");
  31.         ws.close();
  32.     };
  34. </script>

在这里就使用简单的方式实现多人聊天的功能，对consumers.py做以下修改：

  1. USER_list = []
  2. class ChatConsumer(WebsocketConsumer):
  4.     def websocket_connect(self, message):
  5.         """
  6.         客户端发送请求进来，触发此方法
  7.         :param message:
  8.         :return:
  9.         """
  10.         self.accept()  # 执行accept之后代表链接成功
  11.         USER_list.append(self)  # 将每一个链接的用户添加到列表中
  12.  
  13.     def websocket_receive(self, message):
  14.         """
  15.         客户端发送消息，触发此方法，并返回数据
  16.         :param message:
  17.         :return:
  18.         """
  19.         # print("msg:", message)      # msg: {'type': 'websocket.receive', 'text': '123'}
  20.         data = message["text"]        # 获取字典中的数据
  21.         # self.send("over")
  22.         for user in USER_list:   # 遍历用户列表返回消息
  23.             user.send(data)
  25.     def websocket_disconnect(self, message):
  26.         """
  27.         客户端主动断开链接，触发此方法
  28.         :param message:
  29.         :return:
  30.         """
  31.         # 服务端触发异常 StopConsumer
  32.         USER_list.remove(self)  # 将每一个链接的用户从列表中删除
  33.         raise StopConsumer

至此，就简单实现了多人在线聊天的功能。

 

版权声明：本文为fanhua-wushagn原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/fanhua-wushagn/p/12795710.html