跨平台React库如何在React Native与Web端兼容使用WebSocket？

核心结论 #

可以直接使用全局的WebSocket类，无需手动切换Web/React Native版本：

• React Native的WebSocket完全遵循浏览器标准API，所有方法、事件和属性都和浏览器端一致
• 运行时会自动加载对应环境的实现（浏览器用原生WebSocket，RN用其内置的WebSocket），编译器也能自动识别环境类型（只要配置正确）

TypeScript配置方案 #

不要直接全局暴露DOM类型给所有环境，避免RN端出现类型冲突，推荐两种方式：

方式1：按环境拆分tsconfig #

• 针对Web环境（tsconfig.web.json）：

  {
    "compilerOptions": {
      "types": ["dom", "dom-webscoket"]
    }
  }
  

• 针对React Native环境（tsconfig.rn.json）：

  {
    "compilerOptions": {
      "types": ["react-native"]
    }
  }
  

  可以在package.json里指定不同环境的配置入口，或让用户自行选择对应配置文件。

方式2：动态类型推断 #

直接用typeof WebSocket获取当前环境的类型，避免硬依赖DOM类型：

export function createWebSocket(url: string, protocols?: string | string[]): InstanceType<typeof WebSocket> {
  return new WebSocket(url, protocols);
}

TS会自动根据环境推断正确的WebSocket实例类型，无需额外配置全局类型。

最佳实践 #

• 封装抽象层：写一个统一的WebSocket工具类/函数，把连接、消息监听、重连逻辑封装起来，上层业务代码不用关心底层环境。示例：

  export class WebSocketClient {
    private socket: InstanceType<typeof WebSocket> | null = null;
  
    connect(url: string) {
      this.socket = new WebSocket(url);
      this.socket.onopen = () => console.log('连接成功');
      this.socket.onmessage = (event) => console.log('收到消息:', event.data);
      // 其他事件监听逻辑...
    }
  
    send(data: string | ArrayBufferLike | Blob | ArrayBufferView) {
      this.socket?.send(data);
    }
  
    disconnect() {
      this.socket?.close();
      this.socket = null;
    }
  }
  

• 避免引入RN依赖：绝对不要在代码中import { WebSocket } from 'react-native'，直接使用全局WebSocket即可。这样Web端打包工具不会引入任何React Native相关代码，完全符合你的需求。
• 测试覆盖：分别在Web和RN环境测试核心功能（连接、发送、接收、关闭、错误处理），确保没有环境专属问题。

常见问题说明 #

React Native的WebSocket和浏览器实现并非同一份代码，但API完全对齐，所以只要不使用非标准特性，不会有兼容性问题。如果遇到二进制数据处理等特殊场景，可以针对环境做细微调整，但大部分场景下无需额外处理。

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