当前位置：首页 > news >正文

FastAPI Web框架教程第13章 WebSocket

news 文章来源：https://blog.csdn.net/lcy1619260/article/details/137233921 2024/11/8 11:22:25

13-1 WebSocket是什么

WebSocket简介：

WebSocket是一种在单个TCP连接上进行全双工通信的协议。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

WebSocket和HTTP的相同点和不同点：

WebSocket和HTTP都是解决客户端-服务端通信的网络协议。
HTTP是单向的，客户端先发起请求，服务端收到请求后再处理这个请求返回响应结果；即先有请求再有响应，且是一个请求对应一个响应；请求时建立连接，响应后断开连接。
WebSocket是双向的，客户端发起请求经过三次握手连接后，客户端和服务端就会基于这个连接保持通信，都可以主动向对方发消息。任何一端都可以主动断开这个连接。
HTTP是无状态的，WebSocket是有状态的。即如果使用WebSocket，那么只要建立了连接，每次通信时，服务端都知道在和谁通信，不需要借助Cookie或seesion或jwt等登录认证方式。

参考：https://www.geeksforgeeks.org/what-is-web-socket-and-how-it-is-different-from-the-http/

WebSocket的应用：

实时web应用
游戏
聊天软件等等

13-2 WebSocket聊天室简易版

使用FastAPI演示浏览器和服务端基于WebSocket，建立连接并双向通信。
前端代码无需掌握，只要了解它在干什么事情即可。
示例中，我们使用 HTMLResponse，通过接口的方式把前端代码响应的浏览器上；但其实直接写一个html文件，手动打开也可以的。
后端使用WebSocket，需要使用WebSocket这个对象，常用如下三个协程函数。

await websocket.accept()				# 建立连接
data = await websocket.receive_text()	 # 收消息
await websocket.send_text()				# 发消息

想要在fastAPI中使用websocket 需要安装标准版的uvicorn

pip3 install uvicorn[standard]

实例：简单版聊天

from fastapi import FastAPI, WebSocket
from fastapi.responses import HTMLResponseapp = FastAPI()html = """
<!DOCTYPE html>
<html><head><title>Chat</title></head><body><h1>WebSocket Chat</h1><form action="" οnsubmit="sendMessage(event)"><input type="text" id="messageText" autocomplete="off"/><button>Send</button></form><ul id='messages'></ul><script>var ws = new WebSocket("ws://localhost:8000/ws");ws.onmessage = function(event) {var messages = document.getElementById('messages')var message = document.createElement('li')var content = document.createTextNode(event.data)message.appendChild(content)messages.appendChild(message)};function sendMessage(event) {var input = document.getElementById("messageText")ws.send(input.value)input.value = ''event.preventDefault()}</script></body>
</html>
"""@app.get("/")
async def get():return HTMLResponse(html)@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):await websocket.accept()while True:data = await websocket.receive_text()await websocket.send_text(f"Message text was: {data}")

13-3 WebSocket多人在线聊天室

实现多人在线聊天室
处理客户端下线通知
使用时间戳做客户端id

示例1：多人在线聊天室

from typing import Listfrom fastapi import FastAPI, WebSocket, WebSocketDisconnect
from fastapi.responses import HTMLResponseapp = FastAPI()html = """
<!DOCTYPE html>
<html><head><title>Chat</title></head><body><h1>WebSocket Chat</h1><h2>Your ID: <span id="ws-id"></span></h2><form action="" οnsubmit="sendMessage(event)"><input type="text" id="messageText" autocomplete="off"/><button>Send</button></form><ul id='messages'></ul><script>var client_id = Date.now()document.querySelector("#ws-id").textContent = client_id;var ws = new WebSocket(`ws://localhost:8000/ws/${client_id}`);ws.onmessage = function(event) {var messages = document.getElementById('messages')var message = document.createElement('li')var content = document.createTextNode(event.data)message.appendChild(content)messages.appendChild(message)};function sendMessage(event) {var input = document.getElementById("messageText")ws.send(input.value)input.value = ''event.preventDefault()}</script></body>
</html>
"""class ConnectionManager:def __init__(self):self.active_connections: List[WebSocket] = []async def connect(self, websocket: WebSocket):await websocket.accept()self.active_connections.append(websocket)def disconnect(self, websocket: WebSocket):self.active_connections.remove(websocket)async def send_personal_message(self, message: str, websocket: WebSocket):await websocket.send_text(message)async def broadcast(self, message: str):for connection in self.active_connections:await connection.send_text(message)manager = ConnectionManager()@app.get("/")
async def get():return HTMLResponse(html)@app.websocket("/ws/{client_id}")
async def websocket_endpoint(websocket: WebSocket, client_id: int):await manager.connect(websocket)	# 接收连接try:while True:data = await websocket.receive_text()		# 接收数据await manager.send_personal_message(f"You wrote: {data}", websocket)	# 自己发的消息自己看到await manager.broadcast(f"Client #{client_id} says: {data}")			# 广播，发给所有在线的客户端except WebSocketDisconnect:manager.disconnect(websocket)	# 断开连接await manager.broadcast(f"Client #{client_id} left the chat")	# 广播

