From 3121440c1b29c555e817055723de656509c9c752 Mon Sep 17 00:00:00 2001
From: liuhanqing <447067298@qq.com>
Date: Tue, 26 Jan 2021 19:25:00 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90message=E3=80=91websocket=E5=8F=91?=
 =?UTF-8?q?=E9=80=81=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../expand/module/webSocket/webSocket.js      | 40 +++++++++++++++----
 .../assets/modular/system/index/message.js    |  1 +
 src/main/webapp/pages/index.html              | 27 +++++++++----
 src/main/webapp/pages/layout/_header.html     |  4 +-
 .../pages/modular/system/index/message.html   |  2 +-
 5 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/src/main/webapp/assets/expand/module/webSocket/webSocket.js b/src/main/webapp/assets/expand/module/webSocket/webSocket.js
index ab9a20ca..be271fb9 100644
--- a/src/main/webapp/assets/expand/module/webSocket/webSocket.js
+++ b/src/main/webapp/assets/expand/module/webSocket/webSocket.js
@@ -16,7 +16,8 @@ layui.define(['jquery', 'layer'], function (exports) {
         _self.version = "1.0";//版本
         _self.reCount = param.reCount ? param.reCount : 5;//重连次数
         _self.lockReconnect = false; //重连标识
-        _self.wsReconnectHandler = null; //重连标识
+        _self.heartCheckHandler = null; //心跳检测
+        _self.wsReconnectHandler = null; //重连处理器
         var WebSocket = window.WebSocket || window.MozWebSocket || 0;
         if (!WebSocket) {
             _self.result = 0;
@@ -27,8 +28,9 @@ layui.define(['jquery', 'layer'], function (exports) {
 
         var func = {};
         var msgList = [];//等待发送的信息
+
+        // 连接方法
         _self.connect = function () {
-            debugger
             try {
                 func.WebSocket = new WebSocket(param.wsUrl);
                 if (func.WebSocket) {
@@ -41,8 +43,25 @@ layui.define(['jquery', 'layer'], function (exports) {
             }
         }
 
-        _self.reconnect = function (msg) {
-            debugger
+        // 心跳检测
+        _self.heartCheck = function () {
+            // 15s 发送心跳
+            _self.heartCheckHandler && clearTimeout(_self.heartCheckHandler);
+            _self.heartCheckHandler = setTimeout(function () {
+                try {
+                    // 发送心跳检测
+                    _self.send("&")
+                } catch (e) {
+                    (param.connectErr || emptyFun)(e);
+                    _self.lockReconnect = false;
+                    _self.reconnect()
+                }
+                setTimeout(_self.heartCheck, 15000)
+            }, 15000)
+        }
+
+        // 重新连接方法
+        _self.reconnect = function () {
             if (_self.lockReconnect || _self.reCount <= 0) {
                 return;
             }
@@ -55,8 +74,9 @@ layui.define(['jquery', 'layer'], function (exports) {
                 _self.lockReconnect = false;
             }, 1000)
         }
+
+        // 发送消息方法
         _self.send = function (msg) {
-            debugger
             var state = func.WebSocket.readyState;
             if (state > 1) {
                 console.log("连接已经失败，状态码为：" + state);
@@ -69,11 +89,13 @@ layui.define(['jquery', 'layer'], function (exports) {
                 func.WebSocket.send(msg);
             }
             if (typeof param.WsSend === 'function') {
-                param.WsSend(msg);
+                param.wsSend(msg);
             }
 
         }
-        _self.close = function (a) {
+
+        // 关闭连接方法
+        _self.close = function (event) {
             try {
                 func.WebSocket.close();
             } catch (e) {
@@ -82,10 +104,12 @@ layui.define(['jquery', 'layer'], function (exports) {
 
         }
 
-
+        // 绑定ws事件
         _self.initEventHandle = function () {
             try {
                 func.WebSocket.onopen = function (event) {
+                    _self.reCount = 5;
+                    _self.heartCheck();
                     for (var i = 0; i < msgList.length; i++) {
                         func.WebSocket.send(msgList[i]);
                         msgList.shift();
diff --git a/src/main/webapp/assets/modular/system/index/message.js b/src/main/webapp/assets/modular/system/index/message.js
index 260cc3cb..dcfae1b0 100644
--- a/src/main/webapp/assets/modular/system/index/message.js
+++ b/src/main/webapp/assets/modular/system/index/message.js
@@ -20,6 +20,7 @@ layui.use(['element', 'admin', 'HttpRequest', 'func'], function () {
         var httpRequest = new HttpRequest(Feng.ctxPath + "/sysMessage/allMessageReadFlag", 'get', function (data) {
             $('#messageClearBtn').parents('.layui-tab-item').addClass('show-empty');
             $('#msgCount').html(0);
+            $('#messageDot').hide();
             Feng.success("标记已读成功!");
         }, function (data) {
             Feng.error("标记已读失败!" + data.responseJSON.message);
diff --git a/src/main/webapp/pages/index.html b/src/main/webapp/pages/index.html
index 0e58e98b..82674252 100644
--- a/src/main/webapp/pages/index.html
+++ b/src/main/webapp/pages/index.html
@@ -45,13 +45,14 @@
 
 <script>
     var wsInst = null
-    layui.use(['layer', 'element', 'admin', 'index', 'HttpRequest', 'ws'], function () {
+    layui.use(['layer', 'element', 'admin', 'index', 'HttpRequest', 'ws', 'notice'], function () {
         var $ = layui.jquery;
         var layer = layui.layer;
         var admin = layui.admin;
         var index = layui.index;
         var HttpRequest = layui.HttpRequest;
         var ws = layui.ws;
+        var notice = layui.notice;
 
         // 默认加载主页
         index.loadHome({
@@ -82,26 +83,36 @@
         });
         wsInst = ws.render({
             wsUrl: Feng.wsUrl,//WebSocket的地址
-            connectErr: function (a) {
-                console.log(a)
+            connectErr: function (event) {
+                console.log(event)
                 //如果不支持websocket 回调
             },
-            onWsError: function (a) {
+            onWsError: function (event) {
                 //发生连接错误回调
             },
-            onWsOpen: function (a) {
+            onWsOpen: function (event) {
                 //连接成功回调
                 console.log("Socket 已打开");
                 wsInst.send("消息发送测试(From Client)");
             },
-            onWsMessage: function (a) {
+            onWsMessage: function (event) {
                 //服务器发送消息回调
+                let data = event.data;
+                try {
+                    let msg = JSON.parse(data)
+                    notice.info({
+                        title: msg.messageTitle,
+                        message: msg.messageContent,
+                        timeout: false
+                    });
+                    $('#messageDot').hide();
+                } catch (e) {}
             },
-            onWsClose: function (a) {
+            onWsClose: function (event) {
                 //关闭连接回调
             },
 
-            WsSend: function (a) {
+            wsSend: function (event) {
                 //发送成功后的回调
             },
 
diff --git a/src/main/webapp/pages/layout/_header.html b/src/main/webapp/pages/layout/_header.html
index 2b841e91..4fd3e04b 100644
--- a/src/main/webapp/pages/layout/_header.html
+++ b/src/main/webapp/pages/layout/_header.html
@@ -36,7 +36,9 @@
                 <i class="layui-icon layui-icon-notice"></i>
                 <!-- 未读消息气泡提示 -->
                 @if(msgUnReadCount>0){
-                <span class="layui-badge-dot"></span>
+                <span id="messageDot" style="display: block" class="layui-badge-dot"></span>
+                @}else{
+                <span id="messageDot" style="display: none" class="layui-badge-dot"></span>
                 @}
             </a>
         </li>
diff --git a/src/main/webapp/pages/modular/system/index/message.html b/src/main/webapp/pages/modular/system/index/message.html
index 265af004..531f047b 100644
--- a/src/main/webapp/pages/modular/system/index/message.html
+++ b/src/main/webapp/pages/modular/system/index/message.html
@@ -39,4 +39,4 @@
         </div>
     </div>
 </div>
-<script type="text/javascript" src="${ctxPath}/assets/modular/frame/message.js"></script>
+<script type="text/javascript" src="${ctxPath}/assets/modular/system/index/message.js"></script>