javascript - React SocketIO 基于数据的动态连接

Question

所以，我偶然发现了这个问题，我无法解决这个问题。

我有多个端点，例如：-“/foo1”-“/bar2”-“/faz3”-“/boo4”

我如何能够在反应中自动管理这些连接？

例如：

// File: EndpointManager.js

const [allEndpoints, setAllEndpoints] = useState([]);
const [activeEndpoints, setActiveEndpoints] = useState(["/foo1", "/faz3"]);

useEffect(() => {
  // I fetch the endpoints here

  return () => setAllEndpoints([]);
}, [])

useEffect(() => {
   if (!allEndpoints.length > 0) return;
   // Some code here to dynamically manage the socket connections on change, I need your help here
}, [activeEndpoints])

现在，我可以与数组 foreach 动态连接并在该 foreach 中打开一个新连接，但该变量是临时存储的（因为它是一个 foreach）。因此，即使我循环两次，我也无法在循环后访问它。我如何能够基于该阵列管理这些连接？或者另一种可以按照我想要的方式工作的解决方案

我面临的问题是我不知道如何动态存储这些连接。我曾想过创建动态变量，例如socketFoo1, socketFaz3，但我不知道如何实现它。请帮帮我！:)

TL;博士

我想完成动态 websocket 连接，它可以基于数组/对象/任何东西进行连接/断开连接

亲切的问候！

标签： javascriptreactjssocket.ioreact-hooks