WebSocket实现消息实时通知

参考文档:万字长文,一篇吃透WebSocket:概念、原理、易错常识、动手实践、WebSocket 教程

1 背景

有一个需求,需要实现实时通信的功能,如果有新消息,后端会主动发送请求告知前端有新消息,需要前端展示该新消息。

目前HTTP协议的话,只能支持客户端向服务器发出请求,服务器返回查询结果,做不到服务器主动向客户端推送信息。

或者,前端考虑定时向服务端发送请求(轮询),来判断是否有新消息,但是这种方式不太灵敏,而且可能前端发送的无用请求会很多。轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。

所以考虑WebSocket,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

2 短轮询 & 长轮询

短轮询:服务器收到请求不管是否有数据都直接响应 http 请求。

长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。

在这里插入图片描述

在这里插入图片描述

3 WebSocket概念

(1) Websocket 使用 ws 或 wss 的统一资源标志符(URI),其中 wss 表示使用了 TLS 的 Websocket。

如:

ws://echo.websocket.org
wss://echo.websocket.org

(2)创建链接的方式,WebSocket MDN

const websocket = new WebSocket(url[, protocols])

(3)常用事件

WebSocket.onclose:用于指定连接关闭后的回调函数。

WebSocket.onmessage:用于指定当从服务器接受到信息时的回调函数。

WebSocket.readyState:链接状态

  • 0 (WebSocket.CONNECTING):正在链接中

  • 1 (WebSocket.OPEN):已经链接并且可以通讯

  • 2 (WebSocket.CLOSING):连接正在关闭

  • 3 (WebSocket.CLOSED):连接已关闭或者没有链接成功

4 使用

