created() {
//页面刚进入时开启长连接
this.initWebSocket();
},
destroyed: function () {
//页面销毁时关闭长连接
this.websocketclose();
},
methods: {
initWebSocket() { //初始化weosocket
const wsuri = 'ws://xx.xx.xx.xx:xxxx/websocket';//ws地址
this.websock = new WebSocket(wsuri);
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onmessage = this.websocketonmessage;
this.websock.onclose = this.websocketclose;
// this.websock.addEventListener('open', function () { //监听
// });
},
websocketonopen(e) {
this.websock.send('sifinitediff,' + e);// 连接完成后发送信息
},
websocketonerror(e) { //错误
console.log("WebSocket连接发生错误");
},
websocketonmessage(e) { //数据接收
// console.log(e);
// const redata = JSON.parse(e.data);
//注意:长连接我们是后台直接1秒推送一条数据,
//但是点击某个列表时,会发送给后台一个标识,后台根据此标识返回相对应的数据,
//这个时候数据就只能从一个出口出,所以让后台加了一个键,例如键为1时,是每隔1秒推送的数据,为2时是发送标识后再推送的数据,以作区分
let data = JSON.parse(e.data);
console.log(data);
},
websocketclose(e) { //关闭
this.websock.close(); //关闭websock
},
}