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

news2024/9/22 23:24:35
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_application

from . import rontings

os.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 consumers

websocket_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 StopConsumer

class 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.coloradmin.cn/o/1696246.html

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

相关文章

SwiftUI中List的样式及使用详解(添加、移动、删除、自定义滑动)

SwiftUI中的List可是个好东西&#xff0c;它用于显示可滚动列表的视图容器&#xff0c;类似于UITableView。在List中可以显示静态或动态的数据&#xff0c;并支持垂直滚动。List是一个数据驱动的视图&#xff0c;当数据发生变化时&#xff0c;列表会自动更新。 针对List&#x…

SW 弯曲找方向

当旋转弯曲轴的时候,半径和角度 越和理论的接近,越接近(只要输入角度,然后旋转弯曲轴,看半径跟随的变化值)

(优作)风力摆控制系统

本系统由瑞萨 100LGA 单片机控制模块&#xff0c; 6050 三轴陀螺仪加速度模块&#xff0c;直流风机及其驱 动模块&#xff0c;显示模块&#xff0c;键盘模块&#xff0c;蜂鸣器模块以及风力摆机械结构组成&#xff0c; MPU6050 采集风摆姿 态&#xff0c;单片机处理姿态数…

技术速递|无障碍应用程序之旅:键盘可访问性和 .NET MAUI

作者&#xff1a;Rachel Kang 排版&#xff1a;Alan Wang 首先让我们一起来看看您的应用程序是否支持键盘访问&#xff1a; 启动您的其中一个应用。如果您的设备尚未连接物理键盘&#xff0c;请连接物理键盘。像平常一样导航您的应用程序&#xff0c;并且仅使用键盘来执行此操…

Docker提示某网络不存在如何解决,添加完网络之后如何删除?

Docker提示某网络不存在如何解决&#xff1f; 创建 Docker 网络 假设现在需要创建一个名为my-mysql-network的网络 docker network create my-mysql-network运行容器 创建网络之后&#xff0c;再运行 mysqld_exporter 容器。完整命令如下&#xff1a; docker run -d -p 9104…

类和对象【六】友元和内部类

文章目录 友元友元的作用友元的缺点友元函数语法&#xff1a;特点&#xff1a; 友元类语法&#xff1a;特点&#xff1a; 内部类概念特点 友元 友元的作用 友元提供了一种打破封装的方式&#xff0c;有时提供了便利。 友元的主要作用就是打破封装 即可以让一个类的友元函数…

Redis第18讲——Redis和Redission实现延迟消息

即使不是做电商业务的同学&#xff0c;也一定知道订单超时关闭这种业务场景&#xff0c;这个场景大致就是用户下单后&#xff0c;如果在一定时间内未支付&#xff08;比如15分钟、半小时&#xff09;&#xff0c;那么系统就会把这笔订单给关闭掉。这个功能实现的方式有很多种&a…

【限免】短时傅里叶变换时频分析【附MATLAB代码】

来源&#xff1a;微信公众号&#xff1a;EW Frontier 简介 一种能够同时对信号时域和频域分析的方法——短时傅里叶变换&#xff08;STFT&#xff09;&#xff0c;可以在时频二维角度准确地描述信号 的时间、频域的局部特性&#xff0c;与其他算法不同&#xff0c;通过该算法可…

打造游戏APP:面向对象编程的实战演练

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、项目背景与架构概览 二、类的设计与实现 三、面向对象编程的实践 四、游戏循环与事件…

搜索自动补全-elasticsearch实现

1. elasticsearch准备 1.1 拼音分词器 github地址&#xff1a;https://github.com/infinilabs/analysis-pinyin/releases?page6 必须与elasticsearch的版本相同 第四步&#xff0c;重启es docker restart es1.2 定义索引库 PUT /app_info_article {"settings": …

体检系统商业源码,C/S架构的医院体检系统源码,大型健康体检中心管理系统源码

体检系统商业源码&#xff0c;C/S架构的医院体检系统源码&#xff0c;大型健康体检中心管理系统源码 体检信息管理系统软件是对医院体检中心进行系统化和规范化的管理。系统从检前&#xff0c;检中&#xff0c;检后整个业务流程提供标准化以及精细化的解决方案。实现体检业务市…

上位机图像处理和嵌入式模块部署(f103 mcu的最小软件系统)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 我们都知道mcu电路有最小系统。一个最小硬件系统里面包含了mcu、晶振、复位、输入和输出。其实不光硬件如此&#xff0c;软件也有一个最小系统。而…

9.任务调度

一、开启任务调度器 1.函数 vTaskStartScheduler() 函数 vTaskStartScheduler()用于启动任务调度器&#xff0c;任务调度器启动后&#xff0c;FreeRTOS 便会开始 进行任务调度&#xff0c;除非调用函数 xTaskEndScheduler()停止任务调度器&#xff0c;否则不会再返回。函数 vTa…

【对角线遍历】python

没啥思路 class Solution:def findDiagonalOrder(self, mat: List[List[int]]) -> List[int]:mlen(mat)nlen(mat[0])ret[]if len(mat)0:return retcount0#mn-1是对角线总数while count<mn-1:#x和y的和刚好是count数#偶数为右上走if count%20:xcount if(count<m)else (…

Django 里html模板

Django 提供两种方式让程序员自定义html模板。 第一种方法 在项目文件夹里的urls.py进行添加 修改代码如下 from django.contrib import admin from django.urls import path from app01 import views # 得添加这行urlpatterns [path(xxx/, views.home), # 添加这行path(…

有一个3x4的矩阵,要求用函数编写程序求出其中值最大的那个元素,以及其所在的行号和列号

常量和变量可以用作函数实参&#xff0c;同样数组元素也可以作函数实参&#xff0c;其用法与变量相同。数组名也可以作实参和形参&#xff0c;传递的是数组的起始地址。 用数组元素作函数实参&#xff1a; 由于实参可以是表达式&#xff0c;而数组元素可以是表达式的组…

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

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

电机控制系列模块解析(22)—— 零矢量刹车

一、零矢量刹车 基本概念 逆变器通常采用三相桥式结构&#xff0c;包含六个功率开关元件&#xff08;如IGBT或MOSFET&#xff09;&#xff0c;分为上桥臂和下桥臂。每个桥臂由两个反并联的开关元件组成&#xff0c;上桥臂和下桥臂对应于电机三相绕组的正负端。正常工作时&…

原哥花了1个多月的时间终于开发了一款基于android studio的原生商城app

大概讲一下这个app实现的功能和前后端技术架构。 功能简介 广告展示商品展示跳转淘宝联盟优惠卷购买发布朋友圈宝妈知识资讯商品搜索朋友圈展示/点赞/评论登陆注册版本升级我的个人资料商品和资讯收藏我的朋友圈意见反馈 安卓端技术选型 Arouter组件化daggerrxjavaretrofit…

技术面试,项目实战,求职利器

之前找工作一直想找一个能真正系统性学开发的地方&#xff0c;之前毕业找工作的时候无意间碰到下面这个网站&#xff0c;感觉还挺不错的&#xff0c;用上面的技术实战内容应对技术面试&#xff0c;也算是求职利器了。有需要的可以自取&#xff1a; https://how2j.cn?p156336 实…