前端实现轮训和长连接

简介

        轮训和长连接相关内容可以参考之前的文章消息推送系统。消息推送系统-CSDN博客文章浏览阅读106次。在餐饮行业中,店内应用有pos、厨显屏等,云端应用为对应数据中心。为了实现云端数据和操作指令下发到店内应用,需要有一个系统实现这个功能。https://blog.csdn.net/qq_37011724/article/details/133490117        websocket -> 实时,性能高,会断连丢数据。

        轮训 -> 近实时,性能低,有重试&确认不会丢数据。 

        本文将会通过js 实现轮训 和 websocket 长连接功能。 

轮训功能实现

/*** 定时循环执行某个方法*/
async function loop(func, delayTime) {while (true) {try {func();// block for `delay` millisecondsawait new Promise(resolve => setTimeout(resolve, delayTime));} catch (e) {console.log(e)}}}

websocket功能实现

export const useWebSocketHook = (url) => {// websocket连接状态const [connetState, setConnetState] = useState('disconnected');// 消息列表const [msgBuffer, setMsgBuffer] = useState([]);// 最新消息const [lastMsg, setLastMsg] = useState({});const [ws, setWs] = useState(new WebSocket(url));/*** 创建websocket client*/// 创建websocket连接useEffect(() => {ws.onopen = () => {setConnetState('connected');};ws.onmessage = (e) => {setMsgBuffer([...msgBuffer, e.data]);setLastMsg(e.data);};ws.onclose = () => {setConnetState('disconnected');// websocket 重连setWs(new WebSocket(url))};return () => {ws.close(); // 关闭websocket 连接};}, [ws]);return [connetState, msgBuffer, lastMsg];
}

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

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

相关文章

配置DNS主从服务器,实现真反向解析

主服务器 [rootbogon ~]# systemctl stop firewalld.service #关闭防火墙 [rootbogon ~]# setenforce 0 #关闭selinux [rootbogon ~]# systemctl restart named #启动dns服务 [rootbogon ~]# vim /etc/named.conf #进入dns配置文件 options {#监听…

2023年12月 电子学会 青少年软件编程等级考试Scratch三级真题

202312 青少年软件编程等级考试Scratch三级真题 一、单项题 第 1 题 运行左图程序,想得到右图中的效果,红色框应填写的数值是?( ) A:12 B:11 C:10 D:9 第 2 题 下列…

每天都美好的一天

每天我们都会遇到不同的事情,开心的、愤怒的、悲伤的等等,今天过完明天我们还得继续,所以一切又显得不那么重要。一天中如果有不开心的事情发生会影响我们当天很长一段时间,甚至未来几天。 今天所做之事都是自己明天的基础&#…

修改live server的默认浏览器(vscode)

在插件打开设置 修改选定浏览器

VC++中使用OpenCV进行颜色检测

VC中使用OpenCV进行颜色检测 在VC中使用OpenCV进行颜色检测非常简单,首选读取一张彩色图像,并调用函数cvtColor(img, imgHSV, COLOR_BGR2HSV);函数将原图img转换成HSV图像imgHSV,再设置好HSV三个分量的上限和下限值,调用inRange函…

C++实现一个简单的学生管理系统

目录 1.一个简单的学生管理系统简介 2.定义一个 Student 类 2.1用于表示学生信息。 3.定义一个 StudentManager 类 3.1用于管理学生信息。 4.在 main 函数中 4.1使用上述两个类来实现一个简单的学生管理系统 5.C类模板 推荐阅读: calloc与realloc和malloc的…

多线程(看这一篇就够了,超详细,满满的干货)

多线程 一.认识线程(Thread)1. 1) 线程是什么1. 2) 为啥要有线程1.3) 进程和线程的区别标题1.4) Java的线程和操作系统线程的关系 二.创建线程方法1:继承Thread类方法2:实现Runnable接口方法3:匿名内部类创建Thread子类对象标题方法4:匿名内部类创建Runn…

MySQL TINYINT(1)和TINYINT(2)有什么区别?

