直接附上代码:
created(){
this.initWebSocket();
},
destroyed() {
this.websock.close();//离开路由之后断开websocket连接
},
initWebSocket(){//初始化weosocket(必须)
const url = "ws://请求的接口地址"; //请根据实际项目需要进行修改
this.websock = new WebSocket(url); //新建一个webstock对象
this.websock.onmessage = this.websocketonmessage;
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onclose = this.websocketclose;
},
websocketonopen(){//websocket连接后发送数据(send发送)
console.log('websocket创建成功')
},
websocketonmessage(e){ //数据接收
var message = JSON.parse(event.data); // 这里是关键 JSON.parse 必须写上,不然拿不到数据
},
websocketonerror(){//连接建立失败重连
this.initWebSocket();
},
websocketclose(e){ //关闭
console.log('断开连接',e);
}
刚开始测试的时候,可以让后端手动传一条数据给你,前端测试一下。
最后你会发现 更新数据的时候 就会接收到websocket的数据,这样就成功了 (后面就是动态的替换数据和插入数据了)。