React Native项目集成socket.io-client 4.5.1报websocket连接错误

问题背景 #

开发聊天应用时使用^4.5.1版本socket.io客户端，运行时出现报错：

websocket error

原有连接实现代码：

import {io} from 'socket.io-client';
import {server} from 'store/config';

export const connectSocket = (token: string, eventId: string) => {
  const socket = io(server.stageSocketUrl, {
    transports: ['websocket', 'polling'],
  });

  socket.on('connect', () => {
    console.log('connected');
    socket.emit('join', {
      authorization: `Bearer ${token}`,
      eventId,
    });
  });

  socket.on('connect_error', err => {
    console.log(err, 'connect error');
  });
  return {socket};
};

测试确认：将socket.io-client降级到^2.2.0版本，相同代码可正常连接服务端。需要实现v4.5.1版本客户端的正常WebSocket连接。

根因 #

Socket.IO v2和v4大版本默认协议不兼容：v2基于Engine.IO v3协议，v4基于Engine.IO v4协议，两个协议版本默认不互通，是v2能连、v4连不上的核心原因。

配置方案 #

根据服务端版本选择对应处理方式：

• 服务端为v2.x版本、暂无法升级服务端
  客户端初始化时添加allowEIO3: true配置，开启对Engine.IO v3协议的兼容。推荐将鉴权、业务标识参数移入auth字段，在握手阶段直接携带，避免连接建立后再发事件被服务端拦截断开。
  修正后的初始化代码：

  const socket = io(server.stageSocketUrl, {
    transports: ['websocket', 'polling'],
    allowEIO3: true, // 开启v2版本服务端兼容
    auth: {
      authorization: `Bearer ${token}`,
      eventId
    }
  });
  
  // 原有事件监听逻辑可按需保留
  socket.on('connect', () => {
    console.log('connected');
    // 若服务端要求必须通过join事件上报业务参数，可保留对应emit逻辑
  });
  
  socket.on('connect_error', err => {
    console.log(err, 'connect error');
  });
  

• 服务端已为v4.x版本仍报错
  逐项排查以下配置项：
  • 检查服务端CORS配置：v4对跨域校验更严格，需在服务端配置中允许前端源地址，开启凭证携带权限
  • 核对连接路径：v4默认连接路径为/socket.io/，如果服务端自定义了path值，客户端初始化时必须传入完全一致的path参数
  • 检查反向代理配置：如果服务端前部署了Nginx、API网关等代理层，需确认代理已开启WebSocket协议升级支持，未拦截Upgrade、Connection等WebSocket握手必需的请求头
• 长期最优方案
  将服务端Socket.IO版本升级到v4.x，和客户端大版本保持对齐，无需额外兼容配置，连接稳定性和功能支持更完善。

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