socket依赖调整

package.json

@@ -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"
   },

src/jmapNew/painter.js

@@ -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) {

src/utils/sock.js

@@ -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 { Client } from '@stomp/stompjs';
-import {removeToken} from './auth';
 
 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.clientIns = new Client({
-        this.websocket = new WebSocket(this.url.replace(/https/, 'wss').replace(/http/, 'ws'));
+            brokerURL: this.url.replace(/https/, 'wss').replace(/http/, 'ws'),
-        // 获取 STOMP 子协议的客户端对象
+            connectHeaders: {
-        this.clientIns = Stomp.over(this.websocket);
+                Authorization: getToken()
-        this.closeStompDebug();
+            },
-        const that = this;
+            reconnectDelay: 3000,
-        this.clientIns.connect({ 'X-Token': getToken() }, () => {
+            heartbeatIncoming: 30000,
-            console.info('连接成功.');
+            heartbeatOutgoing: 30000,
-            that.count = 0;
+            onConnect: () => {
-            that.status = true;
+                this.subscribeMap.forEach(subscribe => {
-            // 恢复订阅
+                    this.clientIns.subscribe(subscribe.dest, subscribe.handler, subscribe.headers);
-            that.subscribeMap.forEach((subscribe) => {
-                that.subscribe(subscribe.dest, subscribe.handler, subscribe.headers);
                 });
-        }, (e)=> {
+                this.status = true;
-            console.log('socket连接错误:' + e);
+            },
+            onStompError: (frame) => {
+                console.error('Stomp收到error消息,可能是认证失败,关闭Stomp客户端', frame);
+                this.clientIns.deactivate();
                 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) {
+            onDisconnect: () => {
-        console.info(err);
+                console.info('断开链接');
-        // 退出登陆前断开连接
+                this.subscribeMap.forEach(subscribe => {
-        store.dispatch('disconnect').then(()=>{
+                    if (subscribe.sub && this.status) {
-            MessageBox.confirm('你已被登出，请重新登录', '确定登出', {
+                        subscribe.sub.unsubscribe();
-                confirmButtonText: '重新登录',
+                    }
-                showCancelButton: false,
-                type: 'warning'
-            }).then(() => {
-                removeToken();
-                store.dispatch('FedLogOut').then(() => {
-                    location.reload();// 为了重新实例化vue-router对象 避免bug
-                });
-            });
                 });
+                this.subscribeMap = new Map();
+                this.status = false;
             },
-    // 恢复链接
+            onWebSocketError: () => {
-    reconnect(count) {
+                this.subscribeMap.forEach(subscribe => {
-        console.info(`尝试第${count || 1}次连接.`);
+                    subscribe.sub.unsubscribe();
-        // Message.warning(`正在尝试第${count || 1}次通讯连接。`);
+                });
-        const that = this;
+                this.status = false;
-        if (this.clientIns) { // 初始化stomp和websocket
-            if (this.clientIns.connected) {
-                this.clientIns.disconnect();
             }
-            this.websocket.close();
+        });
-            this.websocket = null;
+        // setTimeout(() => {
-            this.clientIns = null;
+        //     this.clientIns.deactivate();
-        }
+        // }, 10000);
-        setTimeout(() => {
+        this.closeStompDebug();
-            that.connect();
+        this.clientIns.activate();
-        }, reconnectInterval[that.count] || reconnectInterval[reconnectInterval.length - 1] );
     },
 
     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;