socket依赖调整

This commit is contained in:
fan 2023-04-28 09:21:59 +08:00
parent cc3003dbb0
commit f5e1c370cc
3 changed files with 48 additions and 77 deletions

View File

@ -18,6 +18,7 @@
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
},
"dependencies": {
"@stomp/stompjs": "^5.4.4",
"axios": "^0.18.0",
"dayjs": "^1.11.5",
"echarts": "^4.7.0",
@ -46,6 +47,7 @@
"vuedraggable": "^2.24.3",
"vuex": "^3.1.0",
"wangeditor": "^4.6.17",
"ws": "^8.13.0",
"xlsx": "^0.14.2",
"zrender": "^4.0.4"
},

View File

@ -155,7 +155,7 @@ class Painter {
trainDevice.instance && this.mapInstanceLevel[deviceType.Train].remove(trainDevice.instance);
trainDevice.instance = null;
trainDevice.zrOptions = this.$jmap.$options;
curModel.sectionModel.instance && this.add(trainDevice);
curModel.sectionModel && curModel.sectionModel.instance && this.add(trainDevice);
});
if (this.screenFlag) {

View File

@ -1,13 +1,9 @@
import { getToken } from '@/utils/auth';
import { checkLoginLine } from '@/api/login';
import { MessageBox } from 'element-ui';
import store from '@/store/index';
import Stomp from 'stompjs';
import {removeToken} from './auth';
import { Client } from '@stomp/stompjs';
const isDev = process.env.NODE_ENV === 'development';
const isTest = process.env.NODE_ENV === 'test';
const reconnectInterval = [1000, 3000, 5000, 10000, 30000, 60000];
var StompClient = function (headers) {
const websocketUrl = `${store.state.user.baseUrl}/joylink-websocket?token=`;
@ -18,7 +14,6 @@ var StompClient = function (headers) {
};
StompClient.prototype = {
websocket: null,
clientIns: null,
url: '',
status: false,
@ -26,78 +21,53 @@ StompClient.prototype = {
headers: {
// 'X-Token': getToken()
},
isPassived:true, // 是否被动断线重连
count: 0,
topic: '',
onmessage: null,
// 连接服务端
connect() {
// 向服务器发起websocket连接并发送CONNECT帧
this.websocket = new WebSocket(this.url.replace(/https/, 'wss').replace(/http/, 'ws'));
// 获取 STOMP 子协议的客户端对象
this.clientIns = Stomp.over(this.websocket);
this.closeStompDebug();
const that = this;
this.clientIns.connect({ 'X-Token': getToken() }, () => {
console.info('连接成功.');
that.count = 0;
that.status = true;
// 恢复订阅
that.subscribeMap.forEach((subscribe) => {
that.subscribe(subscribe.dest, subscribe.handler, subscribe.headers);
});
}, (e)=> {
console.log('socket连接错误:' + e);
this.status = false;
});
// sock断开回调
that.clientIns.ws.onclose = () => {
that.status = false;
console.info(`通信连接已断开!`);
checkLoginLine().then((resp) => {
if (resp.code !== 40004 && resp.code !== 40005) {
that.count++;
that.reconnect(that.count);
}
}).catch(() => {
that.count++;
that.reconnect(that.count);
});
};
},
logOut(err) {
console.info(err);
// 退出登陆前断开连接
store.dispatch('disconnect').then(()=>{
MessageBox.confirm('你已被登出,请重新登录', '确定登出', {
confirmButtonText: '重新登录',
showCancelButton: false,
type: 'warning'
}).then(() => {
removeToken();
store.dispatch('FedLogOut').then(() => {
location.reload();// 为了重新实例化vue-router对象 避免bug
this.clientIns = new Client({
brokerURL: this.url.replace(/https/, 'wss').replace(/http/, 'ws'),
connectHeaders: {
Authorization: getToken()
},
reconnectDelay: 3000,
heartbeatIncoming: 30000,
heartbeatOutgoing: 30000,
onConnect: () => {
this.subscribeMap.forEach(subscribe => {
this.clientIns.subscribe(subscribe.dest, subscribe.handler, subscribe.headers);
});
});
});
},
// 恢复链接
reconnect(count) {
console.info(`尝试第${count || 1}次连接.`);
// Message.warning(`正在尝试第${count || 1}次通讯连接。`);
const that = this;
if (this.clientIns) { // 初始化stomp和websocket
if (this.clientIns.connected) {
this.clientIns.disconnect();
this.status = true;
},
onStompError: (frame) => {
console.error('Stomp收到error消息,可能是认证失败,关闭Stomp客户端', frame);
this.clientIns.deactivate();
this.status = false;
},
onDisconnect: () => {
console.info('断开链接');
this.subscribeMap.forEach(subscribe => {
if (subscribe.sub && this.status) {
subscribe.sub.unsubscribe();
}
});
this.subscribeMap = new Map();
this.status = false;
},
onWebSocketError: () => {
this.subscribeMap.forEach(subscribe => {
subscribe.sub.unsubscribe();
});
this.status = false;
}
this.websocket.close();
this.websocket = null;
this.clientIns = null;
}
setTimeout(() => {
that.connect();
}, reconnectInterval[that.count] || reconnectInterval[reconnectInterval.length - 1] );
});
// setTimeout(() => {
// this.clientIns.deactivate();
// }, 10000);
this.closeStompDebug();
this.clientIns.activate();
},
closeStompDebug() {
@ -112,13 +82,15 @@ StompClient.prototype = {
// 订阅指定的topic
subscribe(topic, onmessage, headers) {
console.log(topic, onmessage, headers);
this.topic = topic;
this.onmessage = onmessage;
this.headers = headers;
if (!this.status) {
this.subscribeMap.set(topic, {dest: topic, handler: onmessage, sub: null, headers, count: 1});
} else {
const sub = this.clientIns.subscribe(topic, onmessage);
const sub = this.clientIns.subscribe(topic, onmessage, headers);
console.info('订阅成功:', sub);
this.subscribeMap.set(topic, {dest: topic, handler: onmessage, sub: sub, headers, count: 1});
}
},
@ -149,18 +121,15 @@ StompClient.prototype = {
} else {
setTimeout(() => {
this.send(url, msg);
}, 300);
}, 3000);
}
},
disconnect() {
if (this.clientIns) {
if (this.clientIns.connected) {
this.clientIns.disconnect();
this.clientIns.deactivate();
}
this.isPassived = false;
this.websocket.close();
this.websocket = null;
this.clientIns = null;
}
this.status = false;