websocket在django中的运用

已于 2024-02-28 09:23:23 修改
阅读量499 收藏 6
点赞数 3
分类专栏： Django 文章标签： websocket 网络协议 网络 django
于 2024-02-26 00:06:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44238024/article/details/136287374
版权
本文探讨了实现聊天室的不同技术手段，如轮询和长轮询，以及WebSocket的原理和使用，包括握手流程、数据收发、以及如何通过WebSocket实现实时交互。同时介绍了Django中的WebSocket配置和使用ChannelLayers进行群聊功能的优化。
摘要由CSDN通过智能技术生成

14-2 聊天室实现思路：轮训、长轮训、websocket_哔哩哔哩_bilibili  参考大佬的B站学习笔记

https://www.cnblogs.com/wupeiqi/p/6558766.html    参考博客

https://www.cnblogs.com/wupeiqi/articles/9593858.html  参考博客

http协议: 是短连接，无状态的，一次性的，无法保证实时信息交互

  • 客户端主动连接服务器
  • 客户端向服务端发送消息，服务端接收到返回数据
  • 客户端接收到数据
  • 端口连接

websock协议：创建持久的连接不断开，基于这个连接进行收发数据

  • 实时响应：接收发送消息
  • 实时图表，柱状图，饼图

websocket 原理：

  • 连接，客户端发起
  • 握手，客户端发送一个消息，后端接收到消息再做一些特殊处理返回(服务端要支持websocket协议)
  • 收发数据（加密）
  • 断开连接

握手流程：

        1.客户端向服务端发送

GET /chatsocket HTTP/1.1
Host: 127.0.0.1:8002
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
Upgrade: websocket
Origin: http://localhost:63342
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: mnwFxiOlctXFN/DeMt1Amg==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits

         2.服务端接收：

请求和响应的【握手】信息需要遵循规则：

    从请求【握手】信息中提取 Sec-WebSocket-Key
    利用magic_string 和 Sec-WebSocket-Key 进行hmac1加密，再进行base64加密
    将加密结果响应给客户端

注：magic string固定为：258EAFA5-E914-47DA-95CA-C5AB0DC85B11

 返回数据给客户端浏览器，验证通过则完成握手

HTTP/1.1 101 Switching Protocols
      Upgrade:websocket
      Connection: Upgrade
      Sec-WebSocket-Accept: 密文

 收发数据流程：

数据 b'asdfa;efawe;sdfas;awdfawea;sdfasdfaf;sdfasdfa;'

先获取第二个字节，8位  10001010

再获取第二个字节的后七位   0001010  -> payload len

  • =127  2个字节，8个字节      其他字节（4字节 masking key + 数据）
  • =126  2个字节，8个字节      其他字节（4字节 masking key + 数据）
  • <=125  2个字节                     其他字节（4字节 masking key + 数据）
  • 获取masking key，然后对数据进行解密

    • var DECODED = "";
      for (var i = 0; i < ENCODED.length; i++) {
          DECODED[i] = ENCODED[i] ^ MASK[i % 4];
      }

实时交互的解决方案：

  1. 轮训，浏览器每隔一段时间向后台发送一次请求。缺点：有延迟、请求太多网站压力大
  2. 长轮询，客户端向服务端发送请求，保持一定的时间，一旦有数据就立即返回。特点：数据无延迟，常应用于大平台、WebQQ、Web微信
  3. websocket，客户端和服务端创建连接不断开，可以实现双向通信。特点：旧版浏览器不支持

长轮询实现群聊功能

  • 访问url进入聊天室页面，为每个用户创建一个队列
  • 点击发送内容，数据发送到后台，给到每个人的队列中
  • 递归获取消息，去队列中获取数据，展示在页面

前端

<body>
<div class="message" id="message"></div>
<div>
    <input type="text" placeholder="请输入" id="txt">
    <input type="button" value="发送" onclick="sendMessage()">
