first commit

历届学生/fontendseven/项目练习/上课项目/聊天/fontend/js/lib/WebSocket.js

@@ -0,0 +1,125 @@
+class WebSocketClass {
+    constructor() {
+        // 用来设计单例模式的
+        this.instance = null;
+        // 用来保存 new WebSocket 的实例
+        this.ws = null;
+        // close 关闭，open  打开
+        this.status = 'close';
+        // 发送的心跳数值 ping 询问后端，pong 后端的响应
+        this.pingPong = 'ping';
+        this.callMessage = {
+            // SocketSystem: () => {},
+            // SocketUser: () => {},
+        };
+        this.connect();
+    }
+
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new WebSocketClass();
+        }
+        return this.instance
+    }
+
+    connect() {
+        this.ws = new WebSocket(config.checkSocket());
+        this.ws.onopen = e => {
+            this.status = 'open';
+            console.log(`连接成功`);
+            this.heartCheck();
+            this.onClose();
+            this.getMessage();
+        };
+    }
+
+    heartCheck() {
+        this.pingPong = 'ping';
+        this.pingInterval = setInterval(() => {
+            if (this.ws.readyState === 1) {
+                this.send({
+                    type: "SocketHealthy",
+                    action: null,
+                    data: "ping"
+                }) // 客户端发送ping
+            }
+        }, 5000);
+
+        this.pongInterval = setInterval(() => {
+            if (this.pingPong === 'ping') {
+                this.closeHandle('服务器没有返回pong，重启webSocket');
+            }
+            console.log('收到服务器的 pong');
+            this.pingPong = 'ping';
+        }, 10000);
+    }
+
+    closeHandle(e = 'err') {
+        console.log(e)
+        if (this.status !== 'close') {
+            if (this.pingInterval !== undefined && this.pongInterval !== undefined) {
+                clearInterval(this.pingInterval);
+                clearInterval(this.pongInterval);
+            }
+            this.connect();
+        } else {
+            console.log(`websocket手动关闭,或者正在连接`);
+        }
+    }
+
+    getMessage() {
+        this.ws.onmessage = e => {
+            var res = JSON.parse(e.data);
+            switch (res.type) {
+                case "SocketHealthy":
+                    // console.log("前端 健康检查：", res.data)
+                    this.pingPong = 'pong';
+                    break;
+                case "SocketUser":
+                    // console.log("前端 用户消息：", res.data);
+                    if (res.action == "to") {
+                        this.callMessage["to"](res.data);
+                        return;
+                    } else if (res.action == "list") {
+                        this.callMessage["userList"](res.data);
+                    } else {
+                        this.callMessage["SocketUser"](res.data);
+                    }
+                    break;
+                case "SocketSystem":
+                    // console.log("前端 系统消息：", res.data)
+                    this.callMessage["SocketSystem"](res.data)
+                    break;
+            }
+        };
+    }
+
+
+    send(mes = null, callback = null, type = null) {
+        if (mes == null) {
+            if (callback != null) {
+                this.callMessage[type] = callback
+            }
+        } else {
+            if (callback != null) {
+                this.callMessage[type] = callback
+            }
+            this.ws.send(JSON.stringify(mes))
+        }
+    }
+
+    onClose() {
+        this.ws.onclose = (evt) => {
+            console.log("链接关闭: ", evt);
+        };
+    }
+
+    close() {
+        clearInterval(this.pingInterval);
+        clearInterval(this.pongInterval);
+        this.status = 'close';
+        this.ws.send('close');
+        this.ws.close();
+        console.log('close');
+    }
+}