socket
This commit is contained in:
fan
parent
5d84791c47
commit
63cd08ccf6
213
src/utils/sockNew.js
Normal file
213
src/utils/sockNew.js
Normal file
@ -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;
|
||||
87
src/utils/stompClient.js
Normal file
87
src/utils/stompClient.js
Normal file
@ -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;
|
||||
Loading…
Reference in New Issue
Block a user