React Native WebView中Socket.io完全无法工作的问题求助

• 基础环境配置排查
  安卓端如果使用未加密的ws://协议连接socket，先在项目android/app/src/main/AndroidManifest.xml的<application>标签上添加android:usesCleartextTraffic="true"，安卓9及以上版本默认禁止明文网络传输，会直接拦截非加密的ws连接。
  WebView组件必须开启以下核心属性，否则基础网络能力会受限制：

  <WebView
    javaScriptEnabled={true}
    domStorageEnabled={true}
    allowFileAccess={true}
    mixedContentMode="compatibility" // 允许https页面加载ws/http等混合内容
    // 其余业务属性
  />
  

  iOS端如果连接的域名未做HTTPS/WSS适配，需要在Info.plist的NSAppTransportSecurity配置下添加对应域名的ATS例外，否则系统层面会拦截连接。
• Socket.io 客户端配置修正
  RN WebView的网络请求内核和普通移动端浏览器存在差异，Socket.io默认的「先HTTP长轮询握手、再升级Websocket」的逻辑很容易在握手阶段被WebView的跨域规则拦截，直接修改客户端初始化配置，强制使用Websocket传输即可绕开这个问题：

  const socket = io('你的socket服务地址', {
    transports: ['websocket'], // 跳过polling轮询，直接发起websocket连接
    withCredentials: true, // 服务端有跨域Cookie、鉴权校验时开启
    reconnection: true,
    reconnectionAttempts: 5
  })
  

• WebView 拦截规则排查
  如果你给WebView配置了originWhitelist属性，必须将socket服务的域名加入白名单，测试阶段可以临时配置为originWhitelist={['*']}验证连通性，连通后再收窄白名单范围即可，默认配置下非http/https协议的ws请求会被直接拦截。
  如果写了onShouldStartLoadWithRequest请求拦截逻辑，不要拦截socket域名下的所有请求，包括握手阶段的HTTP请求、ws/wss协议的连接请求，很多人写拦截规则时只放行了前端页面域名，误拦socket请求导致连接失败。

调试技巧：在前端页面的socket实例上监听connect_error事件打印具体错误信息，是证书校验失败、请求被拦截还是握手超时，拿到具体错误码可以快速定位问题，不需要盲目改配置。

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