Next.js+Node.js开发游戏时Socket.IO连接多次触发问题

核心问题：Socket实例被多次创建 #

你遇到的多次连接问题，主要是因为Next.js开发模式下的模块重复执行/热重载，加上你在模块级别直接创建Socket实例，导致多个Socket连接被初始化：

• Next.js开发环境默认开启Strict Mode，会触发组件双重渲染；同时热重载机制会在代码变更时重新加载模块，你的Socket实例是在模块顶层创建的，每次模块被加载都会新建一个Socket连接。
• 即使没有代码变更，多个页面导入这个Context文件时，也可能因为模块的重复执行（Next.js的模块解析机制）创建多个实例。

解决方案：确保Socket实例单例化 #

修改前端Socket Context代码，将Socket实例的创建改为单例模式，并且只在客户端环境初始化：

优化后的Context代码 #

import { createContext, useEffect, useState } from 'react';
import io from "socket.io-client";

export const SocketContext = createContext(null);

export const SocketProvider = ({ children }) => {
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    // 仅在客户端创建Socket实例，且确保只执行一次
    const newSocket = io("http://localhost:8000", { transports: ['websocket'] });
    
    setSocket(newSocket);

    // 组件卸载时断开连接
    return () => {
      newSocket.disconnect();
    };
  }, []); // 空依赖数组确保只执行一次

  return (
    <SocketContext.Provider value={socket}>
      {children}
    </SocketContext.Provider>
  );
};

使用方式修改 #

在你的_app.js或layout.js中全局引入Provider：

import { SocketProvider } from '../path/to/your/socket-context';

export default function App({ Component, pageProps }) {
  return (
    <SocketProvider>
      <Component {...pageProps} />
    </SocketProvider>
  );
}

然后在页面组件中正常使用useContext：

import { useContext, useEffect } from 'react';
import { SocketContext } from '../path/to/your/socket-context';

const Page = () => {
  const socket = useContext(SocketContext);
  
  // 使用socket前先判断是否存在，同时清理事件监听避免重复触发
  useEffect(() => {
    if (socket) {
      const handleConnect = () => {
        console.log('Connected!');
      };
      socket.on('connect', handleConnect);
      
      return () => {
        socket.off('connect', handleConnect);
      };
    }
  }, [socket]);

  return <div>页面内容</div>;
};

额外注意事项 #

• 开发模式下的热重载可能仍会触发一次额外的连接（因为组件卸载再挂载），但生产环境下不会出现这个问题。
• 必须为Socket事件监听添加清理函数（off），避免重复绑定事件导致回调多次触发。

内容的提问来源于stack exchange，提问作者no-syntax-cobol