前端实现轮训和长连接

简介

轮训和长连接相关内容可以参考之前的文章消息推送系统。消息推送系统-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];
}
相关推荐
Coffeeee5 分钟前
Labubu很难买?那是因为还没有用Compose来画一个
前端·kotlin·android jetpack
用户34216749055210 分钟前
Java高手速成--吃透源码+手写组件+定制开发教程
前端·深度学习
却尘12 分钟前
当你敲下 `pnpm run dev`,这台机器到底在背后干了什么?
前端·javascript·面试
歪歪10012 分钟前
React Native开发有哪些优势和劣势?
服务器·前端·javascript·react native·react.js·前端框架
却尘15 分钟前
Vite 炸裂快,Webpack 稳如山,Turbopack 想两头要:谁才是下一个王?
前端·面试·vite
北辰alk20 分钟前
React 多组件状态管理:从组件状态到全局状态管理全面指南
前端
葡萄城技术团队31 分钟前
SpreadJS ReportSheet 与 DataManager 实现 Token 鉴权:全流程详解与代码解析
前端
勤劳打代码31 分钟前
触类旁通 —— Flutter 与 React 对比解析
前端·flutter·react native
Mintopia31 分钟前
🧠 可解释性AIGC:Web场景下模型决策透明化的技术路径
前端·javascript·aigc
Mintopia35 分钟前
⚙️ Next.js 事务与批量操作:让异步的世界井然有序
前端·javascript·全栈