Merge remote-tracking branch 'origin/dev-websocket'

src/main/java/cn/stylefeng/guns/modular/system/index/service/IndexService.java

@@ -65,6 +65,9 @@ public class IndexService {
         // 获取人员姓名
         renderMap.put("name", simpleUserInfo.getRealName());
 
+        // 获取登录用户ws-url
+        renderMap.put("wsUrl", loginUser.getWsUrl());
+
         // 未读消息数量
         MessageParam messageParam = new MessageParam();
         messageParam.setReadFlag(MessageReadFlagEnum.UNREAD.getCode());

src/main/resources/application-local.yml

@@ -4,7 +4,7 @@ spring:
     driver-class-name: com.mysql.cj.jdbc.Driver
     url: jdbc:mysql://localhost:3306/guns?autoReconnect=true&useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=CONVERT_TO_NULL&useSSL=false&serverTimezone=CTT
     username: root
-    password: 123456
+    password: root
 
     # 连接池大小根据实际情况调整
     max-active: 100

src/main/resources/application.yml

@@ -21,6 +21,7 @@ spring:
     serialization:
       indent_output: false
   flyway:
+    enabled: true
     locations: classpath:db/migration
     # 当迁移时发现目标schema非空，而且带有没有元数据的表时，是否自动执行基准迁移
     baseline-on-migrate: true
@@ -67,3 +68,6 @@ prometheus:
   url: http://localhost:9090/api/v1/
   # 非必须配置项
   instance:
+web-socket:
+  open: true
+  ws-url: ws://localhost:${server.port}/message/websocket/{userId}

src/main/webapp/assets/common/js/common.js

@@ -151,7 +151,8 @@ layui.config({
     HttpRequest: '../../expand/module/HttpRequest/HttpRequest',
     func: '../../expand/module/func/func',
     dict: '../../expand/module/dict/dict',
-    gunsSelect: '../../expand/module/gunsSelect/gunsSelect'
+    gunsSelect: '../../expand/module/gunsSelect/gunsSelect',
+    ws: '../../expand/module/webSocket/webSocket'
 
 }).use(['layer', 'admin'], function () {
     var $ = layui.jquery;

src/main/webapp/assets/expand/module/webSocket/webSocket.js

@@ -0,0 +1,169 @@
+/**
+ * webSocket简单封装
+ *
+ * @author liuhanqing
+ * @date 2021/1/25 22:47
+ */
+layui.define(['jquery', 'layer'], function (exports) {
+    var $ = layui.$;
+    var layer = layui.layer;
+
+    var ws = function (param) {
+        var _self = this;
+        var emptyFun = function (data) {
+            console.log(data)
+        };
+        _self.version = "1.0";//版本
+        _self.reCount = param.reCount ? param.reCount : 5;//重连次数
+        _self.lockReconnect = false; //重连标识
+        _self.heartCheckHandler = null; //心跳检测
+        _self.wsReconnectHandler = null; //重连处理器
+        var WebSocket = window.WebSocket || window.MozWebSocket || 0;
+        if (!WebSocket) {
+            _self.result = 0;
+            _self.msg = "您的浏览器不支持WebSocket";
+            (param.connectErr || emptyFun)(_self.msg);
+            return;
+        }
+
+        var func = {};
+        var msgList = [];//等待发送的信息
+
+        // 连接方法
+        _self.connect = function () {
+            try {
+                func.WebSocket = new WebSocket(param.wsUrl);
+                if (func.WebSocket) {
+                    _self.initEventHandle()
+                }
+            } catch (e) {
+                (param.connectErr || emptyFun)(e);
+                _self.lockReconnect = false;
+                _self.reconnect()
+            }
+        }
+
+        // 心跳检测
+        _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;
+            }
+            _self.lockReconnect = true;
+            // 没连接上1s 后重试
+            _self.wsReconnectHandler && clearTimeout(_self.wsReconnectHandler);
+            _self.wsReconnectHandler = setTimeout(function () {
+                _self.reCount--;
+                _self.connect();
+                _self.lockReconnect = false;
+            }, 1000)
+        }
+
+        // 发送消息方法
+        _self.send = function (msg) {
+            var state = func.WebSocket.readyState;
+            if (state > 1) {
+                console.log("连接已经失败，状态码为：" + state);
+                return false
+            }
+            if (state == 0) {//未连接
+                msgList.push(msg);
+            }
+            if (state == 1) {//已经连接成功
+                func.WebSocket.send(msg);
+            }
+            if (typeof param.WsSend === 'function') {
+                param.wsSend(msg);
+            }
+
+        }
+
+        // 关闭连接方法
+        _self.close = function (event) {
+            try {
+                func.WebSocket.close();
+            } catch (e) {
+                (param.connectErr || emptyFun)(e);
+            }
+
+        }
+
+        // 绑定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();
+                    }
+                    //console.log("onopen");
+                    //console.log(event);
+                    if (typeof param.onWsOpen === 'function') {
+                        param.onWsOpen(event);
+                    }
+                }
+
+                func.WebSocket.onmessage = function (event) {
+                    //console.log("onmessage");
+                    //console.log(event);
+                    (param.onWsMessage || emptyFun)(event);
+                }
+
+                func.WebSocket.onclose = function (event) {
+
+                    _self.lockReconnect = false;
+                    _self.reconnect()
+                    msgList = [];
+                    if (typeof param.onWsClose === 'function') {
+                        param.onWsClose(event);
+                    }
+                }
+
+                func.WebSocket.onerror = function (event) {
+
+                    _self.lockReconnect = false;
+                    _self.reconnect()
+                    msgList = [];
+
+                    if (typeof param.onWsError === 'function') {
+                        param.onWsError(event);
+                    } else {
+                        console.log(e);
+                        console.log("连接错误");
+                    }
+                }
+            } catch (e) {
+                console.log(e)
+            }
+        }
+
+
+        _self.connect();
+
+    }
+    var initFunc = {
+        render: function (options) {
+            var inst = new ws(options)
+            return inst;
+        }
+    };
+    exports('ws', initFunc);
+});

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);

