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 }, }