右下角消息提示 - 后台配合netty实现(前端代码)

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

首先，我的后台管理系统有个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;
        // 判断当前浏览器是否支持webSocket
        if(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>

关于后台netty的使用可以参见我另外一篇博客：netty+websocket
附上css及js源码(demo)：源码