Django Web:搭建Websocket服务器(入门篇)

Django Web架构
搭建Websocket服务器(1)

- 文章信息 - Author: 李俊才 (jcLee95)
Visit me at CSDN: https://jclee95.blog.csdn.net
My WebSitehttp://thispage.tech/
Email: 291148484@163.com.
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/139129624
HuaWei:https://bbs.huaweicloud.com/blogs/427830

【介绍】:本文介绍在Django中搭建Websocket服务器的最基本知识。


下一节:《 搭建Websocket服务器(进阶篇)

在这里插入图片描述


1. 概述

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它最初由HTML5规范提出,旨在解决传统HTTP协议在实时通信方面的不足。与HTTP****不同WebSocket在建立连接后可以保持长连接状态,允许服务器主动向客户端发送数据,而不需要客户端发起请求。

WebSocket通信过程如下:

  1. 客户端发起一个HTTP请求,请求头中包含Upgrade: websocket,表示希望将连接升级为WebSocket连接。
  2. 服务器响应请求,返回状态码101 Switching Protocols,表示同意升级协议。
  3. 连接升级完成后,客户端和服务器就可以通过这个连接进行全双工通信。
  4. 在通信过程中,客户端和服务器可以随时向对方发送数据,不受请求-响应模式的限制。
  5. 当一方关闭连接时,WebSocket连接就会被终止。

WebSocket使用ws://(非加密)和wss://(加密)作为协议前缀,默认端口分别为80443

WebSocket特别适合需要实时交互、频繁通信的应用场景,例如:

  1. 聊天应用:

用户可以实时发送和接收消息,无需刷新页面。
服务器可以将新消息实时推送给在线用户。
支持一对一聊天、群聊等多种聊天模式。

  1. 实时协作工具:

多个用户可以同时编辑同一文档或画板,所有变更实时同步。
用户可以看到其他用户的鼠标位置、选择内容等实时状态。
常见的实时协作工具有在线文档、在线绘图等。

  1. 在线游戏:

玩家之间可以实时交互,如移动、攻击、聊天等。
服务器可以将游戏状态实时同步给所有玩家。
支持多人在线对战、合作等游戏模式。

  1. 实时数据更新:

股票行情、汇率、商品价格等实时数据可以通过WebSocket推送给客户端。
天气预报、新闻推送等实时信息也可以使用WebSocket及时送达。
客户端无需定时轮询,可以节省带宽和服务器资源。

  1. 物联网(IoT)应用:

设备可以通过WebSocket与服务器保持长连接,实时上报数据。
服务器可以实时向设备发送控制指令,如开关灯、调节温度等。

WebSocket可以提供低延迟、高效的设备通信方式。

2. 模块的安装和配置

2.1 安装channels库

pip install channels

Channels是一个基于Django的库,用于处理WebSocket等协议。

2.2 配置ASGI应用

settings.py中添加以下配置:

INSTALLED_APPS = [...'channels',
]ASGI_APPLICATION = 'myproject.asgi.application'

3. asgi.py路由

3.1 创建ASGI应用文件

ASGI(Asynchronous Server Gateway Interface)用于作为服务器网关接口,它是Django Channels的一部分,用于处理异步请求,包括WebSocket请求。
在项目根目录下创建asgi.py文件:

import os
from channels.routing import ProtocolTypeRouter, URLRouter
from django.core.asgi import get_asgi_applicationfrom . import rontingsos.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myproject.settings')application = ProtocolTypeRouter({# 这里处理http路由"http": get_asgi_application(),# 这里处理WebSocket路由# rontings.py的websocket_urlpatterns"websocket": URLRouter(rontings.websocket_urlpatterns),
})

3.2 配置WebSocket路由

在项目根目录下创建routing.py文件:

from django.urls import re_path
from my_app1 import consumerswebsocket_urlpatterns = [re_path(r'ws/?p<group>\wt/$', consumers.ChatConsumer.as_asgi()),
]

这里定义的 websocket_urlpatterns 就类似于实现 HTTP 服务器时定义的 urlpatterns ,是对应于WebSocket服务的路由规则。

正则表达式r'ws/?p<group>\wt/$'用于匹配WebSocketURL。它匹配以ws/开头,后面跟着一个捕获组group,最后以/结尾的URL。捕获组group可以捕获URL中的一部分,并将其作为参数传递给消费者类。

消费者类consumers.ChatConsumer(下一个小节会介绍)是我们定义的处理WebSocket连接和消息的类。通过调用as_asgi()方法,我们将消费者类转换为ASGI应用,以便在路由中使用。

当一个WebSocket请求的URL匹配这个路由规则时,Django Channels会将请求交给consumers.ChatConsumer消费者类处理。消费者类可以处理连接的建立、接收消息、发送消息以及连接的关闭等事件。

4. 创建WebSocket消费者

WebSocket中的消费者,就类似于HTTP服务的View

在应用my_app1创建一个consumers.py文件,定义WebSocket消费者:

