From 0f84522c9b6857dbfdf2380817a38c6717a80c45 Mon Sep 17 00:00:00 2001
From: rays <1615175118@qq.com>
Date: Thu, 3 Jun 2021 16:02:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9WebSocket=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pom.xml                                       |  7 ++
 src/main/resources/application.yml            |  9 +--
 .../expand/module/webSocket/webSocket.js      |  6 +-
 src/main/webapp/pages/index.html              | 70 ++++++++++++++-----
 4 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/pom.xml b/pom.xml
index ffd46ae3..c9312f8d 100644
--- a/pom.xml
+++ b/pom.xml
@@ -135,6 +135,13 @@
             <version>${roses.kernel.version}</version>
         </dependency>
 
+        <!--Socket模块-->
+        <dependency>
+            <groupId>cn.stylefeng.roses</groupId>
+            <artifactId>socket-spring-boot-starter</artifactId>
+            <version>${roses.kernel.version}</version>
+        </dependency>
+
         <!--wrapper工具-->
         <dependency>
             <groupId>cn.stylefeng.roses</groupId>
diff --git a/src/main/resources/application.yml b/src/main/resources/application.yml
index 31be9c68..360afec6 100644
--- a/src/main/resources/application.yml
+++ b/src/main/resources/application.yml
@@ -2,6 +2,11 @@ server:
   port: 8080
   max-http-header-size: 10240
 
+logging:
+  level:
+    root: error
+    cn.stylefeng: debug
+
 spring:
   application:
     name: guns
@@ -54,10 +59,6 @@ mybatis-plus:
       id-type: assign_id
       table-underline: true
 
-# 是否开启websocket推送消息
-web-socket:
-  open: true
-
 # 单点登录开关
 sso:
   openFlag: false
diff --git a/src/main/webapp/assets/expand/module/webSocket/webSocket.js b/src/main/webapp/assets/expand/module/webSocket/webSocket.js
index be271fb9..be2b2047 100644
--- a/src/main/webapp/assets/expand/module/webSocket/webSocket.js
+++ b/src/main/webapp/assets/expand/module/webSocket/webSocket.js
@@ -50,7 +50,11 @@ layui.define(['jquery', 'layer'], function (exports) {
             _self.heartCheckHandler = setTimeout(function () {
                 try {
                     // 发送心跳检测
-                    _self.send("&")
+                    let heartMsg = {
+                        "type": "299999",
+                        "data": new Date().getMilliseconds()
+                    };
+                    _self.send(JSON.stringify(heartMsg))
                 } catch (e) {
                     (param.connectErr || emptyFun)(e);
                     _self.lockReconnect = false;
diff --git a/src/main/webapp/pages/index.html b/src/main/webapp/pages/index.html
index 053c882d..90c5d452 100644
--- a/src/main/webapp/pages/index.html
+++ b/src/main/webapp/pages/index.html
@@ -37,14 +37,40 @@
     var Feng = {
         ctxPath: "${ctxPath}",
         version: '${constants.getReleaseVersion()}',
-        wsUrl: '${wsUrl}'
+        wsUrl: '${wsUrl}',
+        userId: '${userId}'
     };
 </script>
 <script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
 <script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
 
 <script>
+    // WebSocket实例
     var wsInst = null
+
+    // 全局消息类型声明
+    const WEB_SOCKET_MSG_TYPE = {
+        SERVER: {
+            SYS_NOTICE_MSG_TYPE: "100001"
+        },
+        CLIENT: {
+            USER_ADD_MSG_TYPE: "200001"
+        }
+    }
+
+    // 全局消息类型和回调函数维护中心
+    const msgTypeCallBackMap = new Map()
+
+    // 新增一个回调
+    function insertCallback(msgType, func) {
+        msgTypeCallBackMap.set(msgType, func)
+    }
+
+    // 删除一个回调
+    function deleteCallback(msgType) {
+        msgTypeCallBackMap.delete(msgType)
+    }
+
     layui.use(['layer', 'element', 'admin', 'index', 'HttpRequest', 'ws', 'notice', 'i18n'], function () {
         var $ = layui.jquery;
         var layer = layui.layer;
@@ -100,6 +126,8 @@
             });
             request.start();
         });
+
+        // 全局WebSocket加载
         wsInst = ws.render({
             wsUrl: Feng.wsUrl, //WebSocket的地址
             connectErr: function (event) {
@@ -110,21 +138,23 @@
                 //发生连接错误回调
             },
             onWsOpen: function (event) {
-                //连接成功回调
-                console.log("Socket 已打开");
-                wsInst.send("消息发送测试(From Client)");
+                // 绑定用户
+                let initMsg = {
+                    "type": WEB_SOCKET_MSG_TYPE.CLIENT.USER_ADD_MSG_TYPE,
+                    "formUserId": Feng.userId,
+                    "data": WEB_SOCKET_MSG_TYPE.SERVER.SYS_NOTICE_MSG_TYPE
+                };
+                wsInst.send(JSON.stringify(initMsg));
             },
             onWsMessage: function (event) {
                 //服务器发送消息回调
                 let data = event.data;
                 try {
-                    let msg = JSON.parse(data)
-                    notice.info({
-                        title: '[' + msg.businessTypeValue + ']' + msg.messageTitle,
-                        message: msg.messageContent,
-                        timeout: false
-                    });
-                    $('#messageDot').show();
+                    let originalData = JSON.parse(data)
+                    let func = msgTypeCallBackMap.get(originalData.type);
+                    if (func) {
+                        eval(func(originalData));
+                    }
                 } catch (e) {
                 }
             },
@@ -135,15 +165,19 @@
             wsSend: function (event) {
                 //发送成功后的回调
             },
-
         })
-    });
 
-    window.unload = function () {
-        if (wsInst) {
-            wsInst.close();
-        }
-    };
+        // 注册系统消息监听
+        insertCallback(WEB_SOCKET_MSG_TYPE.SERVER.SYS_NOTICE_MSG_TYPE, function (massage) {
+            notice.info({
+                title: '[' + massage.data.businessTypeValue + ']' + massage.data.messageTitle,
+                message: massage.data.messageContent,
+                timeout: false
+            });
+            $('#messageDot').show();
+        })
+
+    });
 </script>
 </body>