<!--    <input type="button" value="关闭连接" onclick="closeConn()">-->
</div>
<script>
    USER_ID = "{{uid}}";
    function sendMessage(){
        var text=$('#txt').val();
        // 基于ajax将用户文本信息发送到后台
        $.ajax({
            url:'/send/msg/',
            data:{text:text},
            type: 'GET',
            dataType:'JSON',
            success: function (res){
                console.log('请求发送成功',res)
                //超时，没有新数据
                // 有数据，立即展示
                // if (res.status){
                //     var tag =$("<div>");
                //     tag.text(res.data)
                //     $("#message").appendImage(tag);
                // }
            }
        })
    }
    function getMessage(){
        $.ajax({
            url:'/get/msg/',
            data:{uid:USER_ID},
            type: 'GET',
            dataType:'JSON',
            success: function (res){
                //超时，没有新数据
                // 有数据，立即展示
                if (res.status){
                    var tag =$("<div>");
                    tag.text(res.data)
                    $("#message").appendImage(tag);
                    }
                getMessage(); // 递归调用该函数
            }
        })
    }
    $(function (){
        getMessage();
    })
</script>
</body>

后端

# view 视图
import queue
from django.shortcuts import render,HttpResponse
from django.http import request,JsonResponse
USER_QUEUE = {}
def index(request):
    qq_number = request.GET.get('num')
    return render(request,'index.html',{"qq_number":qq_number})

def home(request):
    uid = request.GET.get('uid')
    USER_QUEUE[uid]=queue.Queue()
    return render(request,'home.html',{'uid':uid})

def send_msg(request):
    text =request.GET.get('text')
    for uid,q in USER_QUEUE.items():
        q.put(text)
    # print("接收到客户端的请求:"+request.GET)
    return HttpResponse("ok")

def get_msg(request):
    # 去自己的队列中获取数据
    uid = request.GET.get('uid')
    q  = USER_QUEUE[uid]
    result = {'status':True,'data':None}
    try:
        data = q.get(timeout=10)
        result['data']=data
    except queue.Empty as e:
        result['status']=False
    return JsonResponse(result)


# url
path('home/', home),
path('send/msg/', send_msg),
path('get/msg/', get_msg),

django 中配置websocket

pip install channels  # 安装组件

# 注册app
'channels'  

# 配置asgi.application
ASGI_APPLICATION = 'web.asgi.application'

更新asgi文件(在支持http的基础上支持websocket)

# asgi.py

import os
from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter,URLRouter
from . import routing
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'web.settings')

application = ProtocolTypeRouter({
    'http':get_asgi_application(),
    'websocket':URLRouter(routing.websocket_urlpatterns),
})

创建routing文件在setting同级目录

from django.urls import re_path

from app import consumers

websocket_urlpatterns = [
    re_path(r'ws/(?P<group>\w+)/$',consumers.ChatConsumer.as_asgi()),
]

创建app目录下consumer文件

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

"""
wsgi: 同步
asgi: 异步+asgi+websocket
"""
class ChatConsumer(WebsocketConsumer):
    def websocket_connect(self, message):
        # 客户端向后端发送websocket连接请求时自动触发

        # 容许和客户端创建连接
        self.accept()

    def websocket_receive(self, message):
        # 浏览器基于websocket向后端发送数据，自动触发接收消息
        print(message)
        self.send('不要回复！！！')

    def websocket_disconnect(self, message):
        # 客户端与服务端断开时自动触发
        raise StopConsumer

运行结果：

注意： 当启动服务器是 Starting development server 而非ASGI服务时要检查channel版本，较高的版本可能不适配django，经调试发现3.0.1版本适配，重新安装channels即可

pip install channels==3.0.1

 Pycharm 的html 注释小技巧！

setting --> Template Languages --> None

 websocket 收发消息流程

  • 访问地址看到聊天室的页面
  • 客户端主动向服务端发送websocket连接，服务端接收到通过（完成握手）
  • 客户端，执行websocket连接动作 
    // http://www.baidu.com
