一.需求背景

最近遇到一个需求是后端通过websocket给前端推送数据，数据分为八种类型，通过多选框来实时展示选中的类型的数据。

二.实现思路

首先用一个数组单独去接收websocket返回的数据，接收前进行类型判断，最后合并，这个项目websocket一次只返回一条数据。具体看你需求。表格展示是用过滤后的数组。这里因为是实时检测，所以在多选结束后更新一次数据以及websocket里过滤一次保证接下来的数据是过滤后的数据。这里用的数据方法是filter、 some。

三.代码实现

data () {
   
        return {
   
            tableDate1: [], // 类型一数据
            tableDate2: [], // 类型二数据
            tableDate3: [], // 类型三数据
            tableDate4: [], // 类型四数据
            tableDate5: [], // 类型五数据
            tableDate6: [], // 类型六数据
            tableDate7: [], // 类型七数据
            tableDate8: [], // 类型八数据
            tableDate: [], // 表格中展示的数据
            tableDates: [], // 接收websocket数据
            checkedSet: ['1', '2', '3', '4', '5', '6', '7', '8'], // 多选框选中数据 默认全选

        };
    },

    mounted () {
   
        this.initWebsocket(); // 创建websocket
    },

    methods: {
   
        initWebsocket () {
   
            // 判断浏览器是否支持websocket
            if ('WebSocket' in window) {
   
                // 创建一个websocket
                let ws = new WebSocket("ws://");
                ws.onopen = function () {
   
                    ws.send('前端向后端发送数据')
                }
                ws.onmessage = (e) => {
   
                    console.log("接收到的数据：", e);
                    // 表格里同时展示八中数据的最新的一条数据
                    // 类型判断
                    if (e.type == "1") {
   
                        this.tableDate1 = [e];
                    } else if (e.type == "2") {
   
                        this.tableDate2 = [e];
                    } else if (e.type == "3") {
   
                        this.tableDate3 = [e];
                    } else if (e.type == "4") {
   
                        this.tableDate4 = [e];
                    } else if (e.type == "5") {
   
                        this.tableDate5 = [e];
                    } else if (e.type == "6") {
   
                        this.tableDate6 = [e];
                    } else if (e.type == "7") {
   
                        this.tableDate7 = [e];
                    } else if (e.type == "8") {
   
                        this.tableDate8 = [e];
                    }
                    // 合并数据
                    this.tableDates = this.tableDate1.concat(this.tableDate2, this.tableDate3, this.tableDate3, this.tableDate4, this.tableDate5, this.tableDate6, this.tableDate, this.tableDate8)
                    this.tableDate = this.tableDates.filter((item) => {
   
                        return this.checkedSet.some(val => (val == item.type));
                    })
                }
                ws.onerror = (err) => {
   
                    console.log("接口错误:", err);
                }
                ws.onclose = (e) => {
   
                    this.initWebsocket(); // 断开重连
                }
            }
        },
        // 多选选完后
        checkChange () {
   
            // 对当前表格中数据进行过滤 
            this.tableDate = this.tableDate.filter((item) => {
   
                return this.checkedSet.some(val => (val == item.type));
            })
        }
    },

有啥不懂可以私信我，大部分注释都写了。