Socket io客户端在react-native应用程序中不断断开和重新连接答案

【问题标题】：Socket io client keeps disconnecting and reconnecting in react-native appSocket io客户端在react-native应用程序中不断断开和重新连接
【发布时间】：2021-09-14 07:40:42
【问题描述】：

我正在尝试在我的 react-native 应用程序上设置 socket.io-client。我有一个使用 socket.io 的现有 reactjs/nodejs 项目，并且没有任何问题。在服务器端，每次用户连接或断开连接时，我都会使用 console.log。我注意到，当我连接我的 react 本机应用程序时，该应用程序会不断连接和断开与服务器的连接。

BspfKH-4A3-_Wn7nAAAT
BspfKH-4A3-_Wn7nAAAT
ywOdT3kUv9J05wTvAAAU
ywOdT3kUv9J05wTvAAAU
disconnected
disconnected
DNZG27GJmzpXJ1KwAAAV
DNZG27GJmzpXJ1KwAAAV
disconnected
uNZY5N_MIqggI4_BAAAW
uNZY5N_MIqggI4_BAAAW
P_SoiAwdgHjRNTcAAAAX
P_SoiAwdgHjRNTcAAAAX
disconnected
disconnected
00qadKZiqqMfe2MNAAAY
00qadKZiqqMfe2MNAAAY
DcDRnrNTEqhs7U9-AAAZ

在 react-native 中，我查看用户是否有 jwtToken（表明他们已经执行了登录），然后设置套接字。这是我在客户端使用的代码：

import io from "socket.io-client";

function App() {

  useEffect(() => {
    setTimeout(async() => {
      if(await AsyncStorage.getItem('jwtToken') !== null){
       console.log("connect")
        var socket = io(getURL, {
          transports: ['websocket'],
          jsonp: false, 
          'forceNew': true
        })
        socket.on("new-message", message => console.log(message))
      }
    }, 1000);
  }, []);

.....

当用户尝试在客户端连接时，我会使用 console.log，所以我知道部分代码只会在 react-native 端被调用一次。有什么想法吗？

【问题讨论】：

标签： react-native socket.io

【解决方案1】：

我建议避免使用 setTimout 进行套接字连接，因为使用您的代码，您将使用 forceNew 选项每秒连接一次。

尝试像这样进行重构：

function App() {
  const [jwtToken, setJwtToken] = useState(null);

  useEffect(() => {
      if(jwtToken){
       console.log("connect")
        var socket = io(getURL, {
          transports: ['websocket'],
          jsonp: false, 
          'forceNew': true
        })
        socket.on("new-message", message => console.log(message))
      }
  }, [jwtToken]);

并使用 setJwtToken 设置令牌。更好的是在你的 App 函数中使用 AuthenticationContext 和 React.createContext 和 useContext。通过这种方式，您可以轻松地在其他组件中设置您的令牌。

【讨论】：

感谢您的回复！我删除了函数的 setTimeout 部分，但似乎仍然得到相同的结果。对我来说没有意义的是为什么服务器会继续创建新的连接，即使我看到客户端只在最初调用
我认为这是一个配置错误的问题。实际上有很多关于如何在 react-native 中配置 socket.io 的示例，也许您缺少 react-native 用户代理。尝试检查stackoverflow.com/questions/29408492/…或stackoverflow.com/questions/29408492/…
谢谢！看起来这些答案正在使用window.navigator.userAgent = 'react-native';，除了实现看起来与我所拥有的非常相似。当我回到我的电脑时，我会玩这个。我应该在哪里调用它（componentDidMount、useEffect 等）有什么建议吗？
您应该在组件外部和 socket.io 导入之前调用它。在这个答案stackoverflow.com/questions/29408492/… 中解释得很好，请仔细阅读

【解决方案2】：

好的，所以对于那些偶然发现类似问题的人 - 我实际上必须卸载我原来的 socket.io-client 包，然后重新安装 socket.io-client v2.1.1。

npm install socket.io-client@2.1.1

降级到 v2.1.1 对我有用。希望这可以帮助某人

【讨论】：