首先,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

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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