示例2：优化自己发的消息不重复展示

from typing import Listfrom fastapi import FastAPI, WebSocket, WebSocketDisconnect
from fastapi.responses import HTMLResponseapp = FastAPI()html = """
<!DOCTYPE html>
<html><head><title>Chat</title></head><body><h1>WebSocket Chat</h1><h2>Your ID: <span id="ws-id"></span></h2><form action="" οnsubmit="sendMessage(event)"><input type="text" id="messageText" autocomplete="off"/><button>Send</button></form><ul id='messages'></ul><script>var client_id = Date.now()document.querySelector("#ws-id").textContent = client_id;var ws = new WebSocket(`ws://localhost:8000/ws/${client_id}`);ws.onmessage = function(event) {var messages = document.getElementById('messages')var message = document.createElement('li')var content = document.createTextNode(event.data)message.appendChild(content)messages.appendChild(message)};function sendMessage(event) {var input = document.getElementById("messageText")ws.send(input.value)input.value = ''event.preventDefault()}</script></body>
</html>
"""class ConnectionManager:def __init__(self):self.active_connections: List[WebSocket] = []async def connect(self, websocket: WebSocket):await websocket.accept()self.active_connections.append(websocket)	# 收集有所的在线客户端def disconnect(self, websocket: WebSocket):self.active_connections.remove(websocket)	# 当客户端断线时，更新在线客户端列表async def send_personal_message(self, message: str, websocket: WebSocket):await websocket.send_text(message)async def broadcast(self, message: str, websocket: WebSocket):for connection in self.active_connections:if connection == websocket:		# 判断下，如果是自己就不再发送消息continueawait connection.send_text(message)manager = ConnectionManager()@app.get("/")
async def get():return HTMLResponse(html)@app.websocket("/ws/{client_id}")
async def websocket_endpoint(websocket: WebSocket, client_id: int):await manager.connect(websocket)try:while True:data = await websocket.receive_text()await manager.send_personal_message(f"You wrote: {data}", websocket)await manager.broadcast(f"Client #{client_id} says: {data}", websocket)except WebSocketDisconnect:manager.disconnect(websocket)await manager.broadcast(f"Client #{client_id} left the chat", websocket)

FastAPI Web框架教程第13章 WebSocket

13-1 WebSocket是什么 WebSocket简介： WebSocket是一种在单个TCP连接上进行全双工通信的协议。 WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一…...

编程日记 2024/4/2 6:57:21

将 Elasticsearch 向量数据库引入到数据上的 Azure OpenAI 服务（预览）

作者：来自 Elastic Aditya Tripathi Microsoft 和 Elastic 很高兴地宣布，全球下载次数最多的向量数据库 Elasticsearch 是公共预览版中 Azure OpenAI Service On Your Data 官方支持的向量存储和检索增强搜索技术。这项突破性的功能使你能够利用 GPT-4 …...

编程日记 2024/4/2 6:54:18

SeLinux 常见的宏

在SeLinux框架中，google定义好了一些宏，我们使用这些宏，开发时可以更加方便。大部分的宏是定义在te_macros文件中 type_transition type_transition source_type target_type : class default_type当主体进程域source_type 对target_type 类…...

编程日记 2024/4/2 6:53:17

图解PyTorch中的torch.gather函数和 scatter 函数

