import { getToken } from '@/utils/auth'; import { checkLoginLine } from '@/api/login'; import { getBaseUrl } from '@/utils/baseUrl'; import { MessageBox, Message } 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=`; const reconnectInterval = [0, 0, 3000, 5000, 10000, 30000, 60000]; let notFirstConnect = false; 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, url: '', status: false, sockStatus: 0, headers: { // 'X-Token': getToken() }, count: 0, topic: '', onmessage: null, // 连接服务端 connect() { return new Promise((resolve, reject) => { try { // 建立连接对象(还未发起连接) // (null, {transports:['websocket']})解决连接关闭后xhr_streaming无限循环 this.socket = new SockJS(websocketUrl + getToken(), null, {transports:['websocket', 'MozWebSocket']}); // 获取 STOMP 子协议的客户端对象 this.clientIns = Stomp.over(this.socket); this.closeStompDebug(); // 向服务器发起websocket连接并发送CONNECT帧 const that = this; this.clientIns.connect({ 'X-Token': getToken() }, () => { if (notFirstConnect) { Message.success('连接成功'); } console.info('连接成功.'); that.count = 0; that.status = true; // 恢复订阅 that.subscribeMap.forEach((subscribe) => { that.subscribe(subscribe.dest, subscribe.handler); }); // sock断开回调 this.clientIns.ws.onclose = () => { MessageBox.confirm('socket已经断开'); notFirstConnect = true; checkLoginLine().then(() => { this.status = false; this.count++; this.reconnect(this.count); }).catch((err) => { this.logOut(err); }); }; resolve(this); }, () => { checkLoginLine().then(() => { this.connect(); }).catch((err) => { this.logOut(err); }); }); } catch (err) { reject(err); } }); }, logOut(err) { console.info(err); MessageBox.confirm('你已被登出,请重新登录', '确定登出', { confirmButtonText: '重新登录', showCancelButton: false, type: 'warning' }).then(() => { store.dispatch('FedLogOut').then(() => { location.reload();// 为了重新实例化vue-router对象 避免bug }); }); }, // 恢复链接 reconnect(count) { console.info(`尝试第${count || 1}次连接.`); Message.error(`正在尝试第${count || 1}次连接.`); 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) { if (isDev || isTest) { this.clientIns.debug = function (message) { console.debug(message); }; } } }, // 订阅指定的topic subscribe(topic, onmessage, headers) { // const timeDelay = [1000, 2000, 5000, 10000]; this.topic = topic; this.onmessage = onmessage; this.headers = headers; if (!this.status) { this.subscribeMap.set(topic, {dest: topic, handler: onmessage, sub: null}); } else { const sub = this.clientIns.subscribe(topic, onmessage); this.subscribeMap.set(topic, {dest: topic, handler: onmessage, sub: sub}); } }, unsubscribe(topic) { 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); } }, // 发送消息 send(url, msg) { if (this.status) { if (msg) { msg = JSON.stringify(msg); this.clientIns.send(url, {}, msg); } else { console.error('发送消息为空'); } } else { setTimeout(() => { this.send(url, msg); }, 300); } }, disconnect() { if (this.clientIns && this.clientIns.connected) { this.clientIns.disconnect(); this.clientIns = null; } this.status = false; console.info('断开连接'); } }; export default StompClient;