main.js
var websocket_url='ws://127.0.0.1:8282';
window.websocket = new WebSocket(websocket_url);
Vue.prototype.socket = window.websocket;
window.onload = function(){
setInterval(()=>{
console.log(window.websocket)
Vue.prototype.socket = window.websocket;
window.websocket.send(JSON.stringify({type:'ping'}))
},10000)
}
app组件内websocket事件。
监听websocket连接、消息、断线重连事件。
延时1秒钟后进行!
断开连接是window.websocket.close()
setTimeout(()=>{
window.websocket = that.socket;
console.log(websocket)
websocket.onopen=function (event) {
console.log('连接成功!')
};
websocket.onmessage=function (event) {
var res = JSON.parse(event.data);
// 视自己聊天服务器的自定义事件而定
if(res != null){
switch(res.code) {
case 10001:
Toast(res.states)
break;
case 10003:
// 用户在线
break;
case 10004:
// 用户刚刚下线
break;
case 10005:
// 消息发送成功
console.log("新消息")
break;
case 10006:
// 消息发送成功
break;
default:
}
}
};
websocket.onclose=function (event) {
console.log('聊天服务器连接失败');
setTimeout(()=>{
that.socketOn();
Toast('重新连接聊天服务器')
window.websocket = that.socket;
},1000)
};
websocket.onerror=function (event,e) {
console.log('error '+event.data);
};
},1000)
组件内重连函数
socketOn(){
var websocket_url='ws://182.61.19.200:8282';
window.websocket = new WebSocket(websocket_url);
this.socket = websocket;
// main.js中定义的Vue.prototype.socket 赋值重新连接的websocket
},
组件内发送消息函数
send(type,content,user,target){
// 视自己聊天服务器定义的消息事件而定
let that = this;
var data = JSON.stringify({type:type,content:content,username:that.user,target});
console.log(data)
that.socket.send(data);
},
当聊天服务器断开连接之后,触发websocket.onclose
事件,并启动1秒延时重建连接事件