这套websocket直接拿去用,写个独力的js文件
let wsConnection = {
$ws: null,
lockReturn: false,
timeout: 60 * 1000 * 5,
timeoutObj: null,
timeoutNum: null,
serverTimeoutObj: null,
//初始化webSocket长连接
initWebSocket: function (wsurl) {
this.$ws = new WebSocket(wsurl);//写入地址 这里的地址可以在initWebSocket方法加入参数
this.$ws.onopen = this.wsOpen;
this.$ws.onclose = this.wsClose;
this.$ws.onmessage = this.wsMsg;
this.$ws.onerror = this.wsError;
},
//打开websocket
wsOpen: function (e) {
//开始websocket心跳
wsConnection.startWsHeartbeat();
console.log('ws success')
},
wsClose: function (e) {
console.log(e, 'ws close')
},
wsMsg: function (msg) {
//每次接收到服务端消息后 重置websocket心跳
wsConnection.resetHeartbeat();
//服务端发送来的消息存到vuex
console.log("服务器发送来的消息",msg)
},
wsError: function (err) {
console.log(err, 'ws error');
wsConnection.reconnect()
},
//重启websocket
reconnect: function () {
let _this = this;
if (_this.lockReturn) {
return;
}
_this.lockReturn = true;
_this.timeoutNum && clearTimeout(_this.timeoutNum);
_this.timeoutNum = setTimeout(function () {
_this.initWebSocket();
_this.lockReturn = false;
}, 3000);
},
startWsHeartbeat: function () {
let _this = this;
_this.timeoutObj && clearTimeout(_this.timeoutObj);
_this.serverTimeoutObj && clearTimeout(_this.serverTimeoutObj);
_this.timeoutObj = setInterval(function () {
//判断websocket当前状态
if (_this.$ws.readyState != 1) {
_this.reconnect()
}
}, _this.timeout);
},
//重置websocket心跳
resetHeartbeat: function () {
let _this = this;
clearTimeout(_this.timeoutObj);
clearTimeout(_this.serverTimeoutObj);
_this.startWsHeartbeat()
}
};
//抛出websocket对象
export default wsConnection
那里需要引入直接导入使用
import wsConnection from '@/api/web-socket.js'
//在生命周期调用方法
wsConnection.initWebSocket('ws://localhost:8888')