WebSocket连接错误，资源不足

问题描述

我正在开发一个聊天应用程序，两个用户可以在其中相互交谈，我正在使用flask-ocketio和Reaction来实现这一点。

我一直在努力解决我在Socket.IO中遇到的这个问题。以下是我在浏览器控制台上偶尔收到的错误连接：

WebSocket连接到‘ws://127.0.0.1:5000/socket.io/?EIO=4&；transport=websocket&；sid=s8DKBembmWoxgGAsAAqX’失败：资源不足

我很难找出导致此错误的原因。我解决这个问题的方法是刷新页面，然后重新建立连接。我想找到一个解决方案，这样我就不会一直与套接字断开连接并收到相同的错误消息。您知道怎么做吗？

推荐答案

套接字和反应的一个常见问题是实例化WebSocket的频率。

在Reaction中不正确使用套接字

import React, {useState} from 'react'
import { io } from "socket.io-client";

export default function MockSocket() {
  const [message, setMessage] = useState("");

  const socket = io();
  socket.connect();
  socket.on("recieve_message", setMessage);

  return (
    <div>
      {message}
    </div>
  )
}

在Reaction中正确使用套接字

相反，使用useEffect包装WebSockets的实例化(这样它只触发一次，并且在卸载组件时断开连接)。

import React, {useEffect, useState} from 'react'
import { io } from "socket.io-client";

export default function MockSocket() {
  const [message, setMessage] = useState("");
 
  useEffect(
    () => {
      const socket = io();
      socket.connect();
      socket.on("recieve_message", setMessage);
      
      return () => {
        socket.disconnect();
      }
    },
    []
  )

  return (
    <div>
      {message}
    </div>
  )
}