from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumerclass ChatConsumer(WebsocketConsumer):def websocket_connect(self):self.accept()self.send('消息')def websocket_receive(self, message):# 客户端基于websocket向后端发送数据时,自动触发接收消息print(message)self.send(text_data="收到消息: " + message)# self.close()def websocket_disconnect(self, message):# 客户端与服务器断开连接时,自动触发print("断开连接")raise StopConsumer()

5. 在前端使用WebSocket与服务器通信

创建WebSocket对象

在前端中,通过JavaScript WebSocket API与服务器建立WebSocket连接,需要先创建一个 WebSocket 对象:

const socket = new WebSocket('ws://localhost:8000/ws/chat/');

在上述示例中,ws://localhost:8000/ws/chat/是服务器的WebSocket地址。ws://表示使用WebSocket协议,localhost:8000是服务器的主机和端口,/ws/chat/是WebSocket的路径。

需要注意的是,WebSocket地址必须以ws://(非加密)或wss://(加密)开头,而不是http://https://。并且需要再次强调,WebSocket 是一个独立的基于 TCP 的协议,本身并不是HTTP。它仅仅是初次握手时使用HTTP,一旦协议升级完成就没什么关系了。

连接建立事件

创建WebSocket对象后,当与服务器的连接成功建立时,会触发onopen事件。我们可以通过为socket.onopen属性指定一个函数来处理连接建立的逻辑:

socket.onopen = function(event) {console.log('WebSocket连接已建立');// 连接建立后的其他逻辑
};

接收消息事件

当服务器向客户端发送消息时,会触发onmessage事件。我们可以通过为socket.onmessage属性指定一个函数来处理接收到的消息:

socket.onmessage = function(event) {console.log('收到服务器消息:', event.data);// 处理接收到的消息
};

onmessage事件处理函数中,我们可以通过event.data获取服务器发送的消息数据,并根据需要进行处理,如更新页面内容、触发特定操作等。

发送消息

要向服务器发送消息,可以使用WebSocket对象的send方法:

function sendMessage(message) {socket.send(message);
}

在上述示例中,sendMessage函数接受一个message参数,表示要发送的消息内容。调用socket.send(message)即可将消息发送给服务器。

服务器接收到客户端发送的消息后,会在服务器端的相应消费者中触发websocket_receive方法进行处理。

连接关闭事件

当WebSocket连接被关闭时,会触发onclose事件。我们可以通过为socket.onclose属性指定一个函数来处理连接关闭的逻辑:

socket.onclose = function(event) {console.log('WebSocket连接已关闭');// 连接关闭后的其他逻辑
};

onclose事件处理函数中,我们可以执行一些清理操作,如更新连接状态、重新连接等。

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

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

相关文章

如何在Windows 10上对硬盘进行碎片整理?这里提供步骤

随着时间的推移&#xff0c;由于文件系统中的碎片&#xff0c;硬盘驱动器可能会开始以较低的效率运行。为了加快驱动器的速度&#xff0c;你可以使用内置工具在Windows 10中对其进行碎片整理和优化。方法如下。 什么是碎片整理 随着时间的推移&#xff0c;组成文件的数据块&a…

LeetCode热题100——矩阵

73.矩阵清零 题目 给定一个 *m* x *n* 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]] 示例…

HTML+CSS 玻璃按钮

效果演示 Code <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>玻璃按钮</title><li…

设计模式 17 组合模式 Composite Pattern

设计模式 17 组合模式 Composite Pattern 1.定义 组合模式&#xff08;Composite Pattern&#xff09;&#xff0c;又叫部分整体模式&#xff0c;是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象&#xff0c;用来表示部分以及整体层次。这种类型的设…

window好用的网速工具

这是一个用于显示当前网速、CPU及内存利用率的桌面悬浮窗软件&#xff0c;并支持任务栏显示&#xff0c;支持更换皮肤。 github链接如下 https://github.com/zhongyang219/TrafficMonitor?tabreadme-ov-file

无人机飞手:ASFC无人机和航模爱好者证书详解

ASFC无人机和航模爱好者证书是由中国航空运动协会&#xff08;ASFC&#xff09;颁发的一种无人机操作资格认证。这种证书在无人机和航模爱好者群体中享有广泛的认可度&#xff0c;并被视为操作无人机的一种重要资质。 ASFC证书的定义和用途十分明确。它是民航局颁发的民用无人驾…

springboot3微服务下结合springsecurity的认证授权实现

1. 简介 在微服务架构中&#xff0c;系统被拆分成许多小型、独立的服务&#xff0c;每个服务负责一个功能模块。这种架构风格带来了一系列的优势&#xff0c;如服务的独立性、弹性、可伸缩性等。然而&#xff0c;它也带来了一些挑战&#xff0c;特别是在安全性方面。这时候就体…

【前端笔记】Vue项目报错Error: Cannot find module ‘webpack/lib/RuleSet‘

网上搜了下发现原因不止一种&#xff0c;这里仅记录本人遇到的原因和解决办法&#xff0c;仅供参考 原因&#xff1a;因为某种原因导致本地package.json中vue/cli与全局vue/cli版本不同导致冲突。再次提示&#xff0c;这是本人遇到的&#xff0c;可能和大家有所不同&#xff0c…

