需求：后端实时返回叫号/取餐码，前端实时展示

如图：

全部代码

<template> <div class="callNumber"> <ul class="tab"> <li class="tab-left"> <a href="#">制作中</a> </li> <li class="tab-right"> <a href="#">请取餐</a> </li> </ul> <div class="callNumber-cont"> <div class="common cont-left"> <span v-for="(item, index) in getList1" :key="index" > {{item.code}} </span> </div> <div class="common cont-right"> <span v-for="(item, index) in getList2" :key="index">{{item.code}}</span> </div> </div> <div class="callNumber-footer"> <a href="#" @click="toHome"><img src="" alt=""></a> 欢迎光临营养均衡，请留意您的取餐码 </div> </div></template><script>import { getStoreUser } from '@/api/product'import store from '@/store'export default { name: 'shopOrderManageList', data: () => ({ getList1: [], getList2: [], getDetails: null, websock: null, storeId: '' }), mounted() { this.toGetStoreUser() }, created() { this.initWebSocket() this.threadPoxi() }, methods: { // webSock重连 threadPoxi() { // 实际调用的方法 const that = this setTimeout(function() { if (that.websock.readyState !== 1) { // that.getList1 = [] // that.getList2 = [] // that.initWebSocket() that.websocketsend() that.threadPoxi() } that.threadPoxi() }, 5000) }, // 初始化weosocket initWebSocket() { // ws地址 console.log(process.env.WS_API) const wsuri = process.env.WS_API + '/health-queue' this.websock = new WebSocket(wsuri) // 这里面的this都指向vue // this.websock = new ReconnectingWebSocket(wsuri) // 这里面的this都指向vue // this.websock.timeoutInterval = 3000 // 断开重连3秒 this.websock.onmessage = this.websocketonmessage this.websock.onclose = this.websocketclose this.websock.onopen = this.websocketopen this.websock.onerror = this.websocketerror }, websocketopen() { // 打开 console.log('WebSocket连接成功', this.storeId) this.websock.send("{'storeId':'" + this.storeId + "','token':'" + store.getters.token + "'}") }, websocketonmessage(e) { // 数据接收 if (e.data !== '' && e.data !== '0') { const redata = JSON.parse(e.data) if (redata.type !== 0) { this.getDetails = { type: redata.type, // 0统计 1 叫号 2 取餐 operate: redata.operate, // 1 新增 2 删除 activeTime: redata.data.activeTime, goodsDetails: redata.data.goodsDetails, code: redata.data.code, orderId: redata.data.orderId, localeType: redata.data.localeType } this.toshow() } console.log('this.getDetails', this.getDetails) } }, websocketsend() { // 数据发送 try { console.log('*****************', this.websock.readyState) this.websock.send("{'storeId':'" + this.storeId + "'}") if (this.websock.readyState > 1) { this.initWebSocket() } } catch (err) { this.getList1 = [] this.getList2 = [] this.initWebSocket() } }, websocketclose(e) { // 关闭 console.log('WebSocket连接关闭') }, websocketerror() { // 失败 console.log('WebSocket连接失败') }, toshow() { const _this = this if (_this.getDetails.operate !== 2) { if (_this.getDetails.type === 1 && _this.getDetails.operate !== 2) { _this.getList1.push(_this.getDetails) console.log('this.getList1', _this.getList1) } else if (_this.getDetails.type === 2 && _this.getDetails.operate !== 2) { _this.getList2.push(_this.getDetails) console.log('this.getList2', _this.getList2) } } if (_this.getDetails.operate === 2) { if (_this.getDetails.type === 1 && _this.getDetails.operate === 2) { _this.getList1.forEach(function(item, index) { if (item.orderId.indexOf(_this.getDetails.orderId) !== -1) { console.log('******删除*****') _this.getList1.splice(index, 1) } }) console.log('this.getList1', _this.getList1) } else if (_this.getDetails.type === 2 && _this.getDetails.operate === 2) { _this.getList2.forEach(function(item, index) { if (item.orderId.indexOf(_this.getDetails.orderId) !== -1) { console.log('******删除*****') _this.getList2.splice(index, 1) } }) } } }, // 门店详情 toGetStoreUser() { this.listLoading = true getStoreUser().then(response => { this.storeId = response.data.id this.initWebSocket() this.listLoading = false }).catch(() => { this.loading = false }) }, toHome() { this.$router.push({ path: '/' }) // 跳转到新增页面 } }, components: { }}</script><style rel="stylesheet/scss" lang="scss">/* reset element-ui css */.callNumber{ position: fixed; width: 100%; background: #000; height: 100%; left: 0; top: 0; font-size: 16px; z-index: 1002; .tab{ color: #fff; width: 100%; margin: 0; padding: 0; display: flex; justify-content:space-around; li{ display: inline-block; padding: 1.3em 0; width: 50%; text-align: center; a{ font-size: 2.7em; letter-spacing:2px; } } .tab-left{ background: #797979; } .tab-right{ background: #0fca0d; } } // 叫号 .callNumber-cont{ width: 100%; font-size: 4em; padding: 30px 0; display: flex; overflow: hidden; .common{ width: 50%; display: flex; flex-wrap: wrap; align-content: flex-start; span{ display: inline-block; width: 200px; margin-bottom: 15px; text-align: center } } .common.cont-left{ color: #fff;  } .common.cont-right{ color: #0fca0d; } } .callNumber-footer{ width: 100%; background: #000; color:#fff; position: absolute; bottom: 0px; text-align: center; font-size: 2em; letter-spacing:2px; height: 2em; display: flex; align-items: center; text-align: center; justify-content: center; img{ display: inline-block; height: 1.2em; margin-right: 10px; } }}</style>