在 React 中放置 websocket 的位置答案

【问题标题】：Where to put your websocket in React在 React 中放置 websocket 的位置
【发布时间】：2020-09-05 01:39:18
【问题描述】：

一段时间以来，我一直在尝试使用 socket.io 和 react，但我仍然不知道从哪里启动 socket = io(endpoint)。在我见过的大多数教程中，他们似乎将其置于组件级别（低于应用级别。我假设每当您切换路由和组件卸载时它都会断开连接）。但是，如果您想始终如一地收听某些事件，而不管您在应用程序中导航到哪条路线，该怎么办？这就是我的意思：

let socket 

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

然后你会通过 props 传递套接字吗？我已经尝试过这种方法，有时子组件希望在安装时立即发出事件，甚至在成功创建 App 套接字并因此引发错误之前。也许是这样的？：

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

什么是常规做法？

【问题讨论】：

标签： javascript reactjs websocket socket.io

【解决方案1】：

我遇到了像您这样的问题，无论您在我的应用程序中导航到哪条路径，我都需要始终如一地监听某些事件。我设法通过在渲染函数之外的顶级组件上初始化套接字并导出它来做到这一点，所以当我需要发出或监听套接字时，我只需导入它。

/* 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");
        }
    }, [])
}

我仍然想知道这是否是一种传统做法，但它对我有用，我会关注这个问题，也许有人知道更好的传统做法。

【讨论】：