useEffect(() => {// 1. 创建websockets对象,参数为服务器websockets地址const websockets = new WebSocket(`wss://${window.location.host}/ws/inner/message/start`);console.log('websockets:', websockets);// 2. 监听接收消息的情况websockets.onmessage = (res) => {console.log('onmessage:', res);// 信息处理const msg = JSON.parse(res?.data);const url = msg?.id ? `${basePath}/message-center?id=${msg?.id}` : `${basePath}/message-center`;notification.info({message: 'New Message',description: (<>{msg?.title} <a onClick={() => history.push(url)}>read more</a ></>),});if (msg?.id) {// id存在的情况下,说明是新信息,当点击read more进入消息中心页面的时候,需要直接弹窗显示最新信息;否则表示刚进入页面时候的欢迎信息store.dispatch(setMessageData({ newMessageItem: msg }));}// 重新获取未读的信息数量runUnreadMessageList();};return () => {websockets.close();};}, []);

链接成功后,弹出消息提示:
在这里插入图片描述

websocket对象和onmessgae截图:

在这里插入图片描述

控制台截图:

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

改进YOLOv7 | 在 ELAN 模块中添加【Triplet】【SpatialGroupEnhance】【NAM】【S2】注意力机制 | 附详细结构图

改进 YOLOv7 | 在 ELAN 模块中添加【Triplet】【SpatialGroupEnhance】【NAM】【S2】注意力机制&#xff1a;中文详解 1. 简介 YOLOv7 是目前主流的目标检测算法之一&#xff0c;具有速度快、精度高的特点。但 YOLOv7 的原始模型结构中缺乏注意力机制&#xff0c;导致模型对全…

Matlab基础语法:变量和数据类型,基本运算,矩阵和向量,常用函数,脚本文件

目录 一、变量和数据类型 二、基本运算 三、矩阵和向量 四、常用函数 五、脚本文件 六、总结 一、变量和数据类型 Matlab 支持多种数据类型&#xff0c;包括数值类型、字符类型和逻辑类型。掌握这些基本的变量和数据类型&#xff0c;是我们进行数学建模和计算的基础。 数…

嵌入式软件stm32面试

一、STM32的内核型号有哪些&#xff1f; STM32系列是STMicroelectronics&#xff08;意法半导体&#xff09;生产的基于ARM Cortex-M内核的微控制器产品线。这些产品按照不同的内核架构和性能特点分为了主流产品、超低功耗产品和高性能产品。 1.1 主流产品 STM32F0 系列&…

利用sortablejs实现拖拽排序

import Sortable from "sortablejs";created() {//禁止火狐拖拽进行搜索document.body.ondrop function(event){event.preventDefault();event.stopPropagation();}}// 打开对话框的时候调用下openCustomDialog(){this.rowDrop()}// 行拖拽 rowDrop() {this.$nextTi…

Linux工具(包含sudo提权与vim快捷配置)

目录 什么是软件包 查看软件包 如何安装软件 1.官方yum源下载 2.扩展yum源下载 如何卸载软件 补充知识如何将普通用户加入白名单 补充知识rzsz vim编辑器 1.命令模式&#xff08;进入默认为这个模式&#xff09;用户所有的输入都会被当成命令 2.插入模式 3.底行模…

SpringCloud Maven多模块项目导包

目录 一、父项目配置 二、配置子项目 三、Maven执行 四、运行Jar包 一、父项目配置 所有父项目均需确保配置了 <packaging>pom</packaging> 因为Maven某人的打包方式是 <packaging>jar</packaging> 二、配置子项目 仅在有SpringBoot启动类的…

Qt Designer 中设置信号与槽,QT5的四种编辑模式

目录 QT5的四种编辑模式 Qt Designer 中设置信号与槽 Qt Designer 中设置信号与槽 QT5的四种编辑模式 在QT5中,特别是在使用Qt Designer进行界面设计时,存在多种编辑模式以满足不同的开发需求。以下是对QT5中四种主要编辑模式的详细解释: 控件编辑模式(Edit Widgets):…

速盾:cdn高防免备案

云计算和互联网技术的发展&#xff0c;带来了无数便利和机遇&#xff0c;但也带来了各种网络安全威胁。网站被黑、DDoS攻击、敏感信息泄露等问题&#xff0c;给企业和个人带来了巨大的损失和风险。因此&#xff0c;保护网络安全成为了当务之急。 CDN&#xff08;Content Deliv…

【PHP项目实战训练】——使用thinkphp框架对数据进行增删改查功能

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

Python网页爬虫爬取豆瓣Top250电影数据——Xpath数据解析

Python网页爬虫爬取豆瓣Top250电影数据——Xpath数据解析 将使用Python网页爬虫爬取豆瓣电影Top250的电影数据&#xff0c;网页解析方法使用xpath。 获取数据后会将数据保存到CSV文件中。一、分析网页&#xff0c;初步获取信息 1.1 查看原页面信息 首先打开豆瓣Top250电影页…

操作系统期末快速复习(概念)

文章目录 第一章&#xff1a;操作系统引论操作系统的目标是什么&#xff1f;分时系统是什么&#xff1f;实时系统是什么&#xff1f;分时系统和实时系统的比较操作系统的基本特征是什么&#xff1f;操作系统的主要功能&#xff1f;***重要第二章&#xff1a;进程管理程序的顺序…

【编译报错】syntax error near unexpected token `(‘

背景&#xff1a; 在android.bp中是这样写的 cflags: ["-DEXPORT__attribute__((visibility(\"default\")))","-D__ANDROID_VNDK__",],想转换成android.mk&#xff1a; LOCAL_CFLAGS : -DEXPORT__attribute__((visibility("default")…

ClassCastException(类转换异常)可能原因和解决方法总结

ClassCastException(类转换异常)可能原因和解决方法总结 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;ClassCastException是Java中常见的异常之一&#xff0c…

Ant design Vue 表格中显示不同的状态(多条件显示)

比如&#xff1a;后端一个字段有多种状态&#xff1a; 那么后端接口会返回&#xff1a;0 或者 1 或者 2 其中一个&#xff0c;前端需要展示的是对应的文字&#xff0c;像简单的只有两个状态的可以直接在列里面操作&#xff1a; {title: 状态,dataIndex: usable,customRender: …

Windows10任务栏卡顿解决方案

一、重新启动任务资源管理器 右键底部任务栏选择“任务管理器”&#xff1b;按快捷键“CtrlShiftEsc”&#xff1b;搜索框搜索“任务管理器”并单击“打开”&#xff1b;“WinX”打开开始菜单附属菜单&#xff0c;在列表中选择“任务管理器” &#xff1b;按下“ctrlaltdelete”…

网上考试系统设计文档

网上考试系统设计文档 1. 引言 1.1 目的 本设计文档旨在为“网上考试系统”的开发提供详细的指导方案。系统旨在提供一个全面的在线考试平台&#xff0c;支持在线考试、考试管理以及系统设置等功能&#xff0c;以满足教育机构和教师对考试流程的高效管理和优化需求。 1.2 范…

黄仁勋子女经历曝光:不卷名校,加入英伟达前开餐厅当厨子...

上周&#xff0c;黄仁勋脱下他那标志性的皮夹克&#xff0c;换上黑黄色的学位服&#xff0c;面对加州理工大学近600名毕业生发表演讲。 他提到&#xff0c;“忍受痛苦、应对挫折和看到机遇是我的超能力。” 面对美国媒体的采访&#xff0c;他多次回忆起自己充满逆境的童年&am…

【numpy】知识点和内容的详细解答-2024年6月21日

用户: ∗∗ 在 NumPy 中&#xff0c;ndarray 对象&#xff08;即多维数组&#xff09;要求数组中所有元素的类型必须相同&#xff08;因为所有元素的类型都必须相同&#xff0c;具有了一定的同一性&#xff0c;这就在最大程度上面优化了内存和计算效率&#xff09;&#xff0c;…

【SQL】drop、delete 与 truncate 的区别

在数据库管理中&#xff0c;DROP、DELETE 和 TRUNCATE 是用于删除数据或表的命令&#xff0c;但它们有不同的用途和效果。以下是它们的详细区别&#xff1a; 1. DROP DROP 语句用于删除整个数据库对象&#xff08;如表、视图、索引等&#xff09;。一旦对象被删除&#xff0c…

ipython一些使用方法

使用自动补全和Tab键&#xff1a; IPython 提供了强大的自动补全功能。当你开始键入一个变量名或函数名时&#xff0c;按下 Tab 键会显示可能的补全选项。如果有多个选项&#xff0c;再次按下 Tab 键会列出所有选项。使用历史命令&#xff1a; 你可以使用 %history 命令查看之前…