【message】websocket

Signed-off-by: liuhanqing <447067298@qq.com>

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

@@ -2,9 +2,9 @@
 spring:
   datasource:
     driver-class-name: com.mysql.cj.jdbc.Driver
-    url: jdbc:mysql://192.168.253.20:3306/guns?autoReconnect=true&useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=CONVERT_TO_NULL&useSSL=false&serverTimezone=CTT
+    url: jdbc:mysql://localhost:3306/guns?autoReconnect=true&useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=CONVERT_TO_NULL&useSSL=false&serverTimezone=CTT
     username: root
-    password: MySQLrootcmdi1953!(@)
+    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

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,145 @@
+/**
+ * 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.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 () {
+            debugger
+            try {
+                func.WebSocket = new WebSocket(param.wsUrl);
+                if (func.WebSocket) {
+                    _self.initEventHandle()
+                }
+            } catch (e) {
+                (param.connectErr || emptyFun)(e);
+                _self.lockReconnect = false;
+                _self.reconnect()
+            }
+        }
+
+        _self.reconnect = function (msg) {
+            debugger
+            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) {
+            debugger
+            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 (a) {
+            try {
+                func.WebSocket.close();
+            } catch (e) {
+                (param.connectErr || emptyFun)(e);
+            }
+
+        }
+
+
+        _self.initEventHandle = function () {
+            try {
+                func.WebSocket.onopen = function (event) {
+                    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/pages/index.html

@@ -36,19 +36,22 @@
 <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'], function () {
         var $ = layui.jquery;
         var layer = layui.layer;
         var admin = layui.admin;
         var index = layui.index;
         var HttpRequest = layui.HttpRequest;
+        var ws = layui.ws;
 
         // 默认加载主页
         index.loadHome({
@@ -77,7 +80,75 @@
             });
             request.start();
         });
+        wsInst = ws.render({
+            wsUrl: Feng.wsUrl,//WebSocket的地址
+            connectErr: function (a) {
+                console.log(a)
+                //如果不支持websocket 回调
+            },
+            onWsError: function (a) {
+                //发生连接错误回调
+            },
+            onWsOpen: function (a) {
+                //连接成功回调
+                console.log("Socket 已打开");
+                wsInst.send("消息发送测试(From Client)");
+            },
+            onWsMessage: function (a) {
+                //服务器发送消息回调
+            },
+            onWsClose: function (a) {
+                //关闭连接回调
+            },
+
+            WsSend: function (a) {
+                //发送成功后的回调
+            },
+
+        })
     });
+
+    /*
+        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>