django之websocket连接

学无止境gwx

已于 2022-03-11 11:49:55 修改

阅读量5.5k

点赞数 1

分类专栏： web后端 python 代码文章标签： django python 后端

于 2022-03-03 14:23:15 首次发布

本文链接：https://blog.csdn.net/weixin_49278803/article/details/123186579

版权

web后端同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

python 代码

15 篇文章 1 订阅

订阅专栏

前言

曾经写过一篇关于普通websocket的实现方法，封装层级比较低，不支持django使用。

一、介绍

django实现websocket，有两种方式

早期django使用dwebsocket实现websocket，后来高版本django就不再兼容维护dwebsocket了
目前较为流行的是使用channels实现websocket

二、dwebsocket实现websocket

版本号：

django：不同版本采用不同方法
dwebsocket：0.5.12

2.1、路由

在某APP的urls里面填写路由配置

from django.urls import path

path('websocketLink/<label>/', websocketLink)

2.2、后端

在某APP的views里面填写后端代码

import json
from dwebsocket.decorators import accept_websocket, require_websocket

# 存储连接websocket的用户
clients = {}
# 记录连接人数   其实没什么卵用  = =
count = 0

# 连接websocket  ws://localhost:8000/websocketLink/22/
# 因为 websocket 是协议  所以不能用 http或https
# @accept_websocket
@require_websocket
def websocketLink(request, label):
    '连接websocket'
    global count
    # 获取连接
    if request.is_websocket:
        try:
            s = {}  # 多个页面请求同一websocket地址，连接信息是不同的，通过s进行收集并按照标签label存入clients中
            s[str(request.websocket)] = request.websocket

            if clients.get(label) == None:
                # 第一次请求地址时, 人数加一
                count = count + 1
                clients[label] = s
            else:
                clients[label].update(s)

            print("当前地址连接用户人数:{}，标签为{}".format(str(count), label))
            print("增加当前客户端后，已存在的客户端数量:{}".format(len(clients[label])))
            """当django版本很旧的时候(我用的是2.0.8至2.1.3任一版本)，可以用最简单的方法"""
            for msg in request.websocket:
                if msg == None:
                    print("客户端关闭，接收到的msg为None。将clients中该客户端清除")
                    clients.get(label).pop(str(request.websocket))
                else:
                    msg = json.loads(msg)
                    print("Received data from {},数据为 {}".format(label, msg))
                    send(label, msg)
            """当django版本升级后,我使用的下面的方法监听，但效果并不好，因为使用时每一个websocket都占用一个线程，当数量特别多是，那么将会导致服务器资源无端占用，降低服务器响应速度。"""
            """
            # 开启线程来监听socket信息
            n = Thread(target=test, args=(label, request.websocket))
            n.start()
            # 有可能是django版本升级后长连接功能被破坏了，所以自写了一个while语法保持长连接。还是推荐使用低配django版本(因为它自带长连接)
            while 1:
                import time
                time.sleep(10)
                pass
            """
        except Exception as e:
            print(e)

# 发送消息
def websocketMsg(client_socket_dict, data):
    # 因为一个账号会有多个页面打开 所以连接信息需要遍历
    data = json.dumps(data).encode('utf-8')
    for cli in client_socket_dict:
        client_socket_dict[cli].send(data)

# 服务端发送消息
def send(label, data):
    websocketMsg(clients[label], data)


def test(label, client_socket):
    # 持续等待接收从客户端发来的消息并将消息广播到所有的socket客户端
    while 1:
        data = client_socket.wait()

        if data == None:
            # 客户端连接断开时,msg结果为None。需要两步：1、websocket收集列表client清除当前websocket连接2、退出当前客户端开启的websocket监听多线程
            print("客户端关闭，执行后端逻辑")
            clients.get(label).pop(str(client_socket))
            break
        else:
            # 正常接收到消息处理逻辑
            data = json.loads(data)
            print("Received data from {},数据为 {}".format(label, data))
            send(label, data)

