너무 많은 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의 테이블 구성 요소를 사용하지 않고 직접 네이티브 테이블을 작성하려고 할 수 있습니다. 그리고 websocket에 의해 push된 데이터가 렌더링됩니다(그런 방법이 가능하다고 합니다).

또한 누군가 삭제한 데이터를 표시하는 방법을 묻습니다. 내 생각의 기차는 다음과 같습니다.

1. 백엔드 검색 인터페이스를 만들어 원하는 데이터를 찾습니다.

2. 표 무한 스크롤 기능 추가 ( https://yehaocheng520.blog.csdn.net/article/details/120038098 링크 참조 )

마지막으로 모든 사람이 비판하고 수정하는 것을 환영합니다 ~