前端实现轮训和长连接

简介

轮训和长连接相关内容可以参考之前的文章消息推送系统。消息推送系统-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];
}
相关推荐
excel4 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着4 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友6 小时前
什么是API签名?
前端·后端·安全
会豪8 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子8 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶8 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子8 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_8 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23339 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin9 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js