Javascript 在哪里放置您的websocket

我已经尝试将socket.io与react一起使用了一段时间，但我仍然不知道在哪里启动

socket=io（endpoint）

。在我看到的大多数教程中，它们似乎将其放在组件级别（在应用程序级别之下。我假设每当您切换路由和卸载组件时，它都会断开连接）。但是，如果你想始终如一地收听某些事件，而不管你在应用程序中导航到哪条路线，该怎么办？我的意思是：

let socket 

const App = () => {
  useEffect(() => {
    socket = io(endpoint)
    socket.on('Application wide event', callback)
  }, []) 
}

然后你会通过道具传递插座吗？我已经尝试过这种方法，有时子组件甚至在成功创建应用程序套接字之前就希望在装载时立即发出事件，从而抛出错误。也许是这样的

/* socket initialization here */
const App = () => {}

---

常规做法是什么？

我遇到了一个与您类似的问题，无论您在我的应用程序中导航到哪条路线，我都需要始终如一地收听一些事件。我通过在渲染函数外部的顶级组件上初始化套接字并导出它来实现这一点，所以当我需要发出或侦听套接字时，我只需导入它

/* socket initialization here */
socket = io(endpoint);

const App = () => {
    //return <Routes>...</Routes>
}

export default App;
export {socket};

我仍然想知道这是否是一个传统的做法，但它对我有效，我会遵循这个问题，也许有人知道一个更好的传统做法

import {socket} from "/App";

const OtherComponent = () => {
    useEffect(() => {
        socket.on("Application wide event", callback)
        return () => {
            socket.off("Application wide event");
        }
    }, [])
}