我正在开发一个聊天应用程序,两个用户可以互相交谈,我正在使用 Flask-socketio 和 React 来实现这一点。
我一直在努力解决我在使用 socket.io 时遇到的这个问题。这是我在浏览器控制台上偶尔遇到的错误连接:
与“ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket&sid=s8DKBembmWoxgGAsAAqX”的WebSocket连接失败:资源不足
我很难找出导致此错误的原因。我解决这个问题的方法是刷新页面,然后重新建立连接。我想找到一个解决方案,让我不会一直与套接字断开连接并收到相同的错误消息。知道如何做到这一点吗?
套接字和 React 的一个常见问题是实例化 WebSocket 的频率。
这是一个示例,说明不应在 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>
)
}
相反,用 useEffect 包装 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>
)
}
我在反应中也面临同样的问题。 没有任何作用。沮丧