后端通过websocket在同一时间内像前端多次发送大量请求导致系统卡死

最新推荐文章于 2024-04-01 18:21:55 发布
最新推荐文章于 2024-04-01 18:21:55 发布
阅读量765 收藏 12
点赞数 9
分类专栏： 开发中遇到的问题 文章标签： 前端 spring boot vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/orehrepuS/article/details/135073207
版权

原因：vue的element-ui组件，会一直在渲染页面。

解决方法：

1.将接收到的数据先放到缓存中用定时器去定时去渲染。

2.更换组件，不用element-ui组件

Super~小怪
关注
  • 9
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
针对后端上万条数据（本次bug是两万条数据）请求时间太慢，前端优化方案以及解决过程中出现的问题
qq_45796592的博客
06-04 1152
针对后端上万条数据（本次bug是两万条数据）请求时间太慢，前端优化方案以及解决过程中出现的问题
websocket通信，错误1006导致服务卡死
laolvwf的博客
08-19 1万+
Golang开发websocket通信，错误1006导致服务卡死问题处理 项目场景： golang开发的websocket服务端和客户端分别进行发送、接收数据操作，在网络不够稳定的情况下（如无线网络），经常出现超时的情况，在接收端做了超时处理： *conn websocket.Conn conn.SetReadDeadline(time.Now().Add(ReadTimeout * time.Second)) msgType, message, err := conn.ReadMessage() if e
利用WebWorker解决页面卡顿问题
最新发布
努力搬砖的博客
04-01 796
在业务需求，有一个需求是需要对两个树形的数据结构进行深层次的对比。这个地方类似Vue或者React的Diff算法，当有大量节点，比如成千上万，或者上百万、千万、甚至上亿的数据时。这个计算会阻塞主线程，导致页面卡顿甚至卡死。用户无法操作页面，造成了不好的影响。
webSocket推送太快导致前端渲染卡顿问题优化
老电影故事的博客
11-02 2216
把webSocket接收到的数据用一个数组存起来，达到一定长度再统一渲染，可根据推送数据的速度适当调解数组长度限制，如果一段时间内改数组长度打不要渲染条件，就用定时器之间渲染。
websocket 缺点
weixin_30247159的博客
09-18 542
当时用python做的服务器，后来回去想再工作项目上用，但新的技术升级，随之而来还是要解决很多非技术问题， 服务器带宽，并发服务器性能方方面面考虑之后还是没有用上，十分可惜， 一个新的技术推动，尤其是在的大传统企业中实在困难。 它对开发者要求高了许多。 对前端开发者，往往要具备数据驱动使用javascript的能力，且需要维持住ws连接（否则消息无法推送）； 对...
WebSocket 多次发送接收消息报错
谢子文的博客
12-29 3539
WebSocket 多次发送消息报错 java.lang.IllegalStateException: The remote endpoint was in state [TEXT_FULL_WRITING] which is an invalid state for called method
vue发送websocket请求和http post请求的实例代码
10-16
主要介绍了vue发送websocket请求和http post请求的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
基于Springboot的一个后端服务，用于实时接收chatGPT的消息，并通过websocket的方式实时反馈给前端
01-24
项目是一个基于Springboot的一个后端服务，用于实时接收chatGPT的消息，并通过websocket的方式实时反馈给前端。 1、本项目还可以助你将GPT机器人集成到钉钉群聊中，通过@机器人进行聊天交互。 2、支持现有的 GPT 3.5...
后端node.js转流服务 通过ffmpeg将rtsp视频流转成flv通过websocket推送给前端
02-28
后端node.js转流服务 通过ffmpeg将rtsp视频流转成flv通过websocket推送给前端
同时创建多个websoket（初始化多个连接、断开的重连、每个连接定时发消息、每个连接存储接收的数据（vuex或者pinia））
m0_63701303的博客
11-21 1796
创建多个websoket（初始化多个链接、重连、定时发消息、存储接收的数据）
vue 启动时卡死_vuejs + element-ui 升级后，运行浏览器会卡死问题
weixin_39522170的博客
12-29 1456
最近在用vuejs + element-ui 开发后台管理系统，竟然出其不意的遇到了神坑，开始用的element-ui版本是2.0.1，一切正常，升级到2.11.0后，运行项目，浏览器就卡死了，一直在加载，页面也没报错。原因是：使用tabs标签，浏览器会卡死问题使用element-ui里面的组件时，要用 包裹起来在用就可以了。后来我发现不用，只用也可以，还有个解决办法：就是把element-u...
WebSocket详解-01
雷雨天的雷胖子
06-28 2085
目录 一、概述 二、详解 一、概述 WebSocket的定义 WebSocket是Html5提供的一种在单个TCP连接上进行双向通信的协议，解决了客户端和服务端之间的实时通信问题。浏览器和服务器只需要完成一次握手，二者之间就可以创建一个持久性的TCP连接，从而实现双向实时通信。 WebSocket的优点 很多网站利用AJAX轮询实现数据推送，轮询是在特定时间间隔，由浏览器主动发起请求，将服务器的数据拉回来。轮询需要不断向服务器发送请求，会占用很多带宽和服...
websocket简单示例
Hiroshi's
07-21 300
安装ws:
vue出现caution:request is not finished yet导致页面卡死问题解决思路
让梦想疯狂
07-10 8687
开发环境正常运行，部署上线后点击某一按钮请求接口时页面出现卡死。在Network=>Timing发现异常提示： caution:request is not finished yet（1）通过Postman模拟请求接口，接口正常。（2）本地部署前端代码，ip和localhost访问时页面不会出现卡死问题。此时我有点怀疑人生，既然都是部署，那就彻底一点，通过内网映射的域名访问前端，终于还原卡死的异常问题。（3）还原异常问题还是不够，我需要找到问题所在位置。因为只有点击对应的那个按钮才会出现页面卡死问题。所以将
2021/12/7 记录一个cpu爆满卡死的问题
turbos_的博客
12-07 716
2021/12/7 记录一个cpu爆满卡死的问题 1、启动项目注入serv空指针问题 最近在项目启动后遇到一个问题， @Bean public WebSocketClient webSocketClient() { // 加载数据库数据到缓存中 scadaData.restartAddCache(); try { WebSocketClient webSocketClient = new WebSocketClient(new
WebSocket使用及优化（心跳机制与断线重连）
jianjieX的博客
02-17 6758
与http不同，websocket支持全双工通信（即：在客户端和服务之间双向通信）在websocket问世之前，客户端与服务器通常采用http轮询和Comet等方式保持长链接。于是websocket便诞生了，它不仅节省资源和带宽，更是能实现长链接作用，只需客户端主动与服务端握手一次，即可进行实时通信，实现推送技术。原文：https://www.cnblogs.com/HelloWorld-Yu/p/14599514.html。//添加索引，方便在客户端列表查询某个socket连接。//存放已连接的客户端。
hbuilderx内置服务器启动失败_我们来看看Swoole是如何实现WebSocket服务器及客户端的...
weixin_39761195的博客
11-27 428
文章来自：laravel学院WebSocket 概述在此之前，有必要对 WebSocket 的原理做简单的说明，WebSocket 复用了 HTTP 协议来实现握手，然后通过请求报文中的 Upgrade 字段将 HTTP 协议升级到 WebSocket 协议来建立 WebSocket 通信连接，一旦 WebSocket 连接建立之后，就可以在这个长连接上通过 WebSocket 数据帧进行双向通信...
WebSocket客户端连接不上和掉线的问题以及解决方案
热门推荐
jonychen1的博客
07-13 3万+
    看到最近有很多人在blog上问关于WebSocket客户端连接和掉线的问题，有一部分我以前也遇到过，在这里我罗列了一些我以前遇到过的问题和其他简单的WebSocket服务。  Q1 客户端连接不上的问题    这个问题我遇到的基本集中在后端，遇到的话需要收集日志进行分析，首先要查看是因为什么原因出现问题的，不过这种情况下多半会出现Exception，从Exception着手分析问题即可。Q...
前端接收后端的websocket数据怎么缓存
07-12
在前端接收后端的WebSocket数据时，可以使用以下方法进行数据缓存： 1. 使用数组或对象：可以创建一个数组或对象来存储接收到的数据。每当接收到WebSocket数据时，将数据添加到数组或对象中。可以通过遍历数组或对象来读取和处理缓存的数据。 示例代码： ```javascript // 创建一个数组来缓存接收到的数据 const dataCache = []; // 接收WebSocket数据并添加到缓存中 socket.onmessage = function(event) { const data = event.data; dataCache.push(data); }; // 遍历数据缓存并处理数据 dataCache.forEach(function(data) { // 处理数据逻辑 }); ``` 2. 使用缓存库或框架：前端框架和库通常提供了用于数据管理和缓存的工具。例如，对于React框架，你可以使用状态管理库（如Redux）来管理WebSocket数据的缓存。 示例代码： ```javascript // 使用Redux来管理WebSocket数据的缓存 // 创建一个Redux store来存储数据 const store = createStore(dataReducer); // 接收WebSocket数据并将数据分发到Redux store中 socket.onmessage = function(event) { const data = event.data; store.dispatch(addData(data)); }; // 在组件中访问和处理缓存的数据 const cachedData = useSelector(state => state.data); // 处理缓存的数据逻辑 cachedData.forEach(function(data) { // 处理数据逻辑 }); ``` 需要根据具体的前端框架和需求选择适合的缓存方式。无论选择哪种方式，都要确保及时清理缓存，避免数据过多导致内存占用过高。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值