【全栈开发】---- 一文掌握 Websocket 原理,并用 Django 框架实现

目录

介绍

底层原理

握手环节详解:

收发数据(加密)

Django 中配置 channels

1、注册 channels

2、在 settings.py 中添加 asgi_application

3、修改 asgi.py 文件

4、routing 

5、consumers

实现 聊天室


介绍

        WebSocket是一种先进的通信协议,旨在通过单个长时间运行的连接实现实时双向数据交换,极大地提升了Web应用程序的交互性和响应速度。不同于传统的HTTP请求-响应模型,WebSocket在客户端与服务器之间开启了一个持久化的连接,使得双方可以随时发送文本或二进制数据,无需为每次通信重新建立连接,从而减少了延迟并提高了效率。这种特性特别适用于需要实时更新的应用场景,如在线游戏、即时通讯、金融交易监控等。WebSocket协议不仅简化了开发流程,还确保了更高效的数据传输,支持更高的并发量和更低的资源消耗,成为现代Web开发中不可或缺的技术之一。此外,随着互联网技术的发展,WebSocket正逐渐成为构建高度互动和动态Web应用的标准选择,为企业提供前所未有的用户体验改进机会。

底层原理

http 协议:

。连接

。数据传输(请求和响应)

。断开连接

websocket 协议:

。连接,客户端发起

。握手(验证),客户端发送一个消息,服务端接收到消息后做一些特殊处理并返回。服务端支持 websocket 协议

。收发数据(加密)

。断开连接

握手环节详解:

创建完链接后,客户端会自己生成一串随机字符串,并且加密后以密文的形式存储到客户端,以明文发送给服务端,服务端加密后发送给客户端,客户端比较自己加密算法得到的密文与服务端发送过来的密文是否相同,若相同,则服务端支持 websocket 协议,即握手成功,可以进行下一步操作,否则则不支持。

客户端发送给服务端的是这玩意:

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

...

...

\r\n\r\n

服务端真正接收的是 Sec-WebSocket-Key

mnwFxiOlctXFN/DeMt1Amg==

然后将服务端将 Sec-WebSocket-Key 与 magic_string 进行字符串拼接

magic_string 有个固定值:258EAFA5-E914-47DA-95CA-C5AB0DC85B11

再将拼接的字符串进行 hmac1 加密,再进行 base64 加密

服务端将最后加密得到的结果返还给客户端,返还新式如下:

"HTTP/1.1 101 Switching Protocols\r\n" \

"Upgrade:websocket\r\n" \

"Connection: Upgrade\r\n" \

"Sec-WebSocket-Accept: 最终密文

然后客户端将服务端发送的密文和客户端自己产生的密文进行比较,相同则牵手成功。

收发数据(加密)

收发数据加密我看不懂,也不想去懂,大家可以自己搜搜视频看看。

Django 中配置 channels

django 默认不支持 websocket ,需要安装组件:

pip install channels

配置

1、注册 channels

INSTALLED_APPS = ["django.contrib.admin","django.contrib.auth","django.contrib.contenttypes","django.contrib.sessions","django.contrib.messages","django.contrib.staticfiles","app01.apps.App01Config","channels",
]

2、在 settings.py 中添加 asgi_application

ASGI_APPLICATTON = "lang_poll.asgi.application"

这里的 lang_poll 是自己的 Django 项目名称

3、修改 asgi.py 文件

原来的 asgi.py 文件只能处理 http 请求,现在加入 websocket 后需要修改:

"""
ASGI config for lang_poll project.It exposes the ASGI callable as a module-level variable named ``application``.For more information on this file, see
https://docs.djangoproject.com/en/5.1/howto/deployment/asgi/
"""import os
from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter,URLRouter
from . import  routingos.environ.setdefault("DJANGO_SETTINGS_MODULE", "lang_poll.settings")
# application = get_asgi_application()application = ProtocolTypeRouter({"http": get_asgi_application(),"websocket": URLRouter(routing.websocket_urlpatterns),
})

4、routing 

asgi.py 中的 routing 是自己编写的文件,相当于 http 中的 urls.py,创建在 asgi.py 相同目录中:

from django.urls import re_path
from app01 import consumerswebsocket_urlpatterns = [re_path(r'ws/(?P<group>\w+)/$', consumers.ChatConsumer.as_asgi()),
]

5、consumers

