前端实现轮训和长连接

简介

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

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

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

轮训功能实现

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

}

websocket功能实现

javascript 复制代码
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];
}
相关推荐
无奈何杨15 分钟前
扣子coze的AI工作流搭建技术,开源项目FlowGram流程搭建引擎
前端
ElasticPDF-新国产PDF编辑器25 分钟前
Angular 项目 PDF 批注插件库在线版 API 示例教程
前端·pdf·angular.js
6武729 分钟前
Vue 数据传递流程图指南
前端·javascript·vue.js
jakeswang1 小时前
查询条件与查询数据的ajax拼装
前端·ajax
samuel9181 小时前
axios取消重复请求
前端·javascript·vue.js
三天不学习1 小时前
JiebaAnalyzer 分词模式详解【搜索引擎系列教程】
前端·搜索引擎·jiebaanalyzer
滿1 小时前
Vue 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js
安分小尧2 小时前
[特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
前端·javascript·react.js·typescript·excel
好_快2 小时前
Lodash源码阅读-baseClone
前端·javascript·源码阅读