一张图解决vue中websocket推送数过多导致页面卡主（思路）

2024-07-17 22:09| 来源: 网络整理| 查看: 265

首先，websocket连接就不过多赘述了，主要讲述连接以后出现的问题，这个问题点就在于渲染，websocket推送在数据量过大时不能一条一条渲染，这样会导致浏览器压力过大而崩溃（卡死），所以主要思路就是将数据缓存在一个数组中，通过定时器定时渲染数据。

下面是逻辑代码

// data中的数据 data() { return { time1:3000, joblistsCache:[], //websocket缓存 joblists: [], //渲染的表格数据 } }, // mounted逻辑 mounted() { //加载创建一个2秒定时器（time1：2000ms） this.time1 = setInterval(() => { console.log('++++++','websocket需要装进去的长度',this.joblistsCache.length); // 如果websocket需要装进去的长度大于200，那就截取最新的200条以外的所有数据（1、每次只渲染200条 2、joblistsCache数组为缓存数组，并不是实时渲染到的数据） if (this.joblistsCache.length > 200) { console.log('+++---','添加时删除' + String(this.joblistsCache.length - 200) + '条'); this.joblists.unshift(...this.joblistsCache.splice(this.joblistsCache.length - (this.joblistsCache.length - 200), (this.joblistsCache.length - 200))) }else{ this.joblists.unshift(...this.joblistsCache) } // 如果当前页面上的table表格数据超过200条，渲染将可能会卡顿，为了优化，让页面只有200条数据去渲染 if (this.joblists.length > 200) { this.joblists.splice(this.joblists.length - (this.joblists.length - 200), (this.joblists.length - 200)) } console.log('+++===','当前列表长度',this.joblists.length); // 每次轮询置空joblistsCache缓存数组，为了取到除了上次获取到数据意外的最新数据 this.joblistsCache = [] }, this.time1) }, // methods逻辑 methods:{ //接收后端返回的数据，可以根据需要进行处理 websocketonmessage(e) { if (JSON.parse(e.data).appName !== 'system') { // websocket连接后先将所有数据放到缓存中 this.joblistsCache.unshift(JSON.parse(e.data)) } else { return } }, } //最后不要忘记在beforeDestroy删除定时器哦(很重要)~ beforeDestroy() { this.$once('hook:beforeDestroy', () => { clearInterval(this.time1); }) },

其实在借鉴各位的解决方法时，有一种思路我目前还没有尝试：如果用户就是需求一条一条推送的效果，可以尝试一下不用elementui中的table组件，自己去写一个原生table并拿到websocket推送的数据进行渲染（据说是有这么个办法是可行的哈）。

另外会有人问，那你删除的数据怎么显示呢？我的思路是：

1、做一个后端搜索的接口去查找你想要的那条数据。

2、添加table的 infiniteScroll无限滚动功能（参照大神链接https://yehaocheng520.blog.csdn.net/article/details/120038098）

最后欢迎各位大佬批评指正~

【本文地址】

公司简介

联系我们