FastAPI 学习之路(五十二)WebSockets(八)接受/发送json格式消息

前面我们发送的大多数都是text类型的消息,对于text消息来说,后端处理出来要麻烦的多,那么我们可以不可以传递json格式的数据,对于前后端来说都比较友好,答案是肯定的,我们需要做下处理。

首先,我们在websocket管理器中增加处理json格式消息的方法:

from typing import List, Dictfrom starlette.websockets import WebSocketclass ConnectionManager:def __init__(self):"""存放链接"""self.active_connections: List[Dict[str, WebSocket]] = []async def connect(self, user: str, ws: WebSocket):"""链接"""await ws.accept()self.active_connections.append({"user": user, "ws": ws})async def disconnect(self, user: str, ws: WebSocket):"""断开链接,移除"""self.active_connections.remove({"user": user, "ws": ws})@staticmethodasync def send_personal_message(message: str, ws: WebSocket):"""发送所有人消息"""await ws.send_text(message)async def send_other_message(self, message: dict, user: str):"""发送个人消息"""for coon in self.active_connections:if coon["user"] == user:await coon["ws"].send_json(message)async def broadcast(self, data: str):"""广播"""for conn in self.active_connections:await conn["ws"].send_text(data)async def broadcast_json(self, data: dict):"""广播json数据"""for conn in self.active_connections:await conn["ws"].send_json(data)

接口中如何接收json数据呢,新增接口如下:

@app.websocket("/ws/json/{user}")
async def websocket_json_data(websocket: WebSocket,user: str,cookie_or_token: str = Depends(get_cookie_or_token)
):"""发送接收json数据(前面一对一接口其实就是发送的json数据)"""await ws_manager.connect(user, websocket)try:while True:data = await websocket.receive_json()send_user = data["username"]if send_user:await ws_manager.send_other_message(data, send_user)else:await ws_manager.broadcast_json(data)except WebSocketDisconnect as e:await ws_manager.disconnect(user, websocket)

前端也要相对应的修改:
 

