From cadd5fe1821ff8458764f39364a6f0a5f59921ad Mon Sep 17 00:00:00 2001 From: liuhanqing <447067298@qq.com> Date: Mon, 25 Jan 2021 23:47:59 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90message=E3=80=91websocket?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: liuhanqing <447067298@qq.com> --- .../system/index/service/IndexService.java | 3 + src/main/resources/application-local.yml | 4 +- src/main/resources/application.yml | 1 + src/main/webapp/assets/common/js/common.js | 3 +- .../expand/module/webSocket/webSocket.js | 145 ++++++++++++++++++ src/main/webapp/pages/index.html | 75 ++++++++- 6 files changed, 226 insertions(+), 5 deletions(-) create mode 100644 src/main/webapp/assets/expand/module/webSocket/webSocket.js diff --git a/src/main/java/cn/stylefeng/guns/modular/system/index/service/IndexService.java b/src/main/java/cn/stylefeng/guns/modular/system/index/service/IndexService.java index be363626..c180f69c 100644 --- a/src/main/java/cn/stylefeng/guns/modular/system/index/service/IndexService.java +++ b/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()); diff --git a/src/main/resources/application-local.yml b/src/main/resources/application-local.yml index 21f3561d..a2656620 100644 --- a/src/main/resources/application-local.yml +++ b/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 diff --git a/src/main/resources/application.yml b/src/main/resources/application.yml index 8808bc5a..7d9d403f 100644 --- a/src/main/resources/application.yml +++ b/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 diff --git a/src/main/webapp/assets/common/js/common.js b/src/main/webapp/assets/common/js/common.js index 93948d5f..7ae84737 100644 --- a/src/main/webapp/assets/common/js/common.js +++ b/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; diff --git a/src/main/webapp/assets/expand/module/webSocket/webSocket.js b/src/main/webapp/assets/expand/module/webSocket/webSocket.js new file mode 100644 index 00000000..ab9a20ca --- /dev/null +++ b/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); +}); diff --git a/src/main/webapp/pages/index.html b/src/main/webapp/pages/index.html index 0038fb09..0e58e98b 100644 --- a/src/main/webapp/pages/index.html +++ b/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>