前言 torch.gather在目前基于 transformer or query based 的目标检测中，在最后获取目标结果时，经常用到。这里记录下用法，防止之后又忘了。介绍 torch.gather 官方文档对torch.gather()的定义非常简洁定义：从原tensor中获…...

编程日记 2024/4/2 6:52:16

Pytorch实用教程： torch.tensor()的用法

在PyTorch中，torch.tensor()函数是用来创建张量（Tensor）的一个非常基础和重要的函数。张量是PyTorch中的基本数据结构，用于存储和操作数据，可以看作是一个高维数组。torch.tensor()函数可以从数据创建新的张量&#xf…...

编程日记 2024/4/2 6:51:15

Java设计模式详解：工厂模式

Java设计模式详解：工厂模式文章目录 Java设计模式详解：工厂模式前言一、工厂模式是个啥？二、工厂模式怎么用？三、工厂模式啥时候用？四、工厂模式的优点总结前言今天咱们来聊聊设计模式中的一位重要成员——工厂模式…...

编程日记 2024/4/2 6:50:14

Python爬虫：爬虫常用伪装手段

目录前言一、设置User-Agent 二、设置Referer 三、使用代理IP 四、限制请求频率总结前言随着互联网的快速发展，爬虫技术在网络数据采集方面发挥着重要的作用。然而，由于爬虫的使用可能会对被爬取的网站造成一定的压力，因此&#…...

编程日记 2024/4/2 6:48:12

【数据结构】非线性结构---二叉树

1、树 1.1 树的相关概念节点的度：一个节点含有的子树的个数称为该节点的度； 如上图：A的为6 叶节点或终端节点：度为0的节点称为叶节点； 如上图：B、C、H、I...等节点为叶节点非终端节点或分支节点&#…...

编程日记 2024/4/2 6:47:11

【战略前沿】与中国达成生产协议后，飞行汽车即将起飞

【原文】Flying cars edge towards takeoff after Chinese production deal 【作者】Thomas Macaulay 斯洛伐克公司KleinVision签署了一项协议，将大规模生产AirCar。一辆获得航空认证的飞行汽车向商业化又迈出了一大步。空中汽车的创造者KleinVision今天宣布出售…...

编程日记 2024/4/2 6:46:10

谷粒商城实战(007 压力测试)

Java项目《谷粒商城》架构师级Java项目实战，对标阿里P6-P7，全网最强总时长 104:45:00 共408P 此文章包含第141p-第p150的内容简介安装jmeter 安装jmeter 使用中文这样写就是200个线程循环100次一共是2万个请求介绍线程组添加请求可以是htt…...

编程日记 2024/4/2 6:44:08

使用CSS计数器，在目录名称前加上了序号，让目录看起来更加井然有序

目录（Text of Contents缩写为TOC），其实就是一篇文章的概要或简述。这好比，去书店买书，先是被这本书的标题所吸引，而后我们才会，翻开这本书目录，看看这本书主要是在讲些什么&#xff…...

编程日记 2024/4/2 6:43:07

SSH常见运维总结

1 -bash: ssh: command not found 解决办法："yum install －y openssh-server openssh-clinets" 2 ssh登录时提示：Read from socket failed: Connection reset by peer. 原因：/etc/ssh/下没有ssh*key*文件解决&…...

编程日记 2024/4/2 6:41:05

uni app 扫雷

闲来无聊。做个扫雷玩玩吧，点击打开，长按标记，标记的点击两次或长按取消标记。所有打开结束 <template><view class"page_main"><view class"add_button" style"width: 100vw; margin-bottom: 20r…...

编程日记 2024/4/2 6:39:03

MATLAB绘制堆叠填充图--巧用句柄

MATLAB绘制堆叠填充图–巧用句柄目录 MATLAB绘制堆叠填充图--巧用句柄1. 主要原理讲解1.1 主要函数1.2 句柄原理 2. 绘图示例2.1 准备数据2.2 绘制堆叠填充图-使用句柄控制图形属性2.3 设置填充颜色和样式2.4 添加标题和标签2.5 绘图效果 3. 结语堆叠填充图是一种常见的数据可…...

编程日记 2024/4/2 6:37:01

JQuery的定义

