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.rhkb.cn/news/355553.html

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

相关文章

Day 44 Ansible自动化运维

Ansible自动化运维 几种常用运维工具比较 ​ Puppet ​ —基于 Ruby 开发,采用 C/S 架构,扩展性强,基于 SSL,远程命令执行相对较弱ruby ​ SaltStack ​ —基于 Python 开发,采用 C/S 架构,相对 puppet 更轻量级,配置语法使用 YAML,使得配置脚本更简单 ​ Ansible ​ —基于 …

海康充电桩报文校验TCP校验和

1 TCP校验文档校验文档要求&#xff1a; 校验码描述 校验码计算范围包含包头标识、消息头和消息体&#xff0c;校验算法采用 TCP 和校验&#xff0c;具体规则如下。 将待校验的所有数据分为 16 位的字&#xff08;大端序&#xff09;&#xff0c;如果总长度为奇数个字节&#…

测试的基础知识大全【测试概念、分类、模型、流程、测试用例书写、用例设计、Bug、基础功能测试实战】

测试基础笔记 Day01阶段⽬标⼀、测试介绍⼆、测试常⽤分类2.1 阶段划分单元测试集成测试系统测试验收测试 2.2 代码可⻅度划分⿊盒测试&#xff1a;主要针对功能&#xff08;阶段划分->系统测试&#xff09;灰盒测试&#xff1a;针对接⼝测试&#xff08;阶段划分->集成测…

【CPP】选择排序:冒泡排序、快速排序

目录 1.冒泡排序简介代码分析 2.快速排序2.1霍尔版本简介代码分析 2.2挖坑版本2.3前后指针版本2.4非递归的快排思路代码 什么是交换排序&#xff1f; 基本思想&#xff1a;所谓 交换&#xff0c;就是根据序列中两个记录键值的比较结果来对换这两个记录在序列中的位置&#xff0…

Photoshop揭秘:图像处理领域的领军软件

Photoshop 是一款由 Adobe 企业开发的图像处理软件&#xff0c;也被大家简称为 PS。在广告设计、摄影后期、数字绘画、网页设计等各个领域都得到了广泛的应用&#xff0c;是目前业界最受欢迎的图像处理软件之一。作为一款图像处理软件&#xff0c;Photoshop 为设计者提供了许多…

爆火的AI姓名头像号篇篇10w+, 流量主赚麻了...

最近二师兄在刷公众号时&#xff0c;看到一个非常有趣的账号。简单又“暴li”。 几乎篇篇10w。点击去一看&#xff0c;内容也是非常极简&#xff0c;利用姓氏生成头像。一个字都不多。 几乎每篇文末都有广告&#xff0c;一篇10w按照800来算&#xff0c; 一个月大概 ~~一七得七、…

华为手机怎么找回删除的照片?掌握3个方法,恢复不是梦

由于误删、设备故障、软件更新等原因&#xff0c;我们有时可能会不慎丢失这些宝贵的照片。当面对空空如也的相册时&#xff0c;那种失落感无法言喻。华为手机该怎么找回删除的照片呢&#xff1f;但是&#xff0c;请不要绝望&#xff01;在科技的帮助下&#xff0c;我们可以采取…

threejs 光影投射-与场景进行交互(六)

效果 场景中有三个立方体,三种颜色.点击变成红色,再点恢复自身原有颜色 代码 import ./style.css import * as THREE from three import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { log } from three/examples/jsm/nodes/Nodes.js//…

NGINX_十二 nginx 地址重写 rewrite

十二 nginx 地址重写 rewrite 1 什么是Rewrite Rewrite对称URL Rewrite&#xff0c;即URL重写&#xff0c;就是把传入Web的请求重定向到其他URL的过程。URL Rewrite最常见的应用是URL伪静态化&#xff0c;是将动态页面显示为静态页面方式的一种技术。比如 http://www.123.com…

基于淘宝商城用户购物行为数据分析系统

摘 要 在电商行业高速发展的今天&#xff0c;用户购物行为数据量呈指数型增长&#xff0c;传统的数据处理架构已经无法满足于现如今的数据处理需求。针对于这样的需求本课题设计了一种基于淘宝的用户购物行为分析系统&#xff0c;旨在通过对大量数据进行分析处理进而深入研究用…

