右下角消息提示

编程入门行业动态更新时间:2024-10-03 14:27:18

右下角消息提示

需求：后台管理系统的每个界面可以在右下角弹出消息提示框：如下图：

首先，我的后台管理系统有个common.jsp，里面加载了很多公用的css及js文件，每个界面都引入了此jsp。所以我不用重写页面，直接在这个jsp文件中开工：

1.引入css文件到公用页面：

<!--消息通知必要样式-->
<link rel="stylesheet" href="${ctx}/./plugin/topic-msg/css/naranja.min.css">

2.引入js文件到公用页面：

<!--消息通知必要js-->
<script type="text/javascript" src="${ctx}/./plugin/topic-msg/js/naranja.js"></script>

3.在该页面的body内写入如下代码：

<script>/**登录成功之后进行长连接消息提示*/nettyConnect(${sessionScope.sessionUser.userId});/**全局使用的WebSocket*/var socket;/**全局使用的用户id*/var userId;/*** 该方法与后台netty建立长连接,保持通信* @param uid 用户登录成功之后返回的用户id*/function nettyConnect(uid) {/**给全局用户id赋值*/userId = uid;// 判断当前浏览器是否支持webSocketif(window.WebSocket){socket = new WebSocket("ws://localhost:58080/webSocket")// 相当于channel的read事件，ev 收到服务器回送的消息socket.onmessage = function (ev) {/**该方法可直接将信息通知在系统右下角*/narn ('log','通知信息',ev.data,5000);}// 相当于连接开启socket.onopen = function (ev) {// narn ('log','通知信息','连接开启了...',5000);socket.send(JSON.stringify({// 连接成功将，用户ID传给服务端uid: userId}));}// 相当于连接关闭socket.onclose = function (ev) {narn ('log','通知信息','连接关闭了...',5000);}}else{alert("当前浏览器不支持webSocket");}// 如果前端需要保持连接,则需要定时往服务器针对自己发送请求,返回的参数和发送参数一致则证明时间段内有交互,服务端则不进行连接断开操作var int = setInterval(function clock() {socket.send(JSON.stringify({// 连接成功将，用户ID传给服务端uid: userId}));},30000);//1500000为25分钟,定时循环,后台设置30的心跳检测时间}/*** 消息通知右下角提示* @param type 提示样式(默认:log 成功:success 警告:warn 危险:error)* @param title 消息提示标题* @param msg 消息内容* @param time 持续时间('keep'为永久持续,5000为5秒显示)*/function narn (type,title,msg,time) {naranja()[type]({title: title,text: msg,timeout: time,buttons: [{text: '接受',click: function (e) {naranja().success({title: '通知',text: '通知被接受'})}},{text: '取消',click: function (e) {e.closeNotification()}}]})}
</script>