rt-sim-training-client/src/utils/sock.js

import { handleToken } from '@/utils/auth';
import { checkLoginLine } from '@/api/login';
import { getBaseUrl } from '@/utils/baseUrl';
import { MessageBox } from 'element-ui';
import store from '../store';
import { gainClientId } from '@/utils/auth';

var SockJS = require('sockjs-client');
var Stomp = require('stompjs');

const isDev = process.env.NODE_ENV === 'development';
const websocketUrl = `${getBaseUrl()}/joylink-websocket?token=`;
// const websocketUrl = `http://192.168.3.6:9000/joylink-websocket?token=`;

var StompClient = function (headers) {
	this.url = websocketUrl + handleToken();
	this.headers = headers || {};
	this.connect();
};

StompClient.prototype = {
	socket: null,

	clientIns: null,

	subscribeMap: null,

	url: '',

	status: false,

	sockStatus: 0,

	headers: {
		// 'X-Token': handleToken()
	},

	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 + handleToken());

				// 获取 STOMP 子协议的客户端对象
				this.clientIns = Stomp.over(this.socket);

				this.closeStompDebug();

				// 向服务器发起websocket连接并发送CONNECT帧
				this.clientIns.connect({ 'X-Token': handleToken() }, () => {
					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);
							});
						};
					}

					// 定时器检测网络
					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);
					}
					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 + handleToken();
							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', gainClientId()).then(() => {
					location.reload();// 为了重新实例化vue-router对象 避免bug
				});
			});
		}
		if (err.code == 50008 || err.code == 50014) {
			this.url = websocketUrl + handleToken();
			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) {
				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) {
			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.checkTimer) {
			clearInterval(this.checkTimer);
			this.checkTimer = null;
		}

		if (this.clientIns && this.clientIns.connected) {
			this.clientIns.disconnect();
			this.clientIns = null;
		}
		this.status = false;
		console.log('断开连接');
	}

};

export default StompClient;