websocket导致的setState不更新页面(useState)_websocket不更新数据-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38499019/article/details/126486987

当在直播页面使用WebSocket接收服务端数据并更新状态时，从该页面切换到其他页面再返回，页面无法动态刷新。原因是WebSocket连接未在离开页面时关闭，导致返回时无法重新初始化。解决方法是在组件卸载时关闭WebSocket连接，确保每次进入页面时能正确初始化WebSocket实例，从而实现页面的动态刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：
直播页面，使用websocket来接收服务端传过来的数据，然后根据该数据，调用useState的第二个参数，
来更新state。
正常的时候是可以的。state被更新，页面被刷新。
但是，当我们去另外一个页面，然后再返回该页面。页面不会动态刷新了。
原因：
问题的原因为，页面去另一个页面的时候，页面并没有彻底关闭websocket连接。再下一次返回该页面的时候，进行判断，导致没有重新初始化实例。

const A = () => {
  if(websocket.clientConn) {
  		return;
  }
  const wsConn = `${LIVE_BROADCAST_WS_URL}?username=${encodeURI(name)}&role=presenter&group=${experimentRoomId}`;
  websocket.initConnection(wsConn, async(res:any) => {
    switch (res.id) {
      case "get_all_viewers":
        B(res);
        break;
    }
  }
}

const B = (res:any)=> {
    let viewerList: Viewer[] = [];
  
    setViewers([...viewers, ...viewerList]);
}

解决办法：
退出页面的时候，关闭websocket连接。

useEffect(() => {
    kmsGlobal?.dispose();

    return () => {
      destroy();
      // 关闭websocket连接
      websocket.destroyResources()
    };
  }, []);

其中，destroyResources方法为：

destroyResources: () => {
    // 关闭并销毁连接
    if (ws.clientConn) {
      ws.clientConn.close();
      // 赋值为空，否则即使close也有值
      ws.clientConn = undefined;
    }
    // 销毁心跳定时器
    if (ws.pongInterval) {
      clearInterval(ws.pongInterval);
    }
    // 销毁重连定时器
    if (ws.reconnectTimeout) {
      clearTimeout(ws.reconnectTimeout);
    }
}