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

Question

我正在尝试在我的 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 当用户尝试连接到客户端时，我知道这部分代码只在本机端被调用一次。知道这里会发生什么吗？

Answer 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 函数中使用带有 React.createContext 和 useContext 的 AuthenticationContext。通过这种方式，您可以轻松地在其他组件中设置您的令牌。

Answer 2

好吧，所以对于任何偶然发现类似问题的人 - 我实际上不得不卸载我原来的 socket.io-client 包，然后重新安装 socket.io-client v2.1.1.

npm install socket.io-client@2.1.1

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

Answer 3

对我来说，这是因为我的服务器有 v2.03，而我的客户端有 ^4.5.0，在我将我的服务器升级到 ^4.5.0 之后它可以工作，但是你需要更改一些你的代码，阅读如何记录

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

Socket io client keeps disconnecting and reconnecting in react-native app

socket.io

react-native