在线即时聊天项目，最重要的就是要实时收到消息，这里实现了vue.js下的websocket，实现了断线重连，并且可以根据收到的消息进行对应的处理
/**
* 连接websocket
*/
connect () {
var _this=this;
let ws = new WebSocket(this.WebsocketHost+`/ws_visitor?visitor_id=${this.visitor.visitor_id}&to_id=${this.visitor.to_id}`);
ws.onopen = function () {
console.log('WebSocket 连接已打开');
//_this.reconnectTimes = 0;
};
ws.onerror = function () {
console.log('WebSocket 连接错误');
// 尝试重连
_this.reconnect();
};
ws.onclose = function () {
console.log('WebSocket 连接已关闭');
// 尝试重连
_this.reconnect();
};
ws.onmessage = function (event) {
console.log(`收到服务器的消息：${event.data}`);
let result=event.data;
let serverMessage=JSON.parse(result);
let type=serverMessage.type;
let data=serverMessage.data;
if(type=="message"){
_this.receiveMessage(data);
}
if(type=="close"||type=="force_close"){
_this.websocket.serverReturnClose=true;
_this.websocket.instance.close();
}
};
_this.websocket.instance=ws;
},
// 尝试重连
reconnect(){
var _this=this;
if (_this.websocket.serverReturnClose) {
console.log('停止重连,服务端close指令');
return;
}
if (_this.websocket.RECONNET_TIMES >= _this.websocket.MAX_RECONNECT_TIMES) {
console.log('重连失败');
return;
}
_this.websocket.RECONNET_TIMES++;
console.log(`正在尝试重连（第 ${_this.websocket.RECONNET_TIMES} 次）`);
setTimeout(function () {
_this.connect();
}, _this.websocket.RECONNECT_INTERVAL);
}
这段代码是 Vue.js 组件中用于实现 WebSocket 的代码。它有三个方法：
-
connect：连接 WebSocket。它使用 WebSocket 对象创建了一个新的 WebSocket 连接，并为该连接设置了 onopen、onclose、onmessage 三个事件的回调。
-
onopen：连接 WebSocket 成功的回调。它会在 WebSocket 连接建立成功时被调用，在控制台输出 'WebSocket 连接已打开'。
-
onclose：WebSocket 连接关闭的回调。它会在 WebSocket 连接关闭时被调用，在控制台输出 'WebSocket 连接已关闭'，并且会调用 reconnect 方法进行重连。
-
onmessage：WebSocket 接收到服务器消息的回调。它会在收到服务器发送的消息时被调用，在控制台输出 '收到服务器的消息：' 和消息内容。该方法会对收到的消息进行分类，如果消息类型是 message，则调用 receiveMessage 方法进行处理；如果是 close 或者 force_close，则设置 websocket.serverReturnClose 为 true，并调用 close 方法关闭 WebSocket 连接。
-
reconnect：WebSocket 重连方法。当 WebSocket 连接关闭时，如果 websocket.serverReturnClose 为 true，则不进行重连；否则，如果重连次数大于最大重连次数，则不进行重连；
唯一在线客服系统
标签：vue,WebSocket,console,js,ws,websocket,重连,连接 From： https://www.cnblogs.com/taoshihan/p/17079704.html