<!DOCTYPE html>
<html>
<head><title>Chat</title>
</head>
<body>
<h1>WebSocket 聊天</h1>
<form action="" onsubmit="sendMessage(event)"><input type="text" id="messageText" autocomplete="off"/><input type="text" id="username" autocomplete="off"/><button>Send</button>
</form>
<button onclick="logout()">退出</button>
<ul id='messages'>
</ul>
<script>var  token=window.localStorage.getItem("token")if (token==null ){window.location.href="/login"}var ws = new WebSocket("ws://localhost:8000/ws/json/"+token+"?token="+token);ws.onmessage = function (event) {var messages = document.getElementById('messages')var message = document.createElement('li')let receiveJson = JSON.parse(event.data);console.log(receiveJson)var content = document.createTextNode(receiveJson.username+"说:"+receiveJson.messageText)message.appendChild(content)messages.appendChild(message)};function sendMessage(event) {var input = document.getElementById("messageText")var username = document.getElementById("username")let message = {messageText: input.value, username:username.value};let messageJson = JSON.stringify(message);ws.send(messageJson);// input.value = ''event.preventDefault()}function logout() {window.localStorage.removeItem("token")window.location.href='/login'}
</script></body></html>

部署看效果,因为发送给后端的数据格式是前端拼的json,所以页面上只需要填文本即可:

 

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

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

相关文章

1.8.Kaggle房价预测

House Prices - Advanced Regression Techniques | Kaggle 在这里下载数据&#xff0c;然后使用pandas读。 课本&#xff1a;4.10. 实战Kaggle比赛&#xff1a;预测房价 — 动手学深度学习 2.0.0 documentation (d2l.ai) 一层线性层 def get_net():net nn.Sequential(nn.Li…

DHCP中继实验

一、什么是DHCP中继? 1、使得一个DHCP服务器同时为多个网段服务称为DHCP中继技术。 2、配置DHCP中继的网络设备可以在不同网段上从DHCP总服务器获取IP地址分配给下面的各个主机。 3、路由器和交换机都可充当中继。DHCP中继在两个网段间代理客户端和服务器请求,中继服务器需要…

实现异步天气数据获取与Spring缓存集成

你好呀&#xff0c;我是小邹。 在Web应用中&#xff0c;实时天气数据的获取是一个常见的需求&#xff0c;特别是在需要频繁更新天气信息的场景下&#xff0c;如旅游网站、天气应用或任何需要展示地理位置相关天气的应用。然而&#xff0c;频繁的外部API调用不仅会增加服务器的…

Go网络编程-RPC程序设计

gRPC 通信 RPC 介绍 RPC, Remote Procedure Call&#xff0c;远程过程调用。与 HTTP 一致&#xff0c;也是应用层协议。该协议的目标是实现&#xff1a;调用远程过程&#xff08;方法、函数&#xff09;就如调用本地方法一致。 如图所示&#xff1a; 说明&#xff1a; Servi…

生活中生智慧

【 圣人多过 小人无过 】 觉得自己做得不够才能做得更好&#xff0c;互相成全&#xff1b;反求诸己是致良知的第一步&#xff1b;有苦难才能超越自己&#xff0c;开胸怀和智慧&#xff1b;不浪费任何一次困苦&#xff0c;危机中寻找智慧&#xff0c;成长自己。 把困苦当作当下…

WINUI或WPF灵活使用样式、控件模板、自定义控件、用户控件

在WINUI与WPF 中&#xff0c;控件模板&#xff08;ControlTemplate&#xff09;、样式&#xff08;Style&#xff09;、自定义控件&#xff08;CustomControl&#xff09;和用户控件&#xff08;UserControl&#xff09;都是构建复杂和灵活用户界面的重要工具&#xff0c;但它们…

SpringCloudAlibaba-Seata2.0.0与Nacos2.2.1

一、下载 ## 下载seata wget https://github.com/apache/incubator-seata/releases/download/v2.0.0/seata-server-2.0.0.tar.gz## 解压 tar zxvf seata-server-2.0.0.tar.gz二、执行sql文件 ## 取出sql文件执行 cd /seata/script/server/db/mysql ## 找个mysql数据库执行三、…

java文本比较解决方案

参考资料 VBA计算页码和行号https://learn.microsoft.com/zh-cn/office/vba/api/word.wdinformation 概述&#xff1a; 最近在做word文档对比的&#xff0c;总结了几种解决方案&#xff0c;记录一下 在java中&#xff0c;常用的文本对比方案有如下几种&#xff1a; 差异比较…

数据结构--二叉树收尾

目录 1.二叉树的销毁 2.层序遍历 2.1深度优先搜索 2.1.1满&#xff08;完全&#xff09;二叉树引入 2.1.2什么是广度优先搜索 2.2广度优先搜索 2.2.1基本思路 2.2.2代码解析 3.完全二叉树的判断 3.1思路分析 3.2原理剖析 3.3代码分析 4.逆推二叉树结构 1.二叉树的销…

惠海H5112A降压恒流芯片IC 60V72V80V100V转24V36V48V多路共阳输出景观LED点光源

H5112A是一款外围电路简单的多功能平均电流型LED恒流驱动器&#xff0c;适用于5-90V电压范围的非隔离式大功率恒流LED驱动领域。芯片采用了平均电流模式控制&#xff0c;输出电流精度在士3%;输出电流对输入输出电压以及电感不敏感;芯片内部集成了环路补偿&#xff0c;外围电路更…

网络编程-TCP 协议的三次握手和四次挥手做了什么

TCP 协议概述 1. TCP 协议简介 TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一种面向连接的、可靠的、基于字节流的传输层通信协议。 TCP 协议提供可靠的通信服务&#xff0c;通过校验和、序列号、确认应答、重传等机制保证数据传输…

自动化测试高级控件交互方法:TouchAction、触屏操作、点按,双击,滑动,手势解锁!

在自动化测试领域中&#xff0c;TouchAction 是一种非常强大的工具&#xff0c;它允许我们模拟用户在设备屏幕上的各种触摸事件。这种模拟不仅限于简单的点击操作&#xff0c;还包括滑动、长按、多点触控等复杂的手势。 点按与双击 点按和双击是触屏设备上最基本的操作之一。…

【AMD/Xilinx】FPGA远程烧录调试工具安装及使用

问题描述 在学习工作中&#xff0c;本人遇到了连接FPGA的服务器电脑没有Vivado或Vivado版本较低&#xff0c;导致没办法查看ila的情况。在这种情况下一方面重新安装Vivado需要占用大量存储空间&#xff0c;另一方面使用远程桌面软件连接服务器电脑的画质较为模糊&#xff0c;影…

走进数组的奇妙之旅

引言&#xff1a; 在前几篇文章中&#xff0c;我们深入探讨了函数的奥秘。在讲述函数知识的过程中&#xff0c;我们邂逅了一个新的概念&#xff0c;你或许还记得在演示 strcpy函数时&#xff0c;出现的这行代码&#xff1a;char1[20]{0};。当时&#xff0c;你是否感到好奇&…

PHP萌宠之家微信小程序系统源码

&#x1f43e;萌宠之家微信小程序&#x1f43e; —— 铲屎官们的温馨小窝✨ &#x1f3e0;【一键开启萌宠乐园】&#x1f3e0; 亲们&#xff0c;是不是每次刷手机都忍不住想看看那些软萌可爱的毛孩子&#xff1f;现在&#xff0c;有了“萌宠之家”微信小程序&#xff0c;你的…

通信流程:https【SSL/TLS】,git仓库【https/SSH】,蓝牙【面对面快传/AirDrop】

目录 HTTPS HTTP&#xff08;80端口&#xff09; SSL/TLS协议&#xff08;传输层&#xff0c;443端口&#xff09; 密文传输&#xff1a;SSL的后续版本TLS TLS1.2握手 1.摘要算法(散列函数 Hash Function)&#xff1a;验证信息的完整性&#xff0c;不可逆 第三方认证 引…

数据结构之初始二叉树(2)

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;数据结构&#xff08;Java版&#xff09; 二叉树的前置知识&#xff08;概念、性质、、遍历&#xff09; 通过上篇文章的学习&#xff0c;我们…

iOS——MRC与ARC以及自动释放池深入底层学习

MRC与ARC再回顾 在前面&#xff0c;我们简单学了MRC与ARC。MRC指手动内存管理&#xff0c;需要开发者使用retain、release等手动管理对象的引用计数&#xff0c;确保对象在必要时被释放。ARC指自动内存管理&#xff0c;由编译器自动管理对象的引用计数&#xff0c;开发者不需要…

如何用EXCEL自动解方程/方程组?利用 矩阵乘法X=A-*B,X=mmult(minverse(A), B)

目录 问题的由来 1 数据 → 模拟分析 → 单变量求解 1.1 找一个单元格填入公式 1.2 功能入口 1.3 选择单变量求解&#xff0c;分别填入内容 1.4 求解 1.5 这个感觉用处不大 2 重点介绍&#xff0c;用EXCEL进行矩阵运算解方程的操作 2.1 运用EXCEL进行矩阵运算&…

Sentinel-1 Level 1数据处理的详细算法定义(四)

《Sentinel-1 Level 1数据处理的详细算法定义》文档定义和描述了Sentinel-1实现的Level 1处理算法和方程,以便生成Level 1产品。这些算法适用于Sentinel-1的Stripmap、Interferometric Wide-swath (IW)、Extra-wide-swath (EW)和Wave模式。 今天介绍的内容如下: Sentinel-1 L…