这里的 consumers 也得自己创建,放在 app01 目录下,相当于 views.py ,用来编写 websocket 请求的响应逻辑:

from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumerclass ChatConsumer(WebsocketConsumer):def websocket_connect(self,message):# 客户端发送 websocket请求时,会自动触发这个函数# accept 函数允许客户端与服务端建立联系self.accept()def websocket_receive(self,message):# 客户端向服务端基于 websocket发送数据时,会自动触发该函数,并接收消息self.send("不要回复")# self.close()  是服务端主动断开连接def websocket_disconnect(self,message):# 客户端与服务端断开连接时,自动触发print("断开连接")raise StopConsumer()

实现 聊天室

前端页面可就用之前轮询的:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.message{width: 200px;height: 300px;border: 1px solid orangered;}</style>
</head>
<body>
<div class="message" id="message"></div>
<div class="input"><input type="text" placeholder="请输入" id="txt"><input type="button" value="发送">
</div>
</body>
</html>

因为博主最近事比较多,聊天功能就不实现了,请见谅,后期会补回来的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/28728.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【0010】Python流程控制结构-分支结构详解

如果你觉得我的文章写的不错&#xff0c;请关注我哟&#xff0c;请点赞、评论&#xff0c;收藏此文章&#xff0c;谢谢&#xff01; 本文内容体系结构如下&#xff1a; 分支结构是编程中的基本控制结构之一&#xff0c;它允许程序根据条件判断执行不同的代码路径。通过本文&…

个推助力小米米家全场景智能生活体验再升级

当AI如同水电煤一般融入日常&#xff0c;万物互联的图景正从想象照进现实。作为智能家居领域的领跑者&#xff0c;小米米家凭借开放的生态战略&#xff0c;已连接了超8.6亿台设备&#xff0c;构建起全球领先的消费级AIoT平台。如今&#xff0c;小米米家携手个推&#xff0c;通过…

鸿蒙启动页开发

鸿蒙启动页开发 1.1 更改应用名称和图标 1.更改应用图标 找到moudle.json5文件&#xff0c;找到应用启动的EntryAbility下面的icon,将原来的图标改成自己设置的即可 2.更改应用名称 3.效果展示 2.1 广告页面开发 3.1 详细介绍 3.1.1 启动页面 import { PrivacyDialog } fr…

上海市闵行区数据局调研云轴科技ZStack,共探数智化转型新路径

为进一步深化人工智能、大模型技术的应用&#xff0c;推动区域数字经济高质量发展&#xff0c;2025年2月27日&#xff0c;上海市闵行区数据局局长吴畯率队赴上海云轴科技股份有限公司&#xff08;以下简称“云轴科技ZStack”&#xff09;开展专题调研。此次调研旨在深入了解企业…

idea实现热部署

1.在pom.xml文件添加依赖 java <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional></dependency> 更新可见配置成功&#xff1a; 2.在appli…

61. Three.js案例-彩色旋转立方体创建与材质应用

