Websocket 连接错误 资源不足

Ron
2021-09-01  
3499  
    
1  

我正在开发一个聊天应用程序，两个用户可以在其中相互交谈，我正在使用 flask-socketio 和 React 来做这件事。

我一直在努力解决我在使用 socket.io 时遇到的这个问题。这是我在浏览器控制台上偶尔遇到的错误连接：

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

我很难弄清楚是什么导致了这个错误。我解决这个问题的方法是刷新页面，然后重新建立连接。我想找到一个解决方案，我不会一直与套接字断开连接并收到相同的错误消息。关于如何做到这一点的任何想法？

google-chrome ,  sockets ,  websocket ,  socket.io ,  flask-socketio
stack overflow Websocket Connection Error Insufficient Resources
原文答案

答案:

作者头像
Hultan
2021-10-22    5      原文

插座和反应的一个常见问题是您实例化Websocket的频率。

React中插座的使用不正确

这是一个不应在React组件中设置的示例。每次组件重新启动器时，都会设置一个新的套接字，这将导致 Insufficient resources 错误。

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>
  )
}

正确使用插座在React中

取而代之的是，将Websocket的实例化使用使用效果（这样它仅触发一次，并且在卸载组件时会断开连接）。

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>
  )
}

相关问题

标签