1、点击按钮发送消息
A.vue
<button @click="sendMsg">sendMsg</button>
methods:{
sendMsg(){
this.$axios.get('http://192.168.1.888:8088/filemanage/base/sendMsg',
{params:{userid: 'e9ca23d68d884d4ebb19d07889727dae'}})
},
}
2、初始化 调用 initWebSocket
B.vue
data(){
return {
websock: null,
lockReconnect:false,
}
},
created(){
this.initWebSocket();
},
methods:{
initWebSocket: function () {
var userId = 'e9ca23d68d884d4ebb19d07889727dae';
var basrUrl = 'http://192.168.1.888:8088'
var url = basrUrl.replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
this.websock = new WebSocket(url);
this.websock.onopen = this.websocketOnopen;
this.websock.onerror = this.websocketOnerror;
this.websock.onmessage = this.websocketOnmessage;
this.websock.onclose = this.websocketOnclose;
},
websocketOnopen: function () {
console.log("WebSocket连接成功");
},
websocketOnerror: function (e) {
console.log("WebSocket连接发生错误");
this.reconnect();
},
websocketOnmessage: function (e) {
console.log("-----接收消息-------",e.data);
var data = eval("(" + e.data + ")");
if(data.cmd == "wjq"){
alert('data')
}
},
websocketOnclose: function (e) {
console.log("connection closed (" + e + ")");
if(e){
console.log("connection closed (" + e.code + ")");
}
this.reconnect();
},
reconnect() {
var that = this;
if(that.lockReconnect) return;
that.lockReconnect = true;
setTimeout(function () {
console.info("尝试重连...");
that.initWebSocket();
that.lockReconnect = false;
}, 5000);
},
}