Next.js中Socket.io连接初始化及相关问题咨询

问题1：Socket.io连接方式与旧方法说明 #

• 你用io('/api/socket')连接失败，是因为Socket.io客户端会自动在传入路径后追加/socket.io/后缀，实际请求地址变成ws://localhost:3000/api/socket/socket.io/，但你的服务器端Socket.io并未在该路径监听。而先执行fetch('/api/socket')再调用io()能成功，是因为此时客户端默认连接根路径下的/socket.io/，刚好匹配服务器配置。
• 正确连接方式：如果你的Socket.io服务器通过Next.js的/api/socket路由启动，需确保服务器端配置了对应路径，客户端使用io({ path: '/api/socket/socket.io/' })；或者保留当前fetch+io()的方式，但更规范的做法是直接指定正确路径，无需提前fetch（fetch仅用于触发API路由按需启动Socket.io，非必须步骤）。
• io.connect()是Socket.io v2及更早版本的写法，v3+已统一为io()函数，旧方法确实对应旧版本，目前已废弃，建议使用当前版本的API。

问题2：useEffect初始化Socket.io是否合理 #

在useEffect中初始化Socket.io是完全合理的。React中所有副作用操作（如网络连接、事件监听）都应放在useEffect中，这样能确保组件挂载后再执行连接逻辑，同时可通过依赖项控制连接时机，还能在组件卸载时自动清理连接，符合React的副作用管理规范，这也是所有教程采用该方式的原因。

问题3：Next.js严格模式下的连接与日志问题分析及修复 #

你的代码存在三个核心问题：

1. 全局socket变量污染：socket声明在组件外部，属于全局变量。严格模式下useEffect会执行两次，第一次创建的socket实例未被及时断开（严格模式会先执行两次effect，再触发第一次的清理函数），导致服务器收到两次连接请求。
2. 事件监听累积：每次调用socketInitializer都会给新socket绑定user-joined事件，旧实例的监听未被清理，多次进出组件后事件监听重复累积，导致日志数量翻倍。
3. 清理函数失效：第一次effect的清理函数执行时，socket已被第二次的实例覆盖，无法断开第一次创建的socket，所以服务器看不到断开日志。

修复后的代码：

import { useRouter } from 'next/router'
import { useEffect, useRef } from 'react'
import { io, Socket } from 'socket.io-client'
import { DefaultEventsMap } from '@socket.io/component-emitter'

const RoomPage = () => {
  const router = useRouter()
  const { room } = router.query
  // 用useRef保存socket实例，避免全局污染
  const socketRef = useRef<Socket<DefaultEventsMap, DefaultEventsMap> | null>(null)

  const leaveRoomHandler = () => {
    router.push('/rooms')
  }

  useEffect(() => {
    if (!room) return

    const initSocket = async () => {
      await fetch('/api/socket')
      const socket = io()
      socketRef.current = socket

      socket.on('user-joined', (msg) => {
        console.log(msg)
      })

      socket.emit('join-room', room)
    }

    initSocket()

    return () => {
      // 断开连接并移除事件监听，避免内存泄漏
      socketRef.current?.off('user-joined')
      socketRef.current?.disconnect()
      socketRef.current = null
    }
  }, [room])

  return (
     <>
      <h2>Room {room}</h2>
      <button onClick={leaveRoomHandler}>Leave room</button>
    </>
   )
}

export default RoomPage

修复说明：

• 使用useRef存储socket实例，确保每个组件实例拥有独立的socket，避免全局变量覆盖问题。
• 清理函数中不仅断开连接，还主动移除事件监听，防止监听累积。
• 将初始化逻辑放在useEffect内部，避免外部函数的依赖冲突。
• 严格模式下，第二次effect执行后会触发第一次的清理函数，断开第一个socket实例，服务器仅会收到一次有效连接（严格模式的重复执行仅存在于开发环境，生产环境不会出现）。

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