src/main/webapp/pages/index.html

@@ -36,19 +36,23 @@
 <script type="text/javascript">
     var Feng = {
         ctxPath: "${ctxPath}",
-        version: '${constants.getReleaseVersion()}'
+        version: '${constants.getReleaseVersion()}',
+        wsUrl: '${wsUrl}'
     };
 </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>
-    layui.use(['layer', 'element', 'admin', 'index', 'HttpRequest'], function () {
+    var wsInst = null
+    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({
@@ -77,7 +81,85 @@
             });
             request.start();
         });
+        wsInst = ws.render({
+            wsUrl: Feng.wsUrl,//WebSocket的地址
+            connectErr: function (event) {
+                console.log(event)
+                //如果不支持websocket 回调
+            },
+            onWsError: function (event) {
+                //发生连接错误回调
+            },
+            onWsOpen: function (event) {
+                //连接成功回调
+                console.log("Socket 已打开");
+                wsInst.send("消息发送测试(From Client)");
+            },
+            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 (event) {
+                //关闭连接回调
+            },
+
+            wsSend: function (event) {
+                //发送成功后的回调
+            },
+
+        })
     });
+
+    /*
+        var socket;
+        if (typeof (WebSocket) == "undefined") {
+            console.log("遗憾：您的浏览器不支持WebSocket");
+        } else {
+
+            //实现化WebSocket对象
+            //指定要连接的服务器地址与端口建立连接
+            //注意ws、wss使用不同的端口。我使用自签名的证书测试，
+            //无法使用wss，浏览器打开WebSocket时报错
+            //ws对应http、wss对应https。
+            socket = new WebSocket(Feng.wsUrl);
+            //连接打开事件
+            socket.onopen = function() {
+                console.log("Socket 已打开");
+                socket.send("消息发送测试(From Client)");
+            };
+            //收到消息事件
+            socket.onmessage = function(msg) {
+                console.log(msg.data);
+            };
+            //连接关闭事件
+            socket.onclose = function() {
+                console.log("Socket已关闭");
+            };
+            //发生了错误事件
+            socket.onerror = function() {
+                alert("Socket发生了错误");
+            }
+
+            //窗口关闭时，关闭连接
+            window.unload=function() {
+                socket.close();
+            };
+
+        }*/
+    window.unload = function () {
+        if (wsInst) {
+            wsInst.close();
+        }
+    };
 </script>
 </body>
 

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>

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>