代码之家 › 专栏 › 技术社区 › Djaenike

Socket io客户端在react原生应用程序中保持断开连接和重新连接

socket.io react-native

Djaenike · 技术社区 · 3 年前

我正在尝试在我的react原生应用程序上设置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本机端调用一次。有什么想法吗?

0 回复 | 直到 3 年前

Francesco Clementi 3 年前

我建议避免使用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来设置令牌。更好的是在应用程序函数中使用带有React.createContext和useContext的AuthenticationContext。通过这种方式,您可以在其他组件中轻松设置令牌。

Djaenike 3 年前

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

npm install socket.io-client@2.1.1

降级到v2.1.1对我很有效。希望这能帮助到别人

qahtan said 2 年前

对我来说,这是因为我的服务器有v2.03,我的客户端有^4.5.0。在我将服务器升级到^4.5.0后,它可以工作,但你需要更改一些代码,请阅读文档

推荐文章

user19476497 · 如何使用useState修改数组以使其成为React中的常数

2 年前

Muhammad Ashraf · 反应:过滤从具有特定键的对象数组中获取值,并将结果分组到数组中

2 年前

John · 如何确定Javascript自引用循环是否完成[重复]

2 年前

Herc · 将用户信息添加到firebase(注册)react native

2 年前

Bonhart · 有没有更好的方法按名称查找数组中的特定对象?

2 年前

ubermo · 如何在React本机自定义组件中使用状态?

2 年前

ramanujans alkhazarim · 错误“元素类型无效”React Native

2 年前

Audrey K · 有没有办法降级React Native?

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

Tedi · 如何将单个数据从子组件传递到父组件?

2 年前