记录websocket的使用，实现断网重连和心跳机制。

需求

校园安全告警的项目，其中一个需要实现的功能就是可以实时告警，简单来说，是后台通过接收校园里拾音器的关键词告警以后，推送到前端，前端弹窗提示告警，做出处理。所以采用了webSocket来实现。

基本使用

1. 这里用正则判断url地址的前缀并替换，后面是后台接口地址，最后是用户ID（后台所需参数）

const url = `${baseURL.replace("https://", "ws://").replace("http://", "ws://")}/websocket/api/${userId}`;

2. 然后在useEffect中写入连接，组件销毁的时候再去关闭连接。

// webSocket 连接状态
const [isConnect, setIsConnect] = useState<number>(-1);
const [socket, setSocket] = useState<any>(null);
useEffect(() => {
    const ws = new WebSocket(url);
     setSocket(ws);
     return () => {
         ws.close();
     };
}, []);

3.在新的useEffect中定义各个状态的回调。

useEffect(() => {
   if (socket) {
       //onopen是webSocket连接成功后的回调，可以在这里打印一下，如果成功打印，则代表连接成功
       socket.onopen = () => {
           setIsConnect(1)
       };

       //WebSocket协议只允许字符串或二进制类型的数据传输
       //onmessage是接受到数据后的回调
       socket.onmessage = (data: string) => acceptMessage(data);

       //onclose是连接关闭后的回调。后面均为自定义函数，可以在新的函数里写自己的业务逻辑
       socket.onclose = () => webSocketOnClose();
       socket.onerror = () => webSocketOnError();
   }
}, [socket]);

4.接收消息,在这一步，后台推送消息过来后打印出来，就代表成功接收，可以写自己业务逻辑了。

const acceptMessage = ({ data }: string) => {
    console.log(data)
}

5.前端断网重连功能，场景大概就是如果前端网络中断了以后，websocket就断开了，这时候网络恢复后，是不会自动重连的，所以加上这两个监听就可以实现了。

const initWebSocket = () => {
    const ws = new WebSocket(url);
    setSocket(ws);
    console.log('socket初始化')
}   
// 断网重连
useEffect(() => {
    const handleOnline = () => initWebSocket();
    const handleOffline = () => {
        if (socket) {
            socket.close();
            setIsConnect(0);
        }
    };
    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);
    return () => {
        window.removeEventListener("online", handleOnline);
        window.removeEventListener("offline", handleOffline);
    };
}, [socket]);

6. 心跳机制功能实现。这里是和后端约定好的，我给他发ping，他接受到以后给我返pong，这种情况可以认定是链接成功状态的。因为当时考虑可以用onclose事件去重连。但是会出现一个问题就是，当组件卸载后，链接会关闭，这个时候onclose监听到了，他又会去做个新的链接，会导致后台无效链接越来越多。所以采用了手写心跳的方式。

useEffect(() => {
    if (socket) {
        socket.onopen = () => {
           setIsConnect(1)
        };
        socket.onmessage = (data: string) => acceptMessage(data);
        socket.onclose = () => webSocketOnClose();
        socket.onerror = () => webSocketOnError();

        // 心跳机制 实现思路，每跟后台发一次ping，前端计数+1，后台返回pong,计数清零，如没有返回pong，则计数累加，当计数大于5后，重新链接。
        const heartbeatInterval = setInterval(() => {
            if (socket.readyState === WebSocket.OPEN) {
                 socket.send(`${userId},PING`);
                 setPingNum(() => pingNum + 1)
            }
        }, 5000);
        return () => clearInterval(heartbeatInterval);
    }
}, [socket, pingNum]);

useEffect(() => {
    if (pingNum > 5) {
        initWebSocket();
    }
}, [pingNum])

const acceptMessage = ({ data }: any) => {
    const acceptData = JSON.parse(data);
    if (acceptData === "PONG") {
        setPingNum(0)
    }
}

如有不对的地方，请指正。欢迎大家来一起探讨学习。因为写文章的时候距离实现功能已经有一段时间了，所有有些地方可能记得没那么清楚了。