2.3、前端


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>Echo Test</h1>
  <input id="sendTxt" type="text">
  <button id="sendBtn">发送</button>
  <div id="recv"></div>
  <script type="text/javascript">
    var websocket = new WebSocket("ws://127.0.0.1:8000/websocketLink/test/");
    // 引入websocket
    websocket.onopen = function () {
      console.log('websocket open');
      let obj = JSON.stringify({ type: "set_channel", content: "222",channel:"sasaas12"})
	  setTimeout(()=>{websocket.send(obj)},5000)
      
      document.getElementById("recv").innerHTML = "Connected";
    }
    // 结束websocket
    websocket.onclose = function () {
      console.log('websocket close');
    }
    websocket.onerror = function () {
      console.log('websocket error')
    }
    // 接受到信息
    websocket.onmessage = function (e) {
      console.log(e.data);
      document.getElementById("recv").innerHTML = e.data;
    }
    // 点击发送webscoket
    document.getElementById("sendBtn").onclick = function () {
      var txt = document.getElementById("sendTxt").value;
      websocket.send(JSON.stringify({ type: "chagne", content: txt,channel:"sasaasa" }));
    }
  </script>
  <!-- <script>
    import { message } from 'antd';

    class WebSocketClass {
      constructor() {
        this.instance = null;
        this.connect();
      }
      static getInstance() {
        if (!this.instance) {
          this.instance = new WebSocketClass();
        }
        return this.instance;
      }

      connect() {
        this.ws = new WebSocket('ws://xxxx');
        this.ws.onopen = e => {
          this.status = 'open';
          message.info('连接成功');
          console.log(`连接成功`, e);
          this.heartCheck();
          this.getMessage();
        };
      }

      heartCheck() {
        // 心跳机制的时间可以自己与后端约定
        this.pingPong = 'ping'; // ws的心跳机制状态值
        this.pingInterval = setInterval(() => {
          if (this.ws.readyState === 1) {
            // 检查ws为链接状态 才可发送
            this.ws.send('ping'); // 客户端发送ping
          }
        }, 10000);
        this.pongInterval = setInterval(() => {
          if (this.pingPong === 'ping') {
            this.closeHandle('pingPong没有改变为pong'); // 没有返回pong 重启webSocket
          }
          // 重置为ping 若下一次 ping 发送失败 或者pong返回失败(pingPong不会改成pong)，将重启
          console.log('返回pong');
          this.pingPong = 'ping';
        }, 20000);
      }

      closeHandle(e = 'err') {
        // 因为webSocket并不稳定，规定只能手动关闭(调closeMyself方法)，否则就重连
        if (this.status !== 'close') {
          console.log(`断开，重连websocket`, e);
          if (this.pingInterval !== undefined && this.pongInterval !== undefined) {
            // 清除定时器
            clearInterval(this.pingInterval);
            clearInterval(this.pongInterval);
          }
          this.connect(); // 重连
        } else {
          console.log(`websocket手动关闭,或者正在连接`);
        }
      }

      getMessage() {
        this.ws.onmessage = e => {
          if (e.data === 'pong') {
            this.pingPong = 'pong'; // 服务器端返回pong,修改pingPong的状态
          } else {
            message.info(e.data);
          }
          console.log(e.data);
          return e.data;
        };
      }

      close() {
        clearInterval(this.pingInterval);
        clearInterval(this.pongInterval);
        this.status = 'close';
        this.ws.send('close');
        this.ws.close();
        message.info('已断开连接');
        console.log('close');
      }
    }

    export default new WebSocketClass();
  </script> -->
</body>

</html>

三、channels实现websocket

版本号：

channels:2.2.0(只能实现单用户通信)
channels-redis:2.4.2(通道作用，配合channels包实现多用户通信)
django:

channels运行于ASGI协议上，ASGI的全名是Asynchronous Server Gateway Interface。它是区别于Django使用的WSGI协议的一种异步服务网关接口协议，正是因为它才实现了websocket

3.1、setting配置

