项目要求:
白净信息模块,接收后台推送的实时数据并倒序显示,相同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)
},
}
}
实时数据接口参考链接:
https://blog.chenhaiyun.com/stomp-sockjs-websocket-reconnect-in-vue/
//本各模块不涉及发送数据给后台,所以只引用一部分