From 63cd08ccf62c83cc7f1d600f3678baf4405bb74b Mon Sep 17 00:00:00 2001 From: fan <18706759286@163.com> Date: Tue, 14 Jan 2020 14:03:56 +0800 Subject: [PATCH 1/3] socket --- src/utils/sockNew.js | 213 +++++++++++++++++++++++++++++++++++++++ src/utils/stompClient.js | 87 ++++++++++++++++ 2 files changed, 300 insertions(+) create mode 100644 src/utils/sockNew.js create mode 100644 src/utils/stompClient.js diff --git a/src/utils/sockNew.js b/src/utils/sockNew.js new file mode 100644 index 000000000..09457e458 --- /dev/null +++ b/src/utils/sockNew.js @@ -0,0 +1,213 @@ +import { getToken } from '@/utils/auth'; +import { checkLoginLine } from '@/api/login'; +import { getBaseUrl } from '@/utils/baseUrl'; +import { MessageBox } from 'element-ui'; +import store from '../store'; +import SockJS from 'sockjs-client'; +import Stomp from 'stompjs'; + +const isDev = process.env.NODE_ENV === 'development'; +const isTest = process.env.NODE_ENV === 'test'; +const websocketUrl = `${getBaseUrl()}/joylink-websocket?token=`; + +var StompClient = function (headers) { + this.url = websocketUrl + getToken(); + this.headers = headers || {}; + this.connect(); +}; + +StompClient.prototype = { + socket: null, + + clientIns: null, + + subscribeMap: null, + + url: '', + + status: false, + + sockStatus: 0, + + headers: { + // 'X-Token': getToken() + }, + + count: 0, + + topic: '', + + onmessage: null, + + // 连接服务端 + connect() { + return new Promise((resolve, reject) => { + try { + // 断开已有连接 + if (this.clientIns && this.clientIns.connected) { + this.clientIns.disconnect(); + this.clientIns = null; + } + + // 建立连接对象（还未发起连接） + this.socket = new SockJS(websocketUrl + getToken()); + + // 获取 STOMP 子协议的客户端对象 + this.clientIns = Stomp.over(this.socket); + + this.closeStompDebug(); + + // 向服务器发起websocket连接并发送CONNECT帧 + this.clientIns.connect({ 'X-Token': getToken() }, () => { + console.info('连接成功.'); + this.count = 0; + this.status = true; + + // 恢复订阅 + if (this.topic && this.onmessage) { + this.unsubscribe(this.topic); + this.subscribe(this.topic, this.onmessage, this.headers); + } + + // 检测sock是否断开 + if (!this.clientIns.ws.onclose) { + this.clientIns.ws.onclose = () => { + checkLoginLine().then(() => { + this.status = false; + this.count++; + this.reconnect(this.count); + }).catch((err) => { + this.logOut(err); + }); + }; + } + resolve(this); + }, () => { + checkLoginLine().then(() => { + this.connect(); + }).catch((err) => { + if (err.code == 40003 || err.code == 40004 || err.code == 40005 || err.code == 50012) { + this.logOut(); + } + if (err.code == 50008 || err.code == 50014) { + this.url = websocketUrl + getToken(); + this.connect(); + } + }); + }); + } catch (err) { + reject(err); + } + }); + + }, + logOut(err) { + if (err.code == 40003 || err.code == 40004 || err.code == 40005 || err.code == 50012) { + MessageBox.confirm('你已被登出，请重新登录', '确定登出', { + confirmButtonText: '重新登录', + showCancelButton: false, + type: 'warning' + }).then(() => { + store.dispatch('FedLogOut').then(() => { + location.reload();// 为了重新实例化vue-router对象 避免bug + }); + }); + } + if (err.code == 50008 || err.code == 50014) { + this.url = websocketUrl + getToken(); + this.status = false; + this.count++; + this.reconnect(this.count); + } + }, + // 恢复链接 + reconnect(count) { + console.info(`尝试第${count || 1}次连接.`); + this.connect().then(() => { }).catch(() => { + this.count++; + this.reconnect(this.count); + }); + }, + + closeStompDebug() { + if (this.clientIns) { + this.clientIns.debug = undefined; + if (isDev || isTest) { + this.clientIns.debug = function (message) { + console.debug(message); + }; + } + } + }, + + // 订阅指定的topic + subscribe(topic, onmessage, headers) { + this.topic = topic; + this.onmessage = onmessage; + this.headers = headers; + if (this.status) { + if (!this.subscribeMap) { + this.subscribeMap = new Map(); + } + + try { + var subscription = this.subscribeMap.get(topic); + if (!subscription) { + subscription = this.clientIns.subscribe(topic, onmessage, headers); // 接收消息通过 subscribe() 方法实现 + this.subscribeMap.set(topic, subscription); + } + } catch (err) { + setTimeout(() => { + this.subscribe(topic, onmessage, headers); + }, 300); + } + + } else { + setTimeout(() => { + this.subscribe(topic, onmessage, headers); + }, 300); + } + }, + + unsubscribe(topic) { + if (this.subscribeMap) { + const subscription = this.subscribeMap.get(topic); + if (subscription) { + subscription.unsubscribe(); + this.subscribeMap.delete(topic); + console.log('取消订阅'); + } + } + }, + + // 发送消息 + send(url, msg) { + if (this.status) { + if (msg) { + msg = JSON.stringify(msg); + } + try { + this.clientIns.send(url, {}, msg); + } catch (err) { + this.status = false; + this.send(url, msg); + } + } else { + setTimeout(() => { + this.send(url, msg); + }, 300); + } + }, + + disconnect() { + if (this.clientIns && this.clientIns.connected) { + this.clientIns.disconnect(); + this.clientIns = null; + } + this.status = false; + console.log('断开连接'); + } + +}; + +export default StompClient; diff --git a/src/utils/stompClient.js b/src/utils/stompClient.js new file mode 100644 index 000000000..bf837b629 --- /dev/null +++ b/src/utils/stompClient.js @@ -0,0 +1,87 @@ +import SockJS from 'sockjs-client'; +import Stomp from 'stompjs'; +import { getBaseUrl } from '@/utils/baseUrl'; + +const BASE_API = getBaseUrl(); +let baseUrl = "http://192.168.3.6:9600";//本地旭强 +if(BASE_API == 'https://joylink.club/jlcloud'){ + baseUrl = "https://joylink.club/relay"; +}else if(BASE_API == 'https://test.joylink.club/jlcloud'){ + baseUrl = "https://test.joylink.club/relay"; +} + +class StompClient { + + constructor() { + const ws = new SockJS(`${baseUrl}/ws-relay`); + this.client = Stomp.over(ws); + this.client.debug = function (message) { + console.debug(message); + }; + this.subscribeMap = new Map(); // 已订阅，对象{dest:'', handler:function, sub: Object} + this.connected = false; + this.onUsed = false; + } + + connect() { + return new Promise((resolve, reject) => { + this.onUsed = true; + const that = this; + const header = { + login: 'relay', + passcode: 'relay' + }; + this.client.connect(header, + ()=>{ + that.connected = true; + // 重连时需要重新订阅 + that.subscribeMap.forEach((subscribe, dest) => { + that.subscribe(subscribe.dest, subscribe.handler); + }); + resolve(); + }, + (error)=>{ + console.error(error); + this.connected = false; + reject(error); + }); + }); + } + + disconnect() { + this.onUsed = false; + this.client.disconnect(); + } + + subscribe(destination, handler) { + if (!this.connected) { + const that = this; + this.connect().then(() => { + that.subscribe(destination, handler); + }); + } else { + const sub = this.client.subscribe(destination, handler); + this.subscribeMap.set(destination, {dest: destination, handler: handler, sub: sub}); + } + } + + unsubscribe(destination) { + const subscribe = this.subscribeMap.get(destination); + if (subscribe && subscribe.sub) { + subscribe.sub.unsubscribe(); + } else if (subscribe) { + this.subscribeMap.delete(destination); + } + } + + send(destination, body) { + if (body) { + body = JSON.stringify(body); + this.client.send(destination, {}, body); + } else { + console.error('stomp send body required'); + } + } +} + +export default StompClient; From 2c0458a5582553f011bc2f82817133c9def99766 Mon Sep 17 00:00:00 2001 From: fan <18706759286@163.com> Date: Tue, 14 Jan 2020 15:13:56 +0800 Subject: [PATCH 2/3] socket --- src/utils/sock.js | 184 ++++++++++----------------------- src/utils/sockNew.js | 213 --------------------------------------- src/utils/stompClient.js | 87 ---------------- 3 files changed, 51 insertions(+), 433 deletions(-) delete mode 100644 src/utils/sockNew.js delete mode 100644 src/utils/stompClient.js diff --git a/src/utils/sock.js b/src/utils/sock.js index e3909680d..ee639bf6e 100644 --- a/src/utils/sock.js +++ b/src/utils/sock.js @@ -6,55 +6,35 @@ import store from '../store'; import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; -// var SockJS = require('sockjs-client'); -// var Stomp = require('stompjs'); - const isDev = process.env.NODE_ENV === 'development'; const isTest = process.env.NODE_ENV === 'test'; const websocketUrl = `${getBaseUrl()}/joylink-websocket?token=`; -// const websocketUrl = `http://192.168.3.6:9000/joylink-websocket?token=`; +const reconnectInterval = [0, 0, 3000, 5000, 10000, 30000, 60000]; var StompClient = function (headers) { this.url = websocketUrl + getToken(); this.headers = headers || {}; + this.subscribeMap = new Map(); // 已订阅，对象{dest:'', handler:function, sub: Object} this.connect(); }; StompClient.prototype = { socket: null, - clientIns: null, - - subscribeMap: null, - url: '', - status: false, - sockStatus: 0, - headers: { // 'X-Token': getToken() }, - count: 0, - topic: '', - onmessage: null, - checkTimer: null, - // 连接服务端 connect() { return new Promise((resolve, reject) => { try { - // 断开已有连接 - if (this.clientIns && this.clientIns.connected) { - this.clientIns.disconnect(); - this.clientIns = null; - } - // 建立连接对象（还未发起连接） this.socket = new SockJS(websocketUrl + getToken()); @@ -64,68 +44,33 @@ StompClient.prototype = { this.closeStompDebug(); // 向服务器发起websocket连接并发送CONNECT帧 + const that = this; this.clientIns.connect({ 'X-Token': getToken() }, () => { console.info('连接成功.'); - this.count = 0; - this.status = true; + that.count = 0; + that.status = true; // 恢复订阅 - if (this.topic && this.onmessage) { - this.unsubscribe(this.topic); - this.subscribe(this.topic, this.onmessage, this.headers); - } + that.subscribeMap.forEach((subscribe) => { + that.subscribe(subscribe.dest, subscribe.handler); + }); - // 检测sock是否断开 - if (!this.clientIns.ws.onclose) { - this.clientIns.ws.onclose = () => { - checkLoginLine().then(() => { - this.status = false; - this.count++; - this.reconnect(this.count); - }).catch((err) => { - this.logOut(err); - }); - }; - } - - // 定时器检测网络 - if (!this.checkTimer) { - this.checkTimer = setInterval(() => { - if (!this.status || !this.clientIns.ws.onclose) { - // 发送检测心跳，如果失败则在如下情况时需要断开WebSocket; - // 40003/40004/40005: 登录过期; - // 50008: 非法的token; - // 50012: 其他客户端登录了; - // 50014: Token 过期了; - checkLoginLine().then(() => { - // 会有连接延时，需要多次判断 - // 如果socket或着clientIns断开，则重新连接 - if (!this.status || !this.clientIns.ws.onclose) { - this.count++; - this.reconnect(this.count); - } - }).catch((err) => { - this.logOut(err); - }); - } - }, 30000); - } + // sock断开回调 + this.clientIns.ws.onclose = () => { + checkLoginLine().then(() => { + this.status = false; + this.count++; + this.reconnect(this.count); + }).catch((err) => { + this.logOut(err); + }); + }; resolve(this); }, () => { - if (this.checkTimer) { - clearInterval(this.checkTimer); - this.checkTimer = null; - } checkLoginLine().then(() => { this.connect(); }).catch((err) => { - if (err.code == 40003 || err.code == 40004 || err.code == 40005 || err.code == 50012) { - this.logOut(); - } - if (err.code == 50008 || err.code == 50014) { - this.url = websocketUrl + getToken(); - this.connect(); - } + this.logOut(err); }); }); } catch (err) { @@ -135,36 +80,33 @@ StompClient.prototype = { }, logOut(err) { - if (err.code == 40003 || err.code == 40004 || err.code == 40005 || err.code == 50012) { - MessageBox.confirm('你已被登出，请重新登录', '确定登出', { - confirmButtonText: '重新登录', - showCancelButton: false, - type: 'warning' - }).then(() => { - store.dispatch('FedLogOut').then(() => { - location.reload();// 为了重新实例化vue-router对象 避免bug - }); + console.info(err); + MessageBox.confirm('你已被登出，请重新登录', '确定登出', { + confirmButtonText: '重新登录', + showCancelButton: false, + type: 'warning' + }).then(() => { + store.dispatch('FedLogOut').then(() => { + location.reload();// 为了重新实例化vue-router对象 避免bug }); - } - if (err.code == 50008 || err.code == 50014) { - this.url = websocketUrl + getToken(); - this.status = false; - this.count++; - this.reconnect(this.count); - } + }); + }, // 恢复链接 reconnect(count) { console.info(`尝试第${count || 1}次连接.`); - this.connect().then(() => { }).catch(() => { - this.count++; - this.reconnect(this.count); - }); + const that = this; + setTimeout(() => { + that.connect().then(() => { }).catch(() => { + that.count++; + that.reconnect(that.count); + }); + }, reconnectInterval[that.count] || reconnectInterval[reconnectInterval.length - 1] ); + }, closeStompDebug() { if (this.clientIns) { - this.clientIns.debug = undefined; if (isDev || isTest) { this.clientIns.debug = function (message) { console.debug(message); @@ -178,38 +120,22 @@ StompClient.prototype = { this.topic = topic; this.onmessage = onmessage; this.headers = headers; - if (this.status) { - if (!this.subscribeMap) { - this.subscribeMap = new Map(); - } - - try { - var subscription = this.subscribeMap.get(topic); - if (!subscription) { - subscription = this.clientIns.subscribe(topic, onmessage, headers); // 接收消息通过 subscribe() 方法实现 - this.subscribeMap.set(topic, subscription); - } - } catch (err) { - setTimeout(() => { - this.subscribe(topic, onmessage, headers); - }, 300); - } - + if (!this.status) { + this.subscribeMap.set(topic, {dest: topic, handler: onmessage, sub: null}); } else { - setTimeout(() => { - this.subscribe(topic, onmessage, headers); - }, 300); + const sub = this.clientIns.subscribe(topic, onmessage); + this.subscribeMap.set(topic, {dest: topic, handler: onmessage, sub: sub}); } }, unsubscribe(topic) { - if (this.subscribeMap) { - const subscription = this.subscribeMap.get(topic); - if (subscription) { - subscription.unsubscribe(); - this.subscribeMap.delete(topic); - console.log('取消订阅'); - } + const subscription = this.subscribeMap.get(topic); + if (subscription && subscription.sub) { + subscription.sub.unsubscribe(); + this.subscribeMap.delete(topic); + console.log('取消订阅'); + } else if (subscription) { + this.subscribeMap.delete(topic); } }, @@ -218,12 +144,9 @@ StompClient.prototype = { if (this.status) { if (msg) { msg = JSON.stringify(msg); - } - try { this.clientIns.send(url, {}, msg); - } catch (err) { - this.status = false; - this.send(url, msg); + } else { + console.error('发送消息为空'); } } else { setTimeout(() => { @@ -233,17 +156,12 @@ StompClient.prototype = { }, disconnect() { - if (this.checkTimer) { - clearInterval(this.checkTimer); - this.checkTimer = null; - } - if (this.clientIns && this.clientIns.connected) { this.clientIns.disconnect(); this.clientIns = null; } this.status = false; - console.log('断开连接'); + console.info('断开连接'); } }; diff --git a/src/utils/sockNew.js b/src/utils/sockNew.js deleted file mode 100644 index 09457e458..000000000 --- a/src/utils/sockNew.js +++ /dev/null @@ -1,213 +0,0 @@ -import { getToken } from '@/utils/auth'; -import { checkLoginLine } from '@/api/login'; -import { getBaseUrl } from '@/utils/baseUrl'; -import { MessageBox } from 'element-ui'; -import store from '../store'; -import SockJS from 'sockjs-client'; -import Stomp from 'stompjs'; - -const isDev = process.env.NODE_ENV === 'development'; -const isTest = process.env.NODE_ENV === 'test'; -const websocketUrl = `${getBaseUrl()}/joylink-websocket?token=`; - -var StompClient = function (headers) { - this.url = websocketUrl + getToken(); - this.headers = headers || {}; - this.connect(); -}; - -StompClient.prototype = { - socket: null, - - clientIns: null, - - subscribeMap: null, - - url: '', - - status: false, - - sockStatus: 0, - - headers: { - // 'X-Token': getToken() - }, - - count: 0, - - topic: '', - - onmessage: null, - - // 连接服务端 - connect() { - return new Promise((resolve, reject) => { - try { - // 断开已有连接 - if (this.clientIns && this.clientIns.connected) { - this.clientIns.disconnect(); - this.clientIns = null; - } - - // 建立连接对象（还未发起连接） - this.socket = new SockJS(websocketUrl + getToken()); - - // 获取 STOMP 子协议的客户端对象 - this.clientIns = Stomp.over(this.socket); - - this.closeStompDebug(); - - // 向服务器发起websocket连接并发送CONNECT帧 - this.clientIns.connect({ 'X-Token': getToken() }, () => { - console.info('连接成功.'); - this.count = 0; - this.status = true; - - // 恢复订阅 - if (this.topic && this.onmessage) { - this.unsubscribe(this.topic); - this.subscribe(this.topic, this.onmessage, this.headers); - } - - // 检测sock是否断开 - if (!this.clientIns.ws.onclose) { - this.clientIns.ws.onclose = () => { - checkLoginLine().then(() => { - this.status = false; - this.count++; - this.reconnect(this.count); - }).catch((err) => { - this.logOut(err); - }); - }; - } - resolve(this); - }, () => { - checkLoginLine().then(() => { - this.connect(); - }).catch((err) => { - if (err.code == 40003 || err.code == 40004 || err.code == 40005 || err.code == 50012) { - this.logOut(); - } - if (err.code == 50008 || err.code == 50014) { - this.url = websocketUrl + getToken(); - this.connect(); - } - }); - }); - } catch (err) { - reject(err); - } - }); - - }, - logOut(err) { - if (err.code == 40003 || err.code == 40004 || err.code == 40005 || err.code == 50012) { - MessageBox.confirm('你已被登出，请重新登录', '确定登出', { - confirmButtonText: '重新登录', - showCancelButton: false, - type: 'warning' - }).then(() => { - store.dispatch('FedLogOut').then(() => { - location.reload();// 为了重新实例化vue-router对象 避免bug - }); - }); - } - if (err.code == 50008 || err.code == 50014) { - this.url = websocketUrl + getToken(); - this.status = false; - this.count++; - this.reconnect(this.count); - } - }, - // 恢复链接 - reconnect(count) { - console.info(`尝试第${count || 1}次连接.`); - this.connect().then(() => { }).catch(() => { - this.count++; - this.reconnect(this.count); - }); - }, - - closeStompDebug() { - if (this.clientIns) { - this.clientIns.debug = undefined; - if (isDev || isTest) { - this.clientIns.debug = function (message) { - console.debug(message); - }; - } - } - }, - - // 订阅指定的topic - subscribe(topic, onmessage, headers) { - this.topic = topic; - this.onmessage = onmessage; - this.headers = headers; - if (this.status) { - if (!this.subscribeMap) { - this.subscribeMap = new Map(); - } - - try { - var subscription = this.subscribeMap.get(topic); - if (!subscription) { - subscription = this.clientIns.subscribe(topic, onmessage, headers); // 接收消息通过 subscribe() 方法实现 - this.subscribeMap.set(topic, subscription); - } - } catch (err) { - setTimeout(() => { - this.subscribe(topic, onmessage, headers); - }, 300); - } - - } else { - setTimeout(() => { - this.subscribe(topic, onmessage, headers); - }, 300); - } - }, - - unsubscribe(topic) { - if (this.subscribeMap) { - const subscription = this.subscribeMap.get(topic); - if (subscription) { - subscription.unsubscribe(); - this.subscribeMap.delete(topic); - console.log('取消订阅'); - } - } - }, - - // 发送消息 - send(url, msg) { - if (this.status) { - if (msg) { - msg = JSON.stringify(msg); - } - try { - this.clientIns.send(url, {}, msg); - } catch (err) { - this.status = false; - this.send(url, msg); - } - } else { - setTimeout(() => { - this.send(url, msg); - }, 300); - } - }, - - disconnect() { - if (this.clientIns && this.clientIns.connected) { - this.clientIns.disconnect(); - this.clientIns = null; - } - this.status = false; - console.log('断开连接'); - } - -}; - -export default StompClient; diff --git a/src/utils/stompClient.js b/src/utils/stompClient.js deleted file mode 100644 index bf837b629..000000000 --- a/src/utils/stompClient.js +++ /dev/null @@ -1,87 +0,0 @@ -import SockJS from 'sockjs-client'; -import Stomp from 'stompjs'; -import { getBaseUrl } from '@/utils/baseUrl'; - -const BASE_API = getBaseUrl(); -let baseUrl = "http://192.168.3.6:9600";//本地旭强 -if(BASE_API == 'https://joylink.club/jlcloud'){ - baseUrl = "https://joylink.club/relay"; -}else if(BASE_API == 'https://test.joylink.club/jlcloud'){ - baseUrl = "https://test.joylink.club/relay"; -} - -class StompClient { - - constructor() { - const ws = new SockJS(`${baseUrl}/ws-relay`); - this.client = Stomp.over(ws); - this.client.debug = function (message) { - console.debug(message); - }; - this.subscribeMap = new Map(); // 已订阅，对象{dest:'', handler:function, sub: Object} - this.connected = false; - this.onUsed = false; - } - - connect() { - return new Promise((resolve, reject) => { - this.onUsed = true; - const that = this; - const header = { - login: 'relay', - passcode: 'relay' - }; - this.client.connect(header, - ()=>{ - that.connected = true; - // 重连时需要重新订阅 - that.subscribeMap.forEach((subscribe, dest) => { - that.subscribe(subscribe.dest, subscribe.handler); - }); - resolve(); - }, - (error)=>{ - console.error(error); - this.connected = false; - reject(error); - }); - }); - } - - disconnect() { - this.onUsed = false; - this.client.disconnect(); - } - - subscribe(destination, handler) { - if (!this.connected) { - const that = this; - this.connect().then(() => { - that.subscribe(destination, handler); - }); - } else { - const sub = this.client.subscribe(destination, handler); - this.subscribeMap.set(destination, {dest: destination, handler: handler, sub: sub}); - } - } - - unsubscribe(destination) { - const subscribe = this.subscribeMap.get(destination); - if (subscribe && subscribe.sub) { - subscribe.sub.unsubscribe(); - } else if (subscribe) { - this.subscribeMap.delete(destination); - } - } - - send(destination, body) { - if (body) { - body = JSON.stringify(body); - this.client.send(destination, {}, body); - } else { - console.error('stomp send body required'); - } - } -} - -export default StompClient; From 82b5bba847153a54818fa248c69310a84024842f Mon Sep 17 00:00:00 2001 From: joylink_cuiweidong <364937672@qq.com> Date: Tue, 14 Jan 2020 15:19:31 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E8=BF=9E=E6=8E=A5?= =?UTF-8?q?=E5=85=B3=E9=97=AD=E5=90=8Exhr=5Fstreaming=E6=97=A0=E9=99=90?= =?UTF-8?q?=E5=BE=AA=E7=8E=AF=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/modules/user.js | 8 +++++++- src/utils/request.js | 2 ++ src/utils/sock.js | 7 +++++-- src/utils/stomp.js | 7 +++++++ 4 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 2165ad6df..f15370e4b 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -3,7 +3,7 @@ import { login, logout, getInfo } from '@/api/login'; import { getToken, setToken, removeToken } from '@/utils/auth'; import { getUserConfigInfo } from '@/api/management/user'; import { LoginParams } from '@/utils/login'; -import { creatSubscribe, clearSubscribe, perpetualTopic, commonTopic } from '@/utils/stomp'; +import { creatSubscribe, clearSubscribe, perpetualTopic, commonTopic, disconnect} from '@/utils/stomp'; import Cookies from 'js-cookie'; const user = { @@ -65,6 +65,9 @@ const user = { SUBSCRIBE_UN: () => { clearSubscribe(perpetualTopic); clearSubscribe(commonTopic); + }, + Disconnect: ()=>{ + disconnect(); } }, @@ -188,6 +191,9 @@ const user = { }, subscribe_un({commit}, params) { commit('SUBSCRIBE_UN', params); + }, + disconnect({commit}, params) { + commit('Disconnect', params); } } }; diff --git a/src/utils/request.js b/src/utils/request.js index 389cd3150..d9b003ba1 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -43,6 +43,8 @@ service.interceptors.response.use( EventBus.$emit('viewLoading', false); // eslint-disable-next-line no-undef EventBus.$emit('clearCheckLogin'); + // 断开连接 + store.dispatch('Disconnect'); MessageBox.confirm(i18n.t('tip.logoutTips'), i18n.t('tip.hint'), { confirmButtonText: i18n.t('tip.confirmLogin'), showCancelButton: false, diff --git a/src/utils/sock.js b/src/utils/sock.js index e3909680d..770e29afa 100644 --- a/src/utils/sock.js +++ b/src/utils/sock.js @@ -56,7 +56,8 @@ StompClient.prototype = { } // 建立连接对象（还未发起连接） - this.socket = new SockJS(websocketUrl + getToken()); + // （null, {transports:['websocket']}）解决连接关闭后xhr_streaming无限循环 + this.socket = new SockJS(websocketUrl + getToken(), null, {transports:['websocket', 'MozWebSocket']}); // 获取 STOMP 子协议的客户端对象 this.clientIns = Stomp.over(this.socket); @@ -120,7 +121,7 @@ StompClient.prototype = { this.connect(); }).catch((err) => { if (err.code == 40003 || err.code == 40004 || err.code == 40005 || err.code == 50012) { - this.logOut(); + this.logOut(err); } if (err.code == 50008 || err.code == 50014) { this.url = websocketUrl + getToken(); @@ -136,6 +137,7 @@ StompClient.prototype = { }, logOut(err) { if (err.code == 40003 || err.code == 40004 || err.code == 40005 || err.code == 50012) { + this.disconnect(); MessageBox.confirm('你已被登出，请重新登录', '确定登出', { confirmButtonText: '重新登录', showCancelButton: false, @@ -175,6 +177,7 @@ StompClient.prototype = { // 订阅指定的topic subscribe(topic, onmessage, headers) { + // const timeDelay = [1000, 2000, 5000, 10000]; this.topic = topic; this.onmessage = onmessage; this.headers = headers; diff --git a/src/utils/stomp.js b/src/utils/stomp.js index 1db734e4a..f1f0d1a63 100644 --- a/src/utils/stomp.js +++ b/src/utils/stomp.js @@ -35,3 +35,10 @@ export function clearSubscribe(topic) { Vue.prototype.$stomp.unsubscribe(topic); } } + +// 断开连接 +export function disconnect() { + if (Vue.prototype.$stomp) { + Vue.prototype.$stomp.disconnect(); + } +}