# APPS中添加channels
INSTALLED_APPS = [
    'django.contrib.staticfiles',
    'channels',
]
# 指定ASGI的路由地址,格式<<app.routing.application>>
ASGI_APPLICATION = 'tests.routing.application'

3.2、在tests(app的名字)下的routing.py文件(创建)中写入以下内容

from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from tests.urls import websocket_urlpatterns

application = ProtocolTypeRouter({
    "websocket": AuthMiddlewareStack(
        URLRouter(
            websocket_urlpatterns
        )
    )
})

至此Django已经基本集成了Channels框架，可以启动python manage.py runserver 0.0.0.0:8000试一下哦。这个时候呢项目启动已经由django使用的WSGI协议转换为了Channels使用的ASGI协议了

3.3、加入websocket通信之url配置

from django.urls import path
from tests.views import ChatConsumer

websocket_urlpatterns = [
    path('socket/', ChatConsumer, name='websocket-url')
]

3.4、加入websocket通信之前端


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>Echo Test</h1>
  <input id="sendTxt" type="text">
  <button id="sendBtn">发送</button>
  <div id="recv"></div>
  <script type="text/javascript">
    var websocket = new WebSocket("ws://127.0.0.1:8000/socket/");
    // 引入websocket
    websocket.onopen = function () {
      console.log('websocket open');
      let obj = JSON.stringify({ type: "set_channel", content: "222",channel:"sasaas12"})
	  setTimeout(()=>{websocket.send(obj)},5000)
      
      document.getElementById("recv").innerHTML = "Connected";
    }
    // 结束websocket
    websocket.onclose = function () {
      console.log('websocket close');
    }
    websocket.onerror = function () {
      console.log('websocket error')
    }
    // 接受到信息
    websocket.onmessage = function (e) {
      console.log(e.data);
      document.getElementById("recv").innerHTML = e.data;
    }
    // 点击发送webscoket
    document.getElementById("sendBtn").onclick = function () {
      var txt = document.getElementById("sendTxt").value;
      websocket.send(JSON.stringify({ type: "chagne", content: txt,channel:"sasaasa" }));
    }
  </script>
  <!-- <script>
    import { message } from 'antd';

    class WebSocketClass {
      constructor() {
        this.instance = null;
        this.connect();
      }
      static getInstance() {
        if (!this.instance) {
          this.instance = new WebSocketClass();
        }
        return this.instance;
      }

      connect() {
        this.ws = new WebSocket('ws://xxxx');
        this.ws.onopen = e => {
          this.status = 'open';
          message.info('连接成功');
          console.log(`连接成功`, e);
          this.heartCheck();
          this.getMessage();
        };
      }

      heartCheck() {
        // 心跳机制的时间可以自己与后端约定
        this.pingPong = 'ping'; // ws的心跳机制状态值
        this.pingInterval = setInterval(() => {
          if (this.ws.readyState === 1) {
            // 检查ws为链接状态 才可发送
            this.ws.send('ping'); // 客户端发送ping
          }
        }, 10000);
        this.pongInterval = setInterval(() => {
          if (this.pingPong === 'ping') {
            this.closeHandle('pingPong没有改变为pong'); // 没有返回pong 重启webSocket
          }
          // 重置为ping 若下一次 ping 发送失败 或者pong返回失败(pingPong不会改成pong)，将重启
          console.log('返回pong');
          this.pingPong = 'ping';
        }, 20000);
      }

      closeHandle(e = 'err') {
        // 因为webSocket并不稳定，规定只能手动关闭(调closeMyself方法)，否则就重连
        if (this.status !== 'close') {
          console.log(`断开，重连websocket`, e);
          if (this.pingInterval !== undefined && this.pongInterval !== undefined) {
            // 清除定时器
            clearInterval(this.pingInterval);
            clearInterval(this.pongInterval);
          }
          this.connect(); // 重连
        } else {
          console.log(`websocket手动关闭,或者正在连接`);
        }
      }

      getMessage() {
        this.ws.onmessage = e => {
          if (e.data === 'pong') {
            this.pingPong = 'pong'; // 服务器端返回pong,修改pingPong的状态
          } else {
            message.info(e.data);
          }
          console.log(e.data);
          return e.data;
        };
      }

      close() {
        clearInterval(this.pingInterval);
        clearInterval(this.pongInterval);
        this.status = 'close';
        this.ws.send('close');
        this.ws.close();
        message.info('已断开连接');
        console.log('close');
      }
    }

    export default new WebSocketClass();
  </script> -->
