前端实现轮训和长连接

简介

轮训和长连接相关内容可以参考之前的文章消息推送系统。消息推送系统-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];
}
相关推荐
Pu_Nine_912 分钟前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
東雪蓮☆1 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
脑子慢且灵1 小时前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee
柯南二号1 小时前
【大前端】 断点续传 + 分片上传(大文件上传优化) 的前端示例
前端
前端小超超1 小时前
如何配置capacitor 打包的安卓app固定竖屏展示?
android·前端·gitee
xiaopengbc1 小时前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君2 小时前
React中台系统如何嵌入到业务系统中
前端
Slice_cy2 小时前
不定高虚拟列表
前端
前端AK君2 小时前
React组件库如何在vue项目中使用
前端
Moonbit2 小时前
MoonBit 再次走进清华:张宏波受邀参加「思源计划」与「程序设计训练课」
前端·后端·编程语言