为什么单个Socket.IO客户端会触发服务端多次连接日志？

算力阿峰

2026-10-5

问题原因

服务端Socket.IO未配置独立的跨域规则：你仅为Express配置了CORS中间件，该规则对Socket.IO的连接不生效，跨域校验失败时客户端会不断重试发起连接，导致服务端每秒触发连接日志。
React useEffect缺少连接清理逻辑：组件卸载或依赖触发重渲染时，未主动断开上一次创建的Socket连接，旧连接持续触发自动重连、新连接又重复创建，就会出现多次连接的现象。
客户端Socket实例存储方式错误：你将socket变量声明在组件顶层，每次组件渲染都会重新初始化该变量，旧的Socket实例丢失引用无法正常管理状态，也会导致连接异常重连。
额外排查点：若Socket.IO客户端和服务端的大版本不匹配（比如服务端用v4、客户端用v2），也会出现频繁自动重连的问题。

修复方案

第一步：修改服务端Socket.IO的跨域配置

将原有Socket.IO初始化代码替换为带跨域规则的配置：

// 替换原有 const io= socketIo(server)
const io = socketIo(server, {
  cors: {
    origin: "http://localhost:3000", // 替换为你前端实际的访问地址
    credentials: true
  }
})

第二步：优化前端Socket连接逻辑

用useRef存储Socket实例避免渲染丢失，同时为useEffect添加清理函数，在依赖变更/组件卸载时主动断开旧连接：

import { useRef, useEffect } from 'react'
import io from 'socket.io-client'

function 你的组件名() {
  // 用useRef存储Socket实例，避免组件渲染时丢失引用
  const socketRef = useRef(null)

  useEffect(() => {
    // 初始化Socket连接
    socketRef.current = io("http://localhost:5000")
    
    // 清理函数：组件卸载或match变化时，主动断开旧连接
    return () => {
      if (socketRef.current) {
        socketRef.current.disconnect()
        socketRef.current = null
      }
    }
  }, [match])

  // 剩余组件逻辑...
}