WebSocket实现实时接收消息(前端代码)

54 篇文章 0 订阅
WebSocket实现实时接收通知,并弹窗提示,以下为前端代码,后端代码自己实现
var init = {
    initWebsocket:function () {
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            var wsServer = "ws:"+init.getCaption('<%=basePath%>')+"/message/${LOCAL_CLINET_USER.userName}"; 
            //服务器地址,<%=basePath%>为获取jsp本地服务地址,${LOCAL_CLINET_USER.userName}为jeecg后台返回的当前登录的用户名

            websocket = new WebSocket(wsServer);
        }
        else {
            layer.alert('当前浏览器版本过低,请使用指定版本浏览器',{icon: 0})
        }

        //连接发生错误的回调方法
        websocket.onerror = function () {
            console.log('连接失败');
        };

        //连接成功建立的回调方法
        websocket.onopen = function () {
            console.log('连接成功');
            // alert('连接成功',websocket.readyState);//查看websocket当前状态
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            if(event.data == 1){  //根据后台返回的状态判断是登录还是消息
                layer.alert('您的账号已经在另一处登录了,您被迫下线', {icon: 0},function (index) {
                    layer.close(index);
                    //跳转到登录页
                    window.location.href = 'loginController.do?login'
                });
           }else{
               layer.open({
                     type: 1,
                     title: '消息提醒',
                     shade: false, //遮罩
                     area: ['300px', '150px'],
                     offset: 'rb', //右下角弹出
                     time: 10000, //10秒后自动关闭
                     anim: 2,
                     content: '<div style="margin: 10px">' +
                         '<label style="font-weight: bold">内容:</label>' +
                         '<p style="display:inline-block">'+event.data+'</p>' +
                         '</div>'
                   /*  btn:['确定'],
                     btn1: function (index) {

                     }*/
                 });
            }
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            console.log('连接断开回调');
        }

        //监听当前页面关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
        window.onbeforeunload = function () {
            init.closeWebSocket();
        }
    },
    //关闭WebSocket连接
    closeWebSocket:function () {
        websocket.close();
    },
    //发送消息
    send:function(message) {
        websocket.send(message);

    },
    //截取符号后面的字符
    getCaption:function(str) {
    var index=str.indexOf("://");
    str = str.substring(index+1,str.length);
    return str;
}
};
  • 7
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值