React Native中W3CWebSocket跳转聊天页首次连接失败如何解决？

核心原因 #

1. WebSocket 实例化逻辑放在组件顶层，组件首次渲染时就会执行，此时还没调用getID()，logID为初始无效值，拼接出的WS连接地址错误，导致连接失败。
2. 热重载时会复用页面已有状态，logID已经拿到有效值，重新实例化的WS地址正确，因此可以正常连接。
3. 之前将实例化移入useEffect/useFocusEffect未解决，大概率是执行顺序错误（实例化在getID()之前），或是未处理闭包问题导致实例丢失。

修复方案 #

将实例化逻辑移入useFocusEffect回调内，保证先获取到正确的logID再创建连接，同时用useRef存储WS实例避免闭包问题，代码如下：

import { useRef, useState, useCallback } from 'react';
import { useFocusEffect } from '@react-navigation/native';
// 其余导入省略

const ChatPage = () => {
  const [messages, setMessages] = useState([]);
  const clientRef = useRef(null); // 存储WS实例，避免闭包导致的实例访问异常

  useFocusEffect(
    useCallback(() => {
      // 第一步先获取正确的logID
      const logID = getID();
      // 拿到ID后再实例化WebSocket
      clientRef.current = new W3CWebSocket(
        `ws://url:port/api/ws/chat/1/${logID}/`
      );

      clientRef.current.onopen = () => {
        console.log('WebSocket Client Connected');
      };
      
      clientRef.current.onmessage = (message) => {
        const dataFromServer = JSON.parse(message.data);
        if(dataFromServer){
          setMessages(prevMessages => [
            ...prevMessages,
            {msg: dataFromServer.type, sender: dataFromServer.sender},
          ]);
        }
      };

      // 新增错误监听，方便后续排查连接问题
      clientRef.current.onerror = (error) => {
        console.error('WebSocket连接错误: ', error);
      };

      scrollHandler();

      // 页面失焦时清理连接
      return () => {
        scrollHandler();
        if (clientRef.current) {
          clientRef.current.close();
          clientRef.current = null;
        }
      };
    }, [])
    // 若logID来自路由参数，需将logID加入依赖数组，确保切换聊天对象时重建连接
  );

  // 其余页面逻辑省略
}

注意事项 #

• 不要在组件顶层执行WS实例化，组件每次渲染都会创建新的实例，既浪费资源也会导致连接逻辑混乱。
• 如果logID是从路由参数传递过来的，直接从路由对象取值即可，不需要额外调用getID()，同时要把logID加到useCallback的依赖数组中。

内容的提问来源于stack exchange，提问作者Adil Ijaz