如何在Next.js中实现WebSocket全局共享？

要解决多个组件生成不同Socket实例的问题，你可以把Socket实例做成单例模式，单独放在一个工具模块里统一管理，确保整个应用共享同一个连接。

步骤1：创建Socket管理模块 #

新建utils/socket.ts文件，封装Socket的初始化、获取和断开逻辑：

import io from "socket.io-client";

// 全局存储Socket实例
let socket: SocketIOClient.Socket | null = null;

// 初始化Socket（仅在实例不存在时创建）
export const initializeSocket = async () => {
  if (socket) return socket;
  // 先调用API建立连接前置
  await fetch("/api/socket");
  socket = io();
  return socket;
};

// 获取已初始化的Socket实例
export const getSocket = () => {
  if (!socket) {
    throw new Error("Socket未初始化！请先调用initializeSocket");
  }
  return socket;
};

// 断开Socket连接并清空实例
export const disconnectSocket = () => {
  if (socket) {
    socket.disconnect();
    socket = null;
  }
};

步骤2：在首页初始化Socket #

修改/pages/index.tsx，在组件挂载时初始化Socket，并在卸载时断开：

import { useEffect } from "react";
import { initializeSocket, disconnectSocket } from "../utils/socket";

const Home = () => {
  useEffect(() => {
    const initSocket = async () => {
      const socket = await initializeSocket();
      console.log('首页初始化的socket.id: ', socket.id);
    };

    initSocket();

    // 组件卸载时断开连接
    return () => disconnectSocket();
  }, []);

  // 你的首页其他逻辑...
};

export default Home;

步骤3：在其他组件中复用Socket实例 #

在任意需要使用Socket的组件里，直接导入getSocket获取共享实例：

import { useEffect } from "react";
import { getSocket } from "../utils/socket";

const ChatRoom = () => {
  useEffect(() => {
    try {
      const socket = getSocket();
      console.log('聊天室使用的socket.id: ', socket.id);

      // 监听房间消息
      socket.on('room-message', (message) => {
        // 处理消息逻辑
        console.log('收到房间消息:', message);
      });

      // 组件卸载时移除监听，避免内存泄漏
      return () => socket.off('room-message');
    } catch (error) {
      console.error('Socket未初始化，请先进入首页');
    }
  }, []);

  // 你的组件渲染逻辑...
};

export default ChatRoom;

为什么这么做？ #

• 单例模式确保整个应用只有一个Socket连接，避免重复创建实例导致的ID不一致、房间失效问题。
• 统一管理Socket的生命周期，在首页初始化、卸载时断开，避免不必要的连接占用。
• 所有组件共享同一个实例，房间操作、消息监听都会在同一个连接上生效。

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