// ws://www.baidu.com 注释下面 ws://xxx的使用
socket = new WebSocket("ws://127.0.0.1:8000/ws/123/");
  • 服务端 
    def websocket_connect(self, message):
    # 客户端向后端发送websocket连接请求时自动触发
    # 容许和客户端创建连接(握手)
    print("有人来连接了")
    self.accept()
  • 收发消息（客户端向服务端发送消息）
    • 客户端 
      <input type="button" value="发送" οnclick="sendMessage()">
      // 获取输入框的信息进行发送
function sendMessage(){
    let tag =document.getElementById('txt');
    socket.send(tag.value);
}
    • 服务端 
      def websocket_receive(self, message):
    # 浏览器基于websocket向后端发送数据，自动触发接收消息
    txt  = message['text']
    print('收到消息-->', txt)
    self.send(txt+'哈哈') # 在客户端发送消息的基础上加上字段 "哈哈"
    • 收发消息（服务端主动发给客户端） 
      • 服务端

        def websocket_connect(self, message):
    # 客户端向后端发送websocket连接请求时自动触发
    # 容许和客户端创建连接(握手)
    print("有人来连接了")
    self.accept()
    # 服务端向客户端发送消息
    self.send('来了呀年轻人!')

      • 客户端
        // 当websocket接收到服务端发来的消息时，自动触发这个函数
socket.onmessage = function (event){
    var tag= document.createElement('div');
    tag.innerText = event.data;
    console.log(tag.textContent);
}

 运行结果：

前端页面的实现及DOM函数的触发

<div class="message" id="message"></div>
<div>
    <input type="text" placeholder="请输入" id="txt">
    <input type="button" value="发送" onclick="sendMessage()">
    <input type="button" value="关闭连接" onclick="closeConn()">
</div>
<script>
    // http://www.baidu.com
    // ws://www.baidu.com 注释下面 ws://xxx的使用
    socket = new WebSocket("ws://127.0.0.1:8000/ws/123/");

    // 创建好连接之后自动触发,即当执行self.accept()
    socket.onopen = function (event){
        let tag= document.createElement('div');
        tag.innerText = '[连接成功]';
        console.log(tag.textContent)
        document.getElementById('message').appendChild(tag);
    }

    // 当websocket接收到服务端发来的消息时，自动触发这个函数
    socket.onmessage = function (event){
        let tag= document.createElement('div');
        tag.innerText = event.data;
        // console.log(tag.textContent);
        document.getElementById('message').appendChild(tag);
    }

    // 断开连接时触发
    socket.onclose =function (event){
        let tag= document.createElement('div');
        tag.innerText = '[断开连接]';
        console.log(tag.textContent)
        document.getElementById('message').appendChild(tag);
    }

    // 获取输入框的信息进行发送
    function sendMessage(){
        let tag =document.getElementById('txt');
        socket.send(tag.value);
    }
    // 关闭连接
    function closeConn(){
        socket.close(); // 向服务端发送断开连接的请求
    }
</script>

群聊功能的实践：

方法1： 方法笨重，可行性差，不便于接口

CONN_LIST = []
def websocket_connect(self, message):
    # 客户端向后端发送websocket连接请求时自动触发
    self.accept()
    CONN_LIST.append(self)
def websocket_receive(self, message):
    txt  = message['text']
    for conn in CONN_LIST:
        conn.send(txt)
def websocket_disconnect(self, message):
    CONN_LIST.remove(self)
    raise StopConsumer  # 容许断开连接

Channel Layers实现群聊

