React Native通过Socket.IO传输Base64图片连接中断如何解决

服务端问题修复 #

1. 调整Socket.IO最大数据包限制 #

Socket.IO默认单包最大为1MB，Base64编码会让图片体积增大1/3，稍大的图片就会超出阈值，服务端会主动断开连接。初始化IO时修改配置：

const io = require('socket.io')(server, {
  maxHttpBufferSize: 10 * 1024 * 1024 // 调整为10MB，可根据实际需求修改
})

2. 修复disconnect事件的致命逻辑错误 #

你当前disconnect事件直接删除了全局connectedAccounts对象，会导致后续所有连接逻辑调用hasOwnProperty时报错，直接触发服务端异常断开连接。修改为仅移除当前断开的socket关联记录：

socket.on('disconnect', () => {
  console.log('\n[ Client Disconnected ]\n', socket.id)
  // 遍历connectedAccounts，移除当前socket.id
  for (const accountId in connectedAccounts) {
    const index = connectedAccounts[accountId].socket_ids.indexOf(socket.id)
    if (index > -1) {
      connectedAccounts[accountId].socket_ids.splice(index, 1)
      // 如果当前账号没有活跃socket，删除该账号记录
      if (connectedAccounts[accountId].socket_ids.length === 0) {
        delete connectedAccounts[accountId]
      }
      break
    }
  }
})

3. 版本兼容校验 #

确认服务端socket.io版本和客户端socket.io-client大版本一致，比如都用4.x版本，版本不兼容是高频断开原因。 #

客户端问题修复 #

1. Socket初始化配置优化 #

初始化时指定websocket传输协议、开启自动重连，避免长轮询导致的传输中断和断连后无法恢复：

this.test = io(endpoint, {
  transports: ['websocket'], // 优先用websocket协议，避免长轮询的不稳定问题
  reconnection: true, // 开启自动重连
  reconnectionAttempts: 10, // 最多重连10次
  reconnectionDelay: 1000, // 重连间隔1秒
  timeout: 20000 // 超时时间20秒
})
// 新增错误事件监听，方便定位问题
this.test.on('error', (err) => {
  console.log('Socket异常：', err)
})

2. 修复Photo组件的sendPic逻辑 #

你当前的sendPic函数定义在函数组件外部，函数组件没有this指向，无法拿到socket实例，调用时会直接报错导致断连。建议将图片Base64存入AsyncStorage后，回到Home页面调用Home内的sendPic方法发送数据，或通过路由参数/全局状态将socket实例传入Photo组件。

3. 修复Home组件的代码错误 #

• sendPic方法内打印的this.state.photoURI改为this.state.photoBase64，Home组件state中没有photoURI字段，避免读取undefined引发异常
• 图片渲染时Image组件的属性是source不是src，修改为：

<Image source={{ uri: `data:image/jpeg;base64,${this.state.displayData}` }} />

• 组件卸载时主动断开socket，避免内存泄漏：

componentWillUnmount() {
  if (this.test) {
    this.test.disconnect()
  }
}

可选优化（大图片场景） #

如果需要传输超过5MB的图片，建议将Base64拆分为1MB左右的分片依次发送，服务端接收完全部分片后拼接再转发，避免单次传输压力过大导致断连。

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