视频剪辑技巧大揭秘:轻松掌握为视频添加梦幻光晕效果的绝妙方法!

在这个视觉盛宴的时代&#xff0c;每一个画面都渴望被赋予独特的魅力与魔法。今天&#xff0c;我要为你揭秘一个神秘的视频剪辑技巧——给视频添加光晕效果&#xff0c;让你的作品瞬间脱颖而出&#xff0c;成为朋友圈的焦点 首先&#xff0c;你可以打开原视频进行查看。此时&am…

【Kafka】Kafka生产者数据重复、数据有序、数据乱序-07

【Kafka】Kafka生产者数据重复、数据有序、数据乱序-07 1. 数据重复1.1 数据传递语义1.2 幂等性1.2.1 如何开启幂等性1.2.2 同一个消息&#xff0c;多个分区都会存在吗&#xff1f; 1.3 事务1.3.1 Kafka 事务原理1.3.2 Kafka事务的作用和意义作用具体应用场景 2. 数据有序3. 数…

FP7195做大功率钓鱼灯应用方案,0.1%深度无极无频闪调光调色应用,调光曲线顺滑无突兀

文章目录 文章目录 方案背景 一、夜钓灯电路框架 二、FP7195芯片介绍 芯片参数 总结 方案背景 目前夜钓正在逐渐变得时尚起来&#xff0c;随着夜钓群体的年轻化&#xff0c;人们对于夜钓灯的审美要求也越来越高。夜钓灯作为夜间钓鱼的重点装备&#xff0c;不仅仅需要高质量的光…

足底筋膜炎的症状

足底筋膜炎是足底的肌腱或者筋膜发生无菌性炎症所致&#xff0c;其症状主要包括&#xff1a; 1、疼痛&#xff1a;这是足底筋膜炎最常见和突出的症状。疼痛通常出现在足跟或足底近足跟处&#xff0c;有时压痛较剧烈且持续存在。晨起时或长时间不活动后&#xff0c;疼痛感觉尤为…

重生奇迹MU整理装备注意事项

想成为奇迹MU的顶尖玩家&#xff0c;整理装备是必不可少的一项技能。在这篇文章中&#xff0c;我们将为您分享一些整理装备的注意事项与技巧&#xff0c;帮助您在游戏中更好地管理装备&#xff0c;提升你的实力。 整理装备&#xff0c;须知几点 整理装备是每位玩家必须完成的…

Scikit-Learn梯度提升决策树(GBDT)

Scikit-Learn梯度提升决策树 1、梯度提升决策树(GBDT)1.1、Boosting方法1.2、GBDT的原理1.3、GBDT回归的损失函数1.4、梯度下降与梯度提升1.5、随机森林与GBDT1.6、GBDT的优缺点2、Scikit-Learn梯度提升决策树(GBDT)2.1、Scikit-Learn GBDT回归2.1.1、Scikit-Learn GBDT回归…

GNSS边坡监测站

TH-WY1随着科技的飞速发展&#xff0c;各种先进的监测技术不断涌现&#xff0c;为边坡安全监测提供了有力保障。其中&#xff0c;GNSS边坡监测站以其高精度、实时性强的特点&#xff0c;受到了广泛关注。 GNSS边坡监测站&#xff0c;全称为全球导航卫星系统边坡监测站&#xf…

3D Gaussian Splatting Windows安装

0.安装C++ 编译器 https://aka.ms/vs/17/release/vs_buildtools.exe 1.下载源码 git clone https://github.com/graphdeco-inria/gaussian-splatting --recursive 2.安装cuda NVIDIA GPU Computing Toolkit CUDA Toolkit Archive | NVIDIA Developer 3.安装COLMAP

卓越的 App UI 风格引领潮流

卓越的 App UI 风格引领潮流

【C++】哈希的概念及STL中有关哈希容器的使用

目录 前言一、unordered系列关联式容器1.1 标准库中的unordered_set1.1.1 unordered_set的介绍1.1.2 unordered_set的常用接口说明1.1.2.1 unordered_set对象的常见构造1.1.2.1.1 [无参构造函数](https://legacy.cplusplus.com/reference/unordered_map/unordered_map/)1.1.2.1…