方法2：基于channel中提供channel layers来实现-主要流程

  • 配置setting channel layers

    CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer",
    }
}

  • 更新view 
    qq_number = request.GET.get('num')
  • 更新收发后端consumer.py 
    def websocket_connect(self, message):
    # 客户端向后端发送websocket连接请求时自动触发
    self.accept()
    # 获取群号即路由匹配的数值
    group = self.scope['url_route']['kwargs'].get('group') # 固定用法
    # 将客户端的连接对象加入到某个地方 redis or 内存
    async_to_sync(self.channel_layer.group_add)(group,self.channel_name)
    # 服务端向客户端发送消息
    self.send('来了呀年轻人!')
    def websocket_receive(self, message):
    # 获取群号即路由匹配的数值
    group = self.scope['url_route']['kwargs'].get('group') # 固定用法
    # 通知组内的所有客户端，执行 xx_oo 方法，在此方法中自定义功能
    async_to_sync(self.channel_layer.group_send)(group, {'type':'xx.oo','message':message})
    def xx_oo(self,event):
    text = event['message']['text']
    self.send(text)
    def websocket_disconnect(self, message):
    group = self.scope['url_route']['kwargs'].get('group') # 固定用法
    async_to_sync(self.channel_layer.group_discard)(group,self.channel_name)

    # 客户端与服务端断开时自动触发
    raise StopConsumer  # 容许断开连接

运行结果：