61. Three.js案例-彩色旋转立方体创建与材质应用 实现效果 知识点 WebGLRenderer(WebGL渲染器) 构造器 WebGLRenderer( parameters : Object ) 参数类型描述antialiasBoolean是否执行抗锯齿(默认false)alphaBoolean是否包含alpha通道(默认false)方法 setSize( width…

使用JMeter(组件详细介绍+使用方式及步骤)

JSON操作符 在我们使用请求时,经常会遇到JSON格式的请求体,所以在介绍组件之前我会将介绍部分操作符,在进行操作时是很重要的 Operator Description $ 表示根元素 当前元素 * 通配符,所有节点 .. 选择所有符合条件的节点 .name 子元素,name是子元素名称 [start:e…

tomcat的安装与配置(包含在idea中配置tomcat)

Tomcat 是由 Apache 软件基金会开发的开源 Java Web 应用服务器&#xff0c;主要用于运行 Servlet 和 JSP&#xff08;JavaServer Pages&#xff09;程序。它属于轻量级应用服务器&#xff0c;适用于中小型系统及开发调试场景&#xff0c;尤其在处理动态内容&#xff08;如 Jav…

快速开始React开发(一)

快速开始React开发&#xff08;一&#xff09; React是一个JavaScript库&#xff0c;用于构建交互式网站&#xff0c;并且能够快捷创建SPA&#xff08;Single Page App&#xff09;&#xff0c;其组件化的思想也是被一再传播&#xff0c;无论是普通的Web网站还是嵌入移动端交互…

安装nvidia-docker 和设置docker 镜像源

Installing the NVIDIA Container Toolkit — NVIDIA Container Toolkit 可以先参考官方文档 下面的操作具体和官方文档类似 curl -fsSL https://mirrors.ustc.edu.cn/libnvidia-container/gpgkey | sudo gpg --dearmor -o /usr/share/keyrings/nvidia-container-toolkit-ke…

C++第二节:C/C++内存管理

1.C/C内存分布 【说明】 栈又叫堆栈--非静态局部变量/函数参数/返回值等等&#xff0c;栈是向下增长的。内存映射段是高效的I/O映射方式&#xff0c;用于装载一个共享的动态内存库。用户可使用系统接口创建共享共享内存&#xff0c;做进程间通信。堆用于程序运行时动态内存分…

rust编程实战:实现3d粒子渲染wasm

源码 纯js实现 fps&#xff1a; wasm实现 通过对比可以看出来 wasm 实现的计算比纯js刷新相对稳定。

开放鸿蒙OpenHarmony 5.0.0 Release 兼容性测试实战经验分享

OpenHarmony 5.0版本的发布时间是2024年12月20日至21日。这个版本带来了许多新特性和改进。现在5.0出了两个release 版本&#xff0c;分别是5.0.0和5.0.1。 就在5.0版本发布不到2周的时间内&#xff0c;2025年01月01日起&#xff0c;不支持新产品基于老分支&#xff08;OpenHar…

deepseek在pycharm 中的配置和简单应用

对于最常用的调试python脚本开发环境pycharm&#xff0c;如何接入deepseek是我们窥探ai代码编写的第一步&#xff0c;熟悉起来总没坏处。 1、官网安装pycharm社区版&#xff08;免费&#xff09;&#xff0c;如果需要安装专业版&#xff0c;需要另外找破解码。 2、安装Ollama…

23种设计模式一览【设计模式】

文章目录 前言一、创建型模式&#xff08;Creational Patterns&#xff09;二、结构型模式&#xff08;Structural Patterns&#xff09;三、行为型模式&#xff08;Behavioral Patterns&#xff09; 前言 设计模式是软件工程中用来解决特定问题的一组解决方案。它们是经过验证…

spring boot整合flyway实现数据的动态维护

1、简单介绍一下flyway Flyway 是一款开源的数据库版本控制工具&#xff0c;主要用于管理数据库结构的变更&#xff08;如创建表、修改字段、插入数据等&#xff09;。它通过跟踪和执行版本化的迁移脚本&#xff0c;帮助团队实现数据库变更的自动化。接下来简单介绍一下flyway…

致远电子三合一8路串口服务器

ZLG致远电子全新推出国产化透传型三合一8路串口服务器&#xff0c;让用户轻松实现串口信号与以太网的无缝数据交互。性能强悍&#xff0c;等你来评&#xff0c;还有机会获得新年第一份心意&#xff01; GCOM88-2NET-P硬件速览 国产高性能816MHz处理器&#xff1b; 2路10/100M自…

20250304解决在飞凌的OK3588-C的Linux R4下解决使用gstreamer保存的mp4打不开

sync poweroff rootok3588:/# sync rootok3588:/# sync rootok3588:/# cd 107 rootok3588:/107# ls -l total 0 rootok3588:/107# sync rootok3588:/107# poweroff 20250304解决在飞凌的OK3588-C的Linux R4下解决使用gstreamer保存的mp4打不开 2025/3/4 10:58 缘起&#xff1a…

安路FPGA移植Cortex-M0内核

本文是关于基于安路FPGA EG4S20BG256移植Cortex M0内核的笔记。硬件平台使用硬木课堂的安路核心板&#xff0c;软件使用安路的TD5.6.2和keil5。&#xff08;博主刚学FPGA不久&#xff0c;文中有不足之处请帮忙指出&#xff09; 在移植之前&#xff0c;博主看了网上很多的文章、…

STM32——串口通信 UART

一、基础配置 Universal Asynchronous Receiver Transmitter 异步&#xff0c;串行&#xff0c;全双工 TTL电平 &#xff1a;高电平1 低电平0 帧格式&#xff1a; 起始位1bit 数据位8bit 校验位1bit 终止位1bit NVIC Settings一栏使能接受中断。 之前有设置LCD&#xff0c;…