避免从本机组件建立累积/多套接字连接的最佳实践是什么

问题描述

我正在开发一个使用 laravel-echo 库进行套接字连接的 React Native 移动聊天应用程序。

我有一个基于函数的 EchoServer 组件，从每个页面上的自定义标题组件呈现。它通过 useEffect 钩子调用 handleNewMessage 并设置一个新的 Echo 对象来监听套接字。

let echo = new Echo({
   broadcaster: 'socket.io',client: socketio,authEndpoint: constants.echoServer +  '/broadcasting/auth',host: constants.echoServer + ':' + constants.echoServerPort,auth: {
      headers: {
         Accept: "application/json",Authorization: `Bearer ${params.access_token}`,}
   },});

 echo
     .private(channel)
     .notification((notification) => {
          handleNewMessage(notification);
     });

     console.log('Join "online" channel');
     echo.join('online')
         .here(users => {
              if(users.find(data => data.id === params.user.id)) {
                  setState({
                       icon: ICONS.online,color: COLORS.online
                  });
              }
          });

     echo.connector.socket.on('subscription_error',(channel,data) => {
          console.log('channel subscription error: ' + channel,data);
     });

我对来自套接字连接的侦听通知没有任何问题。然而，由于这个组件是在上面提到的头部组件中渲染的，所以每次渲染头部时它也会创建一个新的连接。这导致相同的通知越来越多地出现多次（起初我收到 1 个通知，然后是 2 和 3 等）

我通过对 echo 对象使用 useContext 钩子解决了这个问题。我基本上使用 useContext 钩子作为全局变量。

之后，

const [ socket,setSocket ] = useContext(SocketContext);

在创建“新的 Echo”对象之前，我会检查套接字是否已经有值。

if (socket){
   return;
}

但是，使用这个解决方案，我不得不在我的父 App.js 文件中添加另一个上下文：

<AuthContext.Provider value={authContext}>
   <SocketContext.Provider value={[socket,setSocket]}>
     <MessageStore>
       <NavigationContainer>
       { user.access_token? 
         <MenuStack/>
       :
         <AuthStack/>
       }
       </NavigationContainer>
     </MessageStore>
   </SocketContext.Provider>
</AuthContext.Provider>

我可以看到嵌套上下文将来可能是一个问题（如果它们还没有），因为我已经有 3 个。我想问的是，是否有更好的解决方案来检查套接字连接没有使用useContext hook就已经建立了？

我也在想也许 useContext 不是最好的解决方案。

在身份验证过程后立即建立套接字连接可能是更好的解决方案，而不是每次都在标头中检查它。

我正在寻找有关此案例最佳做法的建议。

提前感谢您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）