一张图片中有多个一样的目标物体,分别进行识别定位分割(Python实现)

需求&#xff1a; 一张图片中有多个目标物体&#xff0c;将多个目标物体进行识别分割定位 import cv2 import numpy as npdef show_photo(name,picture):cv2.imshow(name,picture)cv2.waitKey(0)cv2.destroyAllWindows()img_path r"test3.png" img cv2.imread(img…

关于微信小程序低功耗蓝牙ECharts实时刷新

最近搞了这方面的东西&#xff0c;是刚刚开始接触微信小程序&#xff0c;因为是刚刚开始接触蓝牙设备&#xff0c;所以这篇文章适合既不熟悉小程序&#xff0c;又不熟悉蓝牙的新手看。 项目要求是获取到蓝牙传输过来的数据&#xff0c;并显示成图表实时显示&#xff1b; 我看了…

转运机器人负载最高可达 1000kg,重复精度高达±5mm

转运机器人&#xff0c;内部搭载ICD系列核心控制器&#xff0c;拥有不同的移载平台&#xff0c;负载最高可达 1000kg;重复精度高达5mm;支持 Wi-Fi漫游&#xff0c;实现更稳健的网络数据交互;无轨化激光 SLAM 导航&#xff0c;配合 3D 避障相机等多传感器进行安全防护。转运器人…

租赁系统|北京租赁系统|租赁软件开发流程

在数字化时代的浪潮下&#xff0c;小程序成为了各行各业争相探索的新领域。租赁行业亦不例外&#xff0c;租赁小程序的开发不仅提升了用户体验&#xff0c;更为商家带来了更多商业机会。本文将详细解析租赁小程序的开发流程&#xff0c;为有志于进军小程序领域的租赁行业从业者…

Kubeblocks系列2-redis尝试之出师未捷身先死

背景&#xff1a; 上一节&#xff0c;完成了Kubeblocks系列1-安装。现在就想拿一个简单的应用测试一下kubeblocks这个所谓的神器是否好用&#xff0c;是否可以应用与生产&#xff01; Kubeblocks系列2-redis尝试 参照官方文档&#xff1a;创建并连接到 Redis 集群 确保 Red…

【教程】Linux部署Android安卓模拟器

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 未完成&#xff0c; 先简单记录下指令。 docker-android https://github.com/budtmo/docker-android 检查系统是否支持&#xff1a; sudo apt instal…

【C++】深入解析C++智能指针:从auto_ptr到unique_ptr与shared_ptr

文章目录 前言&#xff1a;1. 智能指针的使用及原理2. C 98 标准库中的 auto_ptr:3. C 11 中的智能指针循环引用&#xff1a;shared_ptr 定制删除器 4. 内存泄漏总结&#xff1a; 前言&#xff1a; 随着C语言的发展&#xff0c;智能指针作为现代C编程中管理动态分配内存的一种…

【面试干货】猴子吃桃问题

【面试干货】猴子吃桃问题 1、实现思想2、代码实现 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 猴子吃桃问题&#xff1a;猴子第一天摘下若干个桃子&#xff0c;当即吃了一半&#xff0c;还不瘾&#xff0c;又多吃了一个 二天早上又将剩…

牛客小白月赛94 解题报告 | 珂学家 | 茴字有36种写法

前言 很久没写题解了&#xff0c;有幸参加了94小白月赛内测&#xff0c;反馈是很nice&#xff0c;AK场。 争议的焦点在于哪题最难 D题E题(没有F题)F题(没有E题) 你选哪题呢&#xff1f; 题解 欢迎关注 珂朵莉 牛客周赛专栏 珂朵莉 牛客小白月赛专栏 A. 小苯的九宫格 思路…

手机相册的照片彻底删除了怎么恢复?删除照片恢复的5种方法

在数字化时代&#xff0c;手机相册里装满了我们的生活点滴和珍贵回忆。然而&#xff0c;一不小心就可能误删那些意义非凡的照片。别担心&#xff0c;今天小编就给大家介绍5种恢复误删照片的方法&#xff0c;让你的回忆不再丢失&#xff01; 方法一&#xff1a;相册App的“最近删…

Docker Compose使用

Docker-Compose是什么 docker建议我们每一个容器中只运行一个服务,因为doker容器本身占用资源极少&#xff0c;所以最好是将每个服务单独分割开来&#xff0c;但是这样我们又面临了一个问题&#xff1a; 如果我需要同时部署好多个服务&#xff0c;难道要每个服务单独写Docker…

P4097 【模板】李超线段树 / [HEOI2013] Segment 题解

题意 有一个平面直角坐标系&#xff0c;总共 n n n 个操作&#xff0c;每个操作有两种&#xff1a; 给定正整数 x 0 , y 0 , x 1 , y 1 x_0,y_0,x_1,y_1 x0​,y0​,x1​,y1​ 表示一条线段的两个端点。你需要在平面上加入这一条线段&#xff0c;第 i i i 条被插入的线段的标…