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.mzph.cn/web/46706.shtml

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

相关文章

云计算安全流程与管控要求的全面解析

华为云安全流程与管控要求的全面解析 引言 在云计算技术迅猛发展的背景下&#xff0c;云安全问题日益凸显其重要性。华为云作为行业的领军企业&#xff0c;其安全流程与管控要求不仅关乎自身的服务稳定性&#xff0c;更直接影响到广大用户的业务安全。本文将深入解析华为云的安…

mysql、oracle、db2数据库连接参数

mysql、oracle、db2数据库连接参数 参数/数据库driverurlMysqlcom.mysql.jdbc.Driver 或 com.mysql.cj.jdbc.Driverjdbc:mysql://localhost:3306/数据库名Oracleoracle.jdbc.driver.OracleDriverjdbc:oracle:thin:localhost:1521:orcl 注&#xff1a;orcl为数据库SIDDB2com.ib…

InterSystems IRIS使用python pyodbc连接 linux环境,odbc驱动安装,DSN配置,数据源配置,linux中文不展示问题

1、官方文档 ODBC Installation and Validation on UNIX Systems | Using the InterSystems ODBC Driver | InterSystems IRIS for Health 2024.1 By default, a full ODBC installation is performed with a standard InterSystems installation. If you perform a custom i…

beego框架_golang web框架_使用介绍

beego简介 beego是一个用于快速开发Go应用的http框架&#xff0c;由Go语言方面的技术大牛设计。beego可以用来快速开发API、Web、后端服务等各种应用&#xff0c;是一个RESTful的框架&#xff0c;主要设计灵感来源于tornado、sinatra、flask这三个框架&#xff0c;但结合了Go本…

《Windows API每日一练》10.3 公用对话框

Windows最初发行时的主要目标之一就是提倡一种标准化的用户界面。对于公用菜单 项来说&#xff0c;这一目标实现得很快。几乎所有的软件制造商都采用了Alt-File-Open组合来打开 文件。但是&#xff0c;真正用来打开文件的对话框却经常很不一样。 从Windows 3.1开始&#xff0c…

【JVM基础02】——组成-程序计数器解读

目录 1- 引言&#xff1a;程序计数器1-1 程序计数器是什么&#xff1f;为什么用程序计数器&#xff1f;(What)(Why) 2- 核心&#xff1a;程序计数器的原理&#xff08;How&#xff09;2-1 使用 javap 查看程序计数器的作用2-2 多线程下程序计数器原理举例 3- 小结&#xff1a;什…

object-C 解答算法:移动零(leetCode-283)

移动零(leetCode-283) 题目如下图:(也可以到leetCode上看完整题目,题号283) 解题思路: 本质就是把非0的元素往前移动,接下来要考虑的是怎么移动,每次移动多少? 这里需要用到双指针,i 记录每次遍历的元素值, j 记录“非0元素值”需要移动到的位置; 当所有“非0元素值”都移…

【C++】错误处理机制

C 提供了多种错误处理机制&#xff0c;用于在程序中检测和处理异常情况。这些机制包括异常处理、错误返回码、断言&#xff08;assert&#xff09;以及其他自定义的错误处理方法。以下是对 C 错误处理机制的详细介绍&#xff1a; 1. 异常处理&#xff08;Exception Handling&a…

vue3前端开发-小兔鲜项目-热门品牌推荐栏目

vue3前端开发-小兔鲜项目-热门品牌推荐栏目&#xff01;这一期内容&#xff0c;大家一定要认真的看完。因为&#xff0c;黑马官方教程视频里面老师没有讲这个&#xff0c;但是内容其实不难。只是按照之前的流程操作就行了。我把自己写好的代码分享给大家。做个参考demo。 第一步…

可用内存为什么可以超过实际内存