jQuery是一个js库，使用jQuery会比js简单一点 jQuery文件是一个自执行函数 jQuery文件是一个自执行函数 $传递的参数不同，效果也不同： 传递的是匿名函数，那$就是一个入口函数，传递的是一个字符串，那$就…...

编程日记 2024/4/2 6:36:00

【操作系统】FCFS、SJF、HRRN、RR、EDF、LLF调度算法及python实现代码

文章目录一、先来先服务调度算法（FCFS） 二、短作业优先调度算法（SJF） 三、高响应比优先调度算法（HRRN） 四、轮转调度算法（RR） 五、最早截至时间优先算法（EDF&#…...

编程日记 2024/4/2 6:34:58

Image-Adaptive YOLO for Object Detection in Adverse Weather Conditions(IA-YOLO)

1、总体概述基于深度学习的目标检测在常规条件的数据集可以获得不错的结果，但是在环境、场景、天气、照度、雾霾等自然条件的综合干扰下，深度学习模型的适应程度变低，检测结果也随之下降，因此研究在复杂气象条件下的目标检测方法…...

编程日记 2024/4/2 6:32:57

Mac电脑Jmeter集成到Jenkins，压测多个接口并生成测试报告

Jenkins支持的JDK版本17、21，通过java -version查看当前JDK版本，确认是否匹配打开网址https://www.jenkins.io/download 点击下载，选择mac版本 commend空格打开终端，输入安装命令brew install jenkins 安装完成后输入brew servi…...

编程日记 2024/4/2 6:31:56

redis-Hash

一，应用场景 Redis hash 是一个string类型的field和value的映射表，hash特别适合用于存储对象。Set就是一种简化的Hash,只变动key,而value使用默认值填充。可以将一个Hash表作为一个对象进行存储，表中存放对象的信息。二，命令 H…...

编程日记 2024/4/2 6:30:55

Kubernetes kafka系列 | Strimzi 部署kafka-bridge

Strimzi kafka集群部署直通车一、kafka bridge 介绍 Kafka Bridge 是 Apache Kafka 生态系统中的一个工具或组件，用于实现 Kafka 与其他系统或协议之间的通信或集成。Kafka 本身是一个分布式事件流平台，广泛用于构建实时数据流水线和流式应用程序。然而…...

编程日记 2024/4/2 6:29:53

How AR and VR are transforming customer experiences？ How AR and VR are transforming customer experiences AR和VR如何改变客户体验 AR and VR technology was largely expedited by the past pandemic with at least 93.3 million and 58.9 million users r…...

编程日记 2024/4/2 6:27:51

微信小程序中实现埋点的方法

在小程序开发过程中,埋点是实现数据采集和用户行为分析的重要手段。通过埋点,我们可以获取用户在使用小程序时的各种操作信息,从而更好地了解用户行为特征,优化产品体验。下面将介绍如何在小程序中实现埋点,并通过代码示例进行说明。一、埋点实现思路小程序的埋点实现主要依…...

编程日记 2024/4/2 6:26:50

vue记事本渲染以及交互

以下是记事本的源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>记事本</title><styl…...

编程日记 2024/4/2 6:25:49

Zookeeper中的脑裂

简单点来说，脑裂(Split-Brain) 就是比如当你的 cluster 里面有两个节点，它们都知道在这个cluster 里需要选举出一个 master。那么当它们两个之间的通信完全没有问题的时候，就会达成共识，选出其中一个作为 master。但是如果它们之间…...

编程日记 2024/4/2 6:24:48

【漏洞复现】金和OA XmlDeal.aspx XXE漏洞

0x01 产品简介金和数字化智能办公平台（简称JC6）是一款结合了人工智能技术的数字化办公平台，为企业带来了智能化的办公体验和全面的数字化转型支持。同时符合国家信创认证标准，支持组织数字化转型，实现业务流程的数字化、智能化和协同化，提高企业竞争力。 0x02 漏洞概述…...

编程日记 2024/4/2 6:22:46

对比：React 还是 Vue

自己之前的开发栈一直是 Vue，对 Vue 的设计理念及底层实现原理算是颇有了解；随着公司技术迭代，近半年来开始接触&使用 React。前面写了几篇关于 React 的文章，但大部分都是知识点以及开发过程问题的沉淀总结。这篇文章想尝…...

编程日记 2024/4/2 6:21:45

