React Native加密货币交易所App的WebSocket最佳实践与问题咨询

1. 单例WebSocket实例实现 #

你当前的WS类每次实例化都会新建连接，导致外部调用时无法复用已有的连接状态。可以通过私有构造+静态实例实现单例，同时修复消息发送逻辑（避免覆盖onopen回调）：

class WS {
  private static instance: WS;
  webSocket: WebSocket;
  private isConnected = false;
  private messageQueue: string[] = [];
  private messageCallbacks: Array<(event: MessageEvent<any>) => void> = [];
  private errorCallbacks: Array<(event: Event) => void> = [];

  // 私有构造，禁止外部new
  private constructor() {
    this.initWebSocket();
  }

  // 获取单例实例
  public static getInstance(): WS {
    if (!WS.instance) {
      WS.instance = new WS();
    }
    return WS.instance;
  }

  private initWebSocket() {
    this.webSocket = new WebSocket('socket_url');
    this.webSocket.binaryType = 'arraybuffer';

    this.webSocket.onopen = () => {
      this.isConnected = true;
      // 发送连接建立前缓存的消息
      this.messageQueue.forEach(msg => this.webSocket.send(msg));
      this.messageQueue = [];
    };

    this.webSocket.onmessage = (event) => {
      // 触发所有注册的消息回调
      this.messageCallbacks.forEach(cb => cb(event));
    };

    this.webSocket.onerror = (event) => {
      // 触发所有注册的错误回调
      this.errorCallbacks.forEach(cb => cb(event));
    };

    // 自动重连逻辑
    this.webSocket.onclose = () => {
      this.isConnected = false;
      setTimeout(() => this.initWebSocket(), 3000);
    };
  }

  _send(coin: string, type: Subject) {
    const subPackage = new SubscribePackage(`${coin}@${type}`);
    const message = onSendMessageObjNew(subPackage);

    if (this.isConnected) {
      this.webSocket.send(message);
    } else {
      this.messageQueue.push(message);
    }
  }

  _message(callback: (event: MessageEvent<any>) => void) {
    // 支持多个回调，避免覆盖
    this.messageCallbacks.push(callback);
    // 返回移除回调的方法，方便组件清理
    return () => {
      this.messageCallbacks = this.messageCallbacks.filter(cb => cb !== callback);
    };
  }

  _unsubscribe(coin: string, type: Subject) {
    const unsubPackage = new UnsubscribePackage(`${coin}@${type}`);
    const message = onSendMessageObjNew(unsubPackage);
    if (this.isConnected) {
      this.webSocket.send(message);
    }
  }

  _error(callback: (event: Event) => void) {
    this.errorCallbacks.push(callback);
    return () => {
      this.errorCallbacks = this.errorCallbacks.filter(cb => cb !== callback);
    };
  }
}

// 使用方式
const ws = WS.getInstance();

核心改进：

• 单例确保全局只有一个WebSocket连接
• 消息队列处理连接未建立时的发送请求
• 支持多个消息/错误回调，避免覆盖
• 自动重连机制应对网络波动

2. 连接管理方案选择：组件内vs Redux RTQ集中管理 #

优先选择Redux RTQ集中管理，原因如下：

• 资源复用：单连接+集中订阅，避免多连接占用服务器和客户端资源
• 状态统一：所有订阅状态、推送数据都存在Redux缓存中，组件可以直接取用，无需各自维护
• 全局控制：方便实现全局重连、后台暂停订阅等统一逻辑
• 性能更优：RTQ的缓存机制避免重复请求/订阅，减少不必要的网络开销

组件内独立连接的缺点很明显：多连接易触发服务器限流、状态分散难维护、资源浪费严重。

实现思路：用RTQ的createApi定义WebSocket相关的endpoints，比如subscribeCoin、unsubscribeCoin，在组件中通过useMutation触发订阅/取消，推送的数据通过updateQueryData更新缓存。

3. 取消订阅后无法重新订阅的修复 #

你的问题根源有两个：

1. 原_send方法仅在onopen时发送消息，连接已建立后调用_send不会触发发送
2. 每次onSubscribe都覆盖onmessage回调，导致逻辑冲突

修复后的组件代码：

const ws = useMemo(() => WS.getInstance(), []);

useEffect(() => {
  // 注册消息回调（仅一次）
  const removeMessageCb = ws._message(async event => {
    // 注意：判断消息是否属于当前币种，避免处理无关数据
    const data = JSON.parse(event.data);
    if (data.symbol === name) {
      // 数据处理逻辑
    }
  });

  // 注册错误回调（仅一次）
  const removeErrorCb = ws._error(event => {
    if (__DEV__) console.log('error event>>>', event);
  });

  // 焦点监听
  const focusListener = navigation.addListener('focus', () => {
    ws._send(name, Subject.Field);
  });
  const blurListener = navigation.addListener('blur', () => {
    ws._unsubscribe(name, Subject.Field);
  });

  // 初始订阅
  ws._send(name, Subject.Field);

  // 清理函数
  return () => {
    focusListener();
    blurListener();
    ws._unsubscribe(name, Subject.Field);
    removeMessageCb();
    removeErrorCb();
  };
}, [name, navigation, ws]);

额外检查：

• 确认服务器的取消订阅逻辑是否正确，确保取消后允许重新订阅
• 查看WebSocket连接状态，若连接断开，单例的重连逻辑会自动重建连接，无需手动处理

4. 后台线程运行WebSocket操作 #

WebSocket底层连接由原生线程处理，不会阻塞UI，但消息解析、复杂计算可能阻塞JS线程。可以通过以下方式优化：

方案1：Web Worker #

把消息处理逻辑放到Worker线程，避免占用JS主线程：

// worker.js
self.onmessage = (e) => {
  if (e.data.type === 'processCryptoData') {
    const processed = parseAndCalculate(e.data.rawData);
    self.postMessage({ type: 'result', data: processed });
  }
};

function parseAndCalculate(rawData) {
  // 复杂的解析、计算逻辑
  return rawData;
}

组件中使用：

useEffect(() => {
  const worker = new Worker(new URL('./worker.js', import.meta.url));
  
  const removeMessageCb = ws._message(event => {
    // 转发原始消息到Worker处理
    worker.postMessage({ type: 'processCryptoData', rawData: event.data });
  });

  worker.onmessage = (e) => {
    if (e.data.type === 'result') {
      // 更新UI或Redux状态
      setCoinData(e.data.data);
    }
  };

  return () => {
    worker.terminate();
    removeMessageCb();
  };
}, [ws]);

方案2：原生模块（进阶） #

如果Worker满足不了需求，可以开发iOS/Android原生WebSocket模块，在原生线程处理消息，再把结果传递给JS。但开发成本较高，适合性能要求极高的场景。

5. 额外最佳实践 #

• 心跳机制：每隔30s发送ping消息，服务器返回pong，防止连接被防火墙/服务器断开
• 订阅去重：维护全局订阅列表，避免重复发送订阅请求
• 后台节流：App进入后台时取消非必要订阅，前台恢复，减少流量消耗
• 数据防抖：对高频推送的数据做防抖处理，避免频繁更新UI导致卡顿
• 内存泄漏防护：组件卸载时必须清理订阅、移除回调
• 类型定义：用TypeScript严格定义WebSocket消息结构，避免解析错误

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