一、虚拟CPU和虚拟内存&#xff1a; 1、虚拟cpu&#xff1a; 利用进程机制&#xff0c;所有的现代操作系统都支持在同一时间来完成多个任务。尽管某个时刻&#xff0c;真实的CPU只能运行一个进程&#xff0c;但是从进程自己的角度来看&#xff0c;它会认为自己在独享CPU&…

安科瑞受邀参加2024年杭州建筑电气年会

24年7月4-5日&#xff0c;由杭州市土木建筑学会建筑电气专业委员会主办&#xff0c;中国联合工程有限公司&#xff0c;浙江省建设投资集团股份有限公司工程设计总院&#xff0c;大象建筑设计有限公司承办的2024年杭州建筑电气年会在杭州万华国际酒店隆重举办。杭州市各设计院所…

基于深度学习的超分辨率

基于深度学习的超分辨率&#xff08;Super-Resolution, SR&#xff09;技术旨在从低分辨率&#xff08;Low-Resolution, LR&#xff09;图像中重建出高分辨率&#xff08;High-Resolution, HR&#xff09;图像。超分辨率技术在医疗影像、卫星图像、视频处理、安防监控等领域有着…

服务器数据恢复—RAID5阵列重建重建导致数据丢失的数据恢复案例

服务器数据恢复环境&故障&#xff1a; 一台服务器&#xff0c;有一组由5块硬盘组建的raid5磁盘阵列。 服务器在运行过程中一块有磁盘掉线&#xff0c;由于raid5阵列支持一块磁盘掉线的特性&#xff0c;服务器还在正常工作。不久之后服务器出现故障&#xff0c;管理员在不了…

【洁净室】压缩气体检测参考标准:悬浮粒子、微生物、水油检测

在洁净室&#xff0c;特别是达到ISO 5或更高级别的环境中&#xff0c;维护严格的污染控制是不可或缺的。其中&#xff0c;压缩气体的质量是一个至关重要的潜在污染源。为确保压缩气体不会引入损害洁净室完整性的微粒&#xff0c;适当的气体取样成为了一项核心任务。国际标准ISO…

C2W1.LAB.Vocabulary Creation+Candidates from String Edits

理论课&#xff1a;C2W1.Auto-correct 文章目录 Vocabulary CreationImports and DataPreprocessingCreate Vocabulary法1.集合法法2.词典加词频法Visualization Ungraded Exercise Candidates from String EditsImports and DataSplitsDelete Edit Ungraded Exercise 理论课&…

OpenCV 轮廓检测

在 OpenCV 中&#xff0c;轮廓检测是一种用于查找图像中具有相似颜色或强度的连通像素组的技术&#xff0c;这些像素组通常代表了图像中的物体边缘。轮廓可以用来识别和分割图像中的物体&#xff0c;是计算机视觉应用中的一个重要步骤&#xff0c;如目标识别、形状分析等。 轮…

【中项第三版】系统集成项目管理工程师 | 第 5 章 软件工程① | 5.1 - 5.3

前言 第5章对应的内容选择题和案例分析都会进行考查&#xff0c;这一章节属于技术的内容&#xff0c;学习要以教材为准。 目录 5.1 软件工程定义 5.2 软件需求 5.2.1 需求的层次 5.2.2 质量功能部署 5.2.3 需求获取 5.2.4 需求分析 5.2.5 需求规格说明书 5.2.6 需求变…

NestJS笔记

概述&#xff1a;本篇文章是NestJS笔记&#xff0c;包括了Nest的基本使用、连接数据库、日志操作。 一、NestJS 官方 cli 1. 快速上手 1.1 全局安装 cli npm i -g nestjs/cli1.2 创建项目 nest new [项目名]1.3 查看项目命令 查看 nest 命令 Usage: nest <command>…

使用 JavaScript 实现图片上传

首先&#xff0c;我们需要创建一个包含用于显示图片预览和文件输入的 HTML 页面。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-sc…

Assignments

目录 1、 Assignments.cshtml 1.1、 Content body start 1.2、 <!-- row --> 1.3、 Content body end Assignments.cshtml@{