如何在 NextJs 中使 web 套接字成为全局套接字？

Question

我遵循了本教程并且可以让系统正常工作，但我无法弄清楚如何将前端套接字从 index.jsx 导出到应用程序的其他部分。 我可以让初始化器在其他函数中运行得很好，但它每次运行时都会发出一个新的套接字，这会导致其他问题。 如果我可以将 /pages/index.tsx 中的 socket 变量设为全局变量，它将解决我所有的问题。

这是我的 /pages/index.tsx

import { useEffect } from "react";
import io from "socket.io-client";

let socket: any; //how can I export this to other parts of my app?

const Home = () => {
    useEffect(() => {
        socketInitializer();
    }, []);

    const socketInitializer = async () => {
        // We just call it because we don't need anything else out of it
        await fetch("/api/socket");

        socket = io();
        console.log('index initialized socket.id: ', socket.id)
    };
}

export default Home;

我可以将 socket iniaitlizer 放入我的应用程序的其他部分，它会工作，但是 sockets 有不同的 ID，所以如果我将一个房间分配给 1 个用户，房间只适用于 1 个套接字，其他套接字被擦除

Answer 1

虽然我从未在 Next.js 中使用过套接字，但我认为应该在顶级组件socketInitializer文件中调用 socketInitializer。 因为在你目前的设计中，如果用户没有登陆你的主页，你的 websocket 代码永远不会运行。 也许有人向用户发送了您应用程序特定页面的链接，用户单击了该页面并浏览了应用程序并且从未访问过主页，因此用户永远不会使用套接字服务。

您需要创建一个 singleton 套接字 object，在闭包的帮助下，您可以在函数内部使用它并导出这些函数。 我在这里解释了如何设置套接字： UseEffect hook with socket.io state is not persistent in socket handlers