文章目录 1.直接建表2.查询数据3.总结 身为程序员,拿事实说话拿代码说话最直观了,show the code 1.直接建表 CREATE TABLE tinyinttest (id int NOT NULL,a TINYINT(1) NOT NULL DEFAULT 0,b TINYINT(2) NOT NULL DEFAULT 0,c TINYINT(1) ZEROFILL NOT…

Unity下实现跨平台的RTMP推流|轻量级RTSP服务|RTMP播放|RTSP播放低延迟解决方案

2018年,我们开始在原生RTSP|RTMP直播播放器的基础上,对接了Unity环境下的低延迟播放,毫秒级延迟,发布后,就得到了业内一致的认可。然后我们覆盖了Windows、Android、iOS、Linux的RTMP推送、轻量级RTSP服务和RTSP|RTMP播…

VRRP协议负载分担

VRRP流量负载分担 VRRP负载分担与VRRP主备备份的基本原理和报文协商过程都是相同的。同样对于每一个VRRP备份组,都包含一个Master设备和若干Backup设备。与主备备份方式不同点在于:负载分担方式需要建立多个VRRP备份组,各备份组的Master设备可以不同;同一台VRRP设备可以加…

ctfshow信息收集(web1-web20)

目录 web1 web2 web3 web4 web5 web6 web7 web9 web10 web11 web14 web15 web16 web17 web18 web19 web20 web1 根据提示的孩子开发的时候注释没有被及时删除 web2 js原因无法查看源代码 第一种方法 在url前加入 view-source: 会显示页面源代…

【车载HMI开发工具--EB GUIDE 与 Unity 合作提供一体化的沉浸式 HMI 设计开发工具链】【转载】

随着车载高性能计算平台的日益普及以及显示器尺寸和数量的不断增加,沉浸式车载人机交互界面(HMI)的需求也在持续增长。为了将实时 3D 技术带入车载 HMI 领域,Unity 与 Elektrobit (EB)展开了合作,EB 是推进 HMI 功能安…

洛谷(CodeForces)历年愚人节题目,难度普及+/提高,让你怀疑自己智商

INTERCALC 题目描述 DO YOU EXPECT ME TO FIND THIS OUT? WHAT BASE AND/XOR LANGUAGE INCLUDES string? DON’T BYTE OF MORE THAN YOU CAN CHEW YOU CAN ONLY DISTORT THE LARGEST OF MATHEMATICS SO FAR SAYING “ABRACADABRA” WITHOUT A MAGIC AND WON’T DO YOU …

更新Ubuntu并同步网络时间

ubuntu环境搭建专栏🔗点击跳转 Ubuntu系统环境搭建(九)——更新Ubuntu并同步网络时间 文章目录 Ubuntu系统环境搭建(九)——更新Ubuntu并同步网络时间1.更新Ubuntu1.1 查看ubuntu版本和详细信息1.2 创建root用户1.3 更…

蓝桥杯练习题(十二)

📑前言 本文主要是【算法】——蓝桥杯练习题(十二)的文章,如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介:大家好,我是听风与他🥇 ☁️博客首页:CSDN主页听风与他…

黑马程序员-瑞吉外卖-day4

实现账号的启动禁止 EmployeeController PutMappingpublic R<String> update(RequestBody Employee employee){employeeService.updateById(employee);return R.success("员工信息修改成功");} 出错 解决 common目录下 引入JacksonObjectMapper package com…

AI绘画Stable Diffusion进阶使用

本文讲解&#xff0c;模型底模&#xff0c;VAE美化模型&#xff0c;Lora模型&#xff0c;hypernetwork。 文本Stable Diffusion 简称sd 欢迎关注 使用模型 C站&#xff1a;https://civitai.com/ huggingface&#xff1a;https://huggingface.co/models?pipeline_tagtext-to-…

怎么移除WordPress后台工具栏的查看站点子菜单?如何改为一级菜单?

默认情况下&#xff0c;我们在WordPress后台想要访问前端网站&#xff0c;需要将鼠标移动到左上角的站点名称&#xff0c;然后点击下拉菜单中的“查看站点”才行&#xff0c;而且还不是新窗口打开。那么有没有办法将这个“查看站点”子菜单变成一级菜单并显示在顶部管理工具栏中…

Vulnhub靶机:FunBox 2

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;FunBox 2&#xff08;10.0.2.27&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://download.vulnhub.com/funbo…

基于Servlet建立表白墙网站

目录 一、设计思想 二、设计表白墙页面&#xff08;前端--VSCode&#xff09; 1、效果图 2、html部分&#xff08;网页上有哪些内容&#xff09; 3、css部分&#xff08;页面内容的具体样式&#xff09; 4、js部分&#xff08;页面行为&#xff09; 三、借助Servlet实现客…