BK-实时数据倒叙推送

最新推荐文章于 2024-10-14 23:30:00 发布

原创最新推荐文章于 2024-10-14 23:30:00 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

BK 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Vue组件eescueWarn通过WebSocket接收后台实时数据，实现新数据倒序显示，并处理重复ID更新。重点关注数据接收、处理和页面展示的实现细节。

项目要求：

白净信息模块，接收后台推送的实时数据并倒序显示，相同id的进行数据替换
组件：eescueWarn

页面实现代码：

<div class="warn">
        <div class="main">
            <span>报警信息</span><br>
            <img src="../assets/images/bigline.png">
        </div>
        <ul class="inner">
            <p class="txt" v-for="(item,index) in allData" :key="index" :class="index % 2 == 0 ? color:''">
                <span :class="item.warnRestore == 1 ? timer.timer : timer.timer1">{{ item.warnTime }}</span>
                <span class="content"> {{ item.warnName }}</span>
            </p>
        </ul>
  </div>

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
export default {
    name:'eescueWarn',
    data () {
        return {
            allData:[],
            color:'color',
            timer:{timer:'timer',timer1:'timer1'},
            stompClient:{}, 
            socket:{},
            socketUrl: 'http://172.16.72.149:8989/frame/websocketServer',
            setData:[],
        }
    },
    mounted(){
        //调用初始化websocket方法
        this.initWebSocket();
    },
    methods:{
        // 接收到消息并对消息做处理
        onMessageReceived(payload) {
            var message = JSON.parse(payload.body)
            if(!this.setData.includes(message.warnCode)){
                this.allData.unshift(message);
                //数据插入到数组第一位，从而实现倒序显示
                this.setData.push(message.warnCode)
            }else{
                this.allData.forEach((item) => {
                    if(item.warnCode == message.warnCode){
                        item = message
                    }
                })
            }
        },
        // 连接成功
        successCallback() {
        // console.info('onConnected')
        this.stompClient.subscribe('/topic/getWarnInfo', this.onMessageReceived)
        },
        initWebSocket() {
        this.socket = new SockJS(this.socketUrl)// 连接服务端
        this.stompClient = Stomp.over(this.socket)
        this.stompClient.connect({}, (frame) => {
            this.successCallback()
        }, () => {
            this.reconnect(this.socketUrl, this.successCallback)
        })
        },
        // 断开重连使用定时器定时连接服务器
        reconnect(socketUrl, successCallback) {
        //   console.info('in reconnect function')
        let connected = false
        const reconInv = setInterval(() => {
            // console.info('in interval' + Math.random())
            this.socket = new SockJS(socketUrl)
            this.stompClient = Stomp.over(this.socket)
            this.stompClient.connect({}, (frame) => {
            //   console.info('reconnected success')
            // 连接成功，清除定时器
            clearInterval(reconInv)
            connected = true
            successCallback()
            }, () => {
            //   console.info('reconnect failed')
            // console.info('connected:' + connected)
            if (connected) {
                // console.info('connect .... what?')
            }
            })
        }, 2000)
        },
    }
}