socket

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;

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;