_pass_
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
探索Django Channels REST Framework：下一代Web应用开发的利器
gitblog_00019的博客
04-16 347
探索Django Channels REST Framework：下一代Web应用开发的利器 项目地址:https://gitcode.com/NilCoalescing/djangochannelsrestframework 在Web开发领域，Django以其强大而全面的功能深受开发者喜爱，但随着实时通信需求的增长，传统的HTTP协议和RESTful API已稍显力不从心。为了解决这个问题，Dj...
Django Web：搭建Websocket服务器（入门篇）
jclee95的个人博客
05-22 952
本文介绍在Django中搭建Websocket服务器的最基本知识。
基于Django 实现 WebSocket 中转功能
python小菜鸡的博客
11-07 265
有时间补，先去开会。
如何在 WebSocket 通信中使用 JSON 数据（Java、JavaScript）
allway2的博客
02-09 1万+
背景 在创建聊天应用的基础上，我写了一篇关于服务器和浏览器之间的WebSocket通信的文章。用 Java 实现服务器，用 javascript 实现客户端。 [过去关于套接字通信的文章] ・使用 Java 和 JavaScript与 Web 浏览器进行套接字通信①・使用 Java 和 JavaScript 与 Web 浏览器进行套接字通信② 这一次，我们将在修改聊天应用程序的同时学习“如何处理 JSON 数据”。您还将了解“通过套接字通信发送和接收 JSON 数据”。 目的 了解如何在 Jav.
看完让你彻底搞懂Websocket原理
热门推荐
hsany330的专栏
11-13 1万+
偶然在知乎上看到一篇回帖，瞬间觉得之前看的那么多资料都不及这一篇回帖让我对websocket的认识深刻有木有。所以转到我博客里，分享一下。比较喜欢看这种博客，读起来很轻松，不枯燥，没有布道师的阵仗，纯粹为分享。废话这么多了，最后再赞一个~ 一、websocket与http WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久
Django+Vue实现WebSocket连接的示例代码
10-16
最后，在Vue.js前端应用中，你需要使用WebSocket库（如`vue-websocket`）来建立连接，监听消息，并触发相应的操作。例如，当接收到`job.message`类型的消息时，更新UI以显示任务状态。 这是一个基本的Django+Vue...
Django websocket原理及功能实现代码
12-16
在WebSocket API中，客户端和服务器只需一次握手，之后便能建立长期连接，进行高效的数据传输。 相比于旧有的推送技术，如轮询和Comet，WebSocket更加节能和实时。轮询是客户端定时向服务器请求数据，而Comet则通常...
Python+django+channels实现websocket
09-20
在Django 2.0+版本中，Channels已经作为一个独立的库存在，使得Django能够处理异步请求，这在构建实时应用时非常有用。 WebSocket协议是一种在单个TCP连接上进行全双工通信的协议。它提供了一种简单的方式来建立...
django+websocket实时通讯
04-08
【标题】：“django+websocket实时通讯” 在现代Web开发中，实时通信已经成为不可或缺的一部分，...通过学习和实践这个主题，开发者可以掌握在Django应用中集成WebSocket的能力，从而构建出更加互动和实时的Web应用。
django websocket简单资源
01-04
标题"django websocket简单资源"暗示我们将探讨如何在Django项目中集成WebSocket，以便实现实时交互功能。WebSocket API的引入使得Django能够支持更复杂的交互式应用，例如在线游戏、实时通知、协作编辑等。 首先，...
Django使用Channels实现WebSocket--上篇
ops-coffee
04-22 1501
文章讲解了什么是websocket，websocket有什么用，已经Django实现websocket的channels框架，尤其对Channels框架进行了详细透彻的讲解，涉及到channels中的基础概念理解例如channel，layer，group，auth，scope等等，写的非常棒，原文地址： Django使用Channels实现WebSocket–上篇 相关延伸文章： Djang...
WebSocket 项目整合踩坑记录
探索丶挑战丶突破
06-30 3100
WebSocket 项目整合踩坑记录前言WebSocket connection to 'ws://localhost:8080/ws' failed: Error during WebSocket handshake: Unexpected response code: 404Spring webosket 拦截器中获取不到登录sessionPS 前言 项目中集成webScoket遇到很多莫名其...
drf框架使用channels实现websocket请求
白小白的小白的博客
12-15 1240
在线发送ws请求地址
使用DRF框架进行Web开发中详情页面的信息展示
Best_fish的博客
10-28 1057
当我们登录后需要或者查看自己的详细信息或者查看某商品的详细信息时，我们要去写一个关于详细内容的视图，配置好路由，编写序列化器来显示信息。具体步骤如下 1：编写视图（如需查看个人中心页面） 注意视图的所继承的类 from rest_framework.permissions import IsAuthenticated from rest_framework import generics cl...
FastAPI（60）- 针对 WebSocket 进行单元测试
qq_33801641的博客
10-07 771
前言 还是比较简单的，直接写代码啦 FastAPI 的单元测试：https://www.cnblogs.com/poloyy/p/15354901.html 直接上代码 #!usr/bin/env python # -*- coding:utf-8 _*- """ # author: 小菠萝测试笔记 # blog: https://www.cnblogs.com/poloyy/ # time...
《计算机网络》（学习笔记）
qiqi_liuliu的博客
07-24 1704
网络（Network）由若干结点(Node)和连接这些结点的链路(Link)组成多个网络还可以通过路由器互连起来，这样就构成了一个覆盖范围更大的网络，即互联网（互连网）。因此，互联网是"网络的网络（Network of Networks）"因特网（Internet）是世界上最大的互连网络（用TCP/IP）internet是通用名词，互连的网络都叫internet注：互连、自治、集合。在计算机内部或在相邻设备之间近距离传输时，可不经过调制就在信道上直接进行的传输方式称为基带传输。
《计算机网络》（第8版）第三章 数据链路层 复习笔记
最新发布
m0_70617423的博客
07-25 1211
使用点对点信道的数据链路层 点对点协议 PPP 使用广播信道的数据链路层 扩展的以太网 高速以太网
Linux_实现UDP网络通信
安权_code的博客
07-23 804
在Linux下，实现传输层协议为UDP的套接字进行网络通信，网络层协议为IPv4，需要用到的接口有以下4个：socket、bind、recvfrom、sendto。具体实现方法：在云服务器上创建一个服务器进程和一个客户端进程，让客户端向服务器发送消息，并且服务器收到消息后可以反馈给对方。
python websocket和django websocket哪个好
04-21
如果你已经在使用jango框架，并且需要在你的应程序中实现实时通信，那Django WebSocket可能是一个不错的选择，因为它可以与Django的其他功能无缝集成。如果你只需要一个简单的Python库来实现WebSocket通信，那么...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值