前端实现轮训和长连接

简介

????????轮训和长连接相关内容可以参考之前的文章消息推送系统。消息推送系统-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` milliseconds
            await 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({});

    // 创建websocket连接
    useEffect(() => {
        const ws = new WebSocket(url);
        ws.onopen = () => {
            setConnetState('connected');
        };
        ws.onmessage = (e) => {
            setMsgBuffer([...msgBuffer, e.data]);
            setLastMsg(e.data);
        };
        ws.onclose = () => {
            setConnetState('disconnected');
        };
        return () => {
            ws.close(); // 关闭websocket 连接
        };
    }, []);
    
    return [connetState, msgBuffer, lastMsg];
}