</body>

</html>

3.5、加入websocket通信之views后端<<单用户通信>>逻辑代码：同步

import json
from channels.generic.websocket import WebsocketConsumer


class ChatConsumer(WebsocketConsumer):
    def connect(self):
        # TODO 连接建立时触发
        print("连接成功")
        self.accept()

    def disconnect(self, close_code):
        # TODO 关闭连接时触发
        print("已断开连接")

    def receive(self, text_data=None, bytes_data=None):
        # TODO 收到消息后触发
        text_data_json = json.loads(text_data)
        text_data_json.update({'TEST_MSG': '123456789'})
        self.send(text_data=json.dumps({
            'message': text_data_json
        }))

至此，启动python manage.py runserver 0.0.0.0:8000即可实现数据自发自接，但只是单用户通信。但这肯定是不满足聊天室多用户通信的，那么就需要引入Channel Layer来实现，它是以redis作为通道来用户分组并进行数据的分发

3.6、加入websocket通信之views后端<<多用户通信>>逻辑代码：同步

①setting中添加对Channel Layer的支持(需要保证redis已安装以及redis端口为6379)

CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [('127.0.0.1', 6379)],
        },
    },
}

②验证redis通道层是否正常
在这里插入图片描述

③将原views中的ChatConsumer类代码更新迭代

import json
from asgiref.sync import async_to_sync
from channels.generic.websocket import WebsocketConsumer


class ChatConsumer(WebsocketConsumer):
    def connect(self):
        # TODO 连接建立时触发
        print("连接成功")
        # 创建组名称
        self.room_group_name = 'test'
        # 将新websocket连接加入组中
        async_to_sync(self.channel_layer.group_add)(self.room_group_name, self.channel_name)
        self.accept()

    def disconnect(self, close_code):
        # 关闭连接时触发
        print("已断开连接")
        # 将断开时将websocket从组中退出
        async_to_sync(self.channel_layer.group_discard)(
            self.room_group_name,
            self.channel_name
        )

    def receive(self, text_data=None, bytes_data=None):
        # TODO 收到消息后触发
        text_data_json = json.loads(text_data)
        # 向同一个组内的所有websocket客户端发送消息，type为调用函数处理消息
        async_to_sync(self.channel_layer.group_send)(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': text_data_json
            }
        )

    def chat_message(self, text_data_json):
        text_data_json.update({'TEST_MSG': '123456789'})
        self.send(text_data=json.dumps({
            'message': text_data_json
        }))

3.7、加入websocket通信之views后端<<多用户通信>>逻辑代码：异步

异步主要使用协程async与同步差别不大

ChatConsumer由WebsocketConsumer修改为了AsyncWebsocketConsumer
所有的方法都修改为了异步defasync def
用await来实现异步I/O的调用
channel layer也不再需要使用async_to_sync了

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        # TODO 连接建立时触发
        print("连接成功")
        # 创建组名称
        self.room_group_name = 'test'
        # 将新websocket连接加入组中
        await self.channel_layer.group_add(self.room_group_name, self.channel_name)
        await self.accept()

    async def disconnect(self, close_code):
        # 关闭连接时触发
        print("已断开连接")
        # 将断开时将websocket从组中退出
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    async def receive(self, text_data=None, bytes_data=None):
        # TODO 收到消息后触发
        text_data_json = json.loads(text_data)
        # 向同一个组内的所有websocket客户端发送消息，type为调用函数处理消息
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': text_data_json
            }
        )

    async def chat_message(self, text_data_json):
        text_data_json.update({'TEST_MSG': '123456789'})
        await self.send(text_data=json.dumps({
            'message': text_data_json
        }))