google-chrome - Websocket 连接错误 资源不足
问题描述
我正在开发一个聊天应用程序,两个用户可以在其中相互交谈,我正在使用 flask-socketio 和 React 来做这件事。
我一直在努力解决我在使用 socket.io 时遇到的这个问题。这是我在浏览器控制台上偶尔遇到的错误连接:
WebSocket 连接到“ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket&sid=s8DKBembmWoxgGAsAAqX”失败:资源不足
我很难弄清楚是什么导致了这个错误。我解决这个问题的方法是刷新页面,然后重新建立连接。我想找到一个解决方案,我不会一直与套接字断开连接并收到相同的错误消息。关于如何做到这一点的任何想法?
解决方案
套接字和反应的一个常见问题是实例化 WebSocket 的频率。
反应中套接字的错误使用
这是一个不应在反应组件中设置它的示例。每次组件重新渲染时,都会建立一个新的套接字,这会导致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中socket的正确使用
相反,使用 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>
)
}
推荐阅读
- javascript - 如何直接在圈内写东西?
- macos - 如何检查 QLPreview 是否已加载?
- laravel-5 - 我如何加入两个查询然后分页
- python - 加速光流算法(如果适用) Python OpenCV
- java - 使用 MySql 的 Spring Boot 反应式(Webflux)
- android - 如果我重新打开我的 google play dev 帐户,我的应用程序会恢复吗?
- python - 使用 pandas dataframe.query 查找相同的行
- r - 通过在浏览器中运行的闪亮应用程序将 ggplotly() 对象下载为 .png
- angular - 绑定angular2+