React中“WebSocket is closed before the connection is established“

在 React 中你需要将它添加到你useEffect的return

js 复制代码
useEffect(() => {
 const socket = new WebSocket(address);


 return () => {
   if (socket.readyState === 1) { // <-- This is important
           socket.close();
      }
   }
}, []);

然而,这不仅仅是最好的解决方案!您需要使用钩子,而不是直接在视图/组件中使用套接字连接,它可以防止多次创建套接字连接。

此外,无论前端是否正在通信,如果套接字连接未使用,后端都应关闭该连接。

相关推荐
栀秋666几秒前
深入浅出:手写一个迷你版 Zustand
前端·react.js·前端框架
gustt几秒前
手写 Zustand:从零实现 React 轻量级状态管理库
前端·面试
小钻风33661 分钟前
在 Spring Boot 项目中使用 WebSocket 实现实时通信
websocket
读忆9 分钟前
在前端开发中使用组件后, 若是出了bug, 应该如何排查, 怎么排查, 解决方式是什么?
前端·javascript·vue.js·bug
We་ct14 分钟前
LeetCode 162. 寻找峰值:二分高效求解
前端·算法·leetcode·typescript·二分·暴力
HWL567917 分钟前
uni-app的生命周期
前端·vue.js·uni-app
softbangong18 分钟前
829-批量提取各子文件夹下文件到一级目录
java·服务器·前端·自动化工具·批量文件处理·文件提取工具·文件夹整理
李剑一19 分钟前
别再瞎写 Cesium 可视化!热力图 + 四色图源码全公开,项目直接复用!
前端·vue.js·cesium
SuperEugene20 分钟前
Vue3 + Vue Router + Pinia 路由守卫规范:beforeEach 应做 / 不应做,避死循环、防重复请求|状态管理与路由规范篇
开发语言·前端·javascript·vue.js·前端框架
Greg_Zhong22 分钟前
Css知识之伪类和伪元素
前端·css