vue での 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);
     })
},

実際、あなたのソリューションから学ぶときに、私がまだ試していないアイデアがあります。ユーザーが 1 つずつプッシュする効果だけが必要な場合は、elementui のテーブルコンポーネントを使用せずに、自分でネイティブテーブルを作成してみることができます。そしてそれをWebSocketでプッシュしてデータをレンダリングする（そんな方法も実現可能だそうです）。

さらに、削除したデータをどのように表示するかという質問もあるでしょう。私の思考回路は次のとおりです。

1. 必要なデータを見つけるためのバックエンド検索インターフェイスを作成します。

2.テーブルの無限スクロール機能を追加します（リンクhttps://yehaocheng520.blog.csdn.net/article/details/120038098を参照）

最後に、皆さんは批判や修正を歓迎します~

vue での WebSocket プッシュが多すぎる問題を解決するための図 (アイデア)

おすすめ