ubuntu 20.04 SD 卡分区类型 msdos 改为 GPT 的方法

前言默认 SD 卡分区是 FAT32 格式，为了用于嵌入式Linux ext4 文件系统，需要改为 ext4 文件系统，但是SD 卡分区类型默认是 msdos 类型，也就是 MBR 类型，不是 GPT 类型。烧写 ext4 分区表，或者使用 ubuntu…...

编程日记 2024/4/2 6:20:43

Kubernetes（K8s）技术解析

1. K8s简介 Kubernetes（简称K8s）是一个开源的容器编排平台，旨在简化容器化应用程序的部署、扩展和管理。为开发者和运维人员提供了丰富的功能和灵活的解决方案，帮助他们更轻松地构建、部署和管理云原生应用程序。以下是关于Kubern…...

编程日记 2024/4/2 6:18:41

Python 基于 OpenCV 视觉图像处理实战之 OpenCV 简单实战案例之十简单颜色反转效果

Python 基于 OpenCV 视觉图像处理实战之 OpenCV 简单实战案例之十简单颜色反转效果目录 Python 基于 OpenCV 视觉图像处理实战之 OpenCV 简单实战案例之十简单颜色反转效果一、简单介绍二、简单颜色反转效果实现原理三、简单颜色反转效果案例实现简单步骤四、注…...

编程日记 2024/4/2 6:17:40

【ELK+Kafka+filebeat分布式日志收集】部署filebeat和Kibana（三）

filebeat下载官网：https://www.elastic.co/cn/downloads/beats/filebeat 或者 cd /opt wget https://artifacts.elastic.co/downloads/beats/filebeat/filebeat-8.8.1-linux-x86_64.tar.gz依次执行如下命令...

编程日记 2024/4/2 6:16:39

蜂蜜网站建设/googleseo推广

win10控制台打不开提示管理员已阻止mmc.exe怎么办？最近有win10用户在打开控制台的时候发现打不开了，提示管理员已阻止mmc.exe。这是怎么回事呢？我们该如何解决控制台打不开提示管理员已阻止mmc.exe的问题呢？首先我们先了解一下mmc…...

编程日记 2024/11/8 11:18:29

成都网站创建/百度指数数据下载

我们都知道，使用C/C之类的编译性语言编写的程序，是需要从源文件转换成计算机使用的机器语言，经过链接器链接之后形成了二进制的可执行文件。运行该程序的时候，就可以把二进制程序从硬盘载入到内存中并运行。但是对于Python而言&a…...

编程日记 2024/11/8 9:40:35

极端页面装修wordpress 主题/广西seo公司

我们经常使用Ping开查看网络是否畅通，随着安全意识的加强，预装系统有些默认会关闭Ping回显服务，我们要手动去打开它。打开开始菜单输入防火墙打开Windows防火墙，进入入站规则，找到文件和打印机共享（回显…...

编程日记 2024/11/8 6:59:02

wordpress成品图/百度快照投诉中心

问题 J: 赫夫曼编码题目描述赫夫曼编码能够产生最短的报文。以报文“ABCDABCDABCABDABAA”为例，A编为0，B对应10，C对应110，D对应111，整体的报文长度为35位二进制。相比于定长的ASCII码，压缩比达到了18*8/3…...

编程日记 2024/11/8 3:52:41

网站建设模式/广州网站制作服务

一、综述二、项目启动三、需求分析四、概要设计五、详细设计与概要设计六、集成测试与系统测试七、交付验收八、系统运维九、配置管理和质量保障概要设计阶段包括：n 项目技术调研n 软件概要设计n 编写概要设计说明书n 概要设计评审1. 项目技术调研要素描…...

编程日记 2024/11/8 2:32:35

wordpress伪静态宝塔/如何制作一个宣传网页

2019独角兽企业重金招聘Python工程师标准>>> Unity中相机的应用遮罩应用： camera.cullingMask ~(1 << x); // 渲染除去层x的所有层 camera.cullingMask & ~(1 << x); // 关闭层x camera.cullingMask | (1 << x); // 打开…...

编程日记 2024/11/8 2:30:33

13-1 WebSocket是什么

13-2 WebSocket聊天室简易版

13-3 WebSocket多人在线聊天室

相关文章：