JS实现websocket长轮询实时消息提示的效果


Posted in Javascript onOctober 10, 2017

效果图如下:

JS实现websocket长轮询实时消息提示的效果

参考代码如下:

jsp代码:

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<div class="page-header navbar navbar-fixed-top">
  <div class="page-header-inner">
    <div class="page-logo">
      <a href="<c:url value=" rel="external nofollow" rel="external nofollow" /"/>"><img
        src="<c:url value="/img/logo.png"/>" style="height: 14px" alt="logo"
        class="logo-default" /></a>
      <div class="menu-toggler sidebar-toggler hide"></div>
    </div>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="menu-toggler responsive-toggler"
      data-toggle="collapse" data-target=".navbar-collapse"></a>
    <div class="top-menu">
      <ul class="nav navbar-nav pull-right">
        <li class="dropdown dropdown-alert"><a href="#" rel="external nofollow" rel="external nofollow" 
          class="dropdown-toggle" data-toggle="dropdown"
          data-hover="dropdown" data-close-others="true"> <span
            class="badge pull-left"></span><label class="hidden-sm">报警</label><i
            class="fa fa-bell"></i>
        </a>
          <ul class="dropdown-menu">
          </ul></li>
        <li class="dropdown dropdown-user"><a href="#" rel="external nofollow" rel="external nofollow" 
          class="dropdown-toggle" data-toggle="dropdown"
          data-hover="dropdown" data-close-others="true"> <span
            class="username username-hide-on-mobile">你好,${sessionScope.username}</span>
            <i class="fa fa-angle-down"></i>
        </a>
          <ul class="dropdown-menu">
            <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" id="updatePass"><i
                class="icon-lock"></i>修改密码</a></li>
            <li><a href="<c:url value=" rel="external nofollow" rel="external nofollow" /logout"/> "><i
                class="icon-key"></i>退出登录</a></li>
          </ul></li>
      </ul>
    </div>
  </div>
</div>
<div class="clearfix"></div>
<script>
  //toastr.sos(num1)
</script>
<script type="text/javascript"
  src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"
  src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.js"></script>
<script type="text/javascript">
  function wsPath() {
    var pathName = window.document.location.pathname;
    var host = window.location.host;
    var projectName = pathName.substring(0,
        pathName.substr(1).indexOf('/') + 1);
    return (host + projectName);
  }
  wsPath = wsPath();
  var websocket = null;
  if ('WebSocket' in window) {
    websocket = new WebSocket("ws://" + wsPath + "/websocket/socketServer");
  } else if ('MozWebSocket' in window) {
    websocket = new MozWebSocket("ws://" + wsPath
        + "/bison/websocket/socketServer");
  } else {
    websocket = new SockJS("http://" + wsPath
        + "/bison/sockjs/socketServer");
  }
  websocket.onmessage = onMessage;
  websocket.onope = onOpen;
  websocket.onerror = onError;
  websocket.onclose = onClose;
  function onOpen() {
  }
  function onMessage(evt) {
    var $uncheckedAlertMenuBtn = $("a.dropdown-toggle", $uncheckedAlertMenu);
    var $uncheckedAlertBadge = $("span.badge", $uncheckedAlertMenuBtn);
    var $uncheckedAlertMenu = $('li.dropdown-alert');
    var $uncheckedAlertList = $('ul', $uncheckedAlertMenu);
    var a = $uncheckedAlertBadge.html();
    $uncheckedAlertBadge.html(Number(a) + 1);
    //判断报警类型 如果是位置偏移,place+1
    if (evt.data == "1") {
      var count;
      var a = $("#number").html();
      if (a == null) {
        count = 1;
        $uncheckedAlertList
            .prepend('<li class="place-alert"><a href="alert?menuId=274" rel="external nofollow" rel="external nofollow" > <font color="red" id="place-alert">'
                + "位置报警(<font id ='number'>"
                + count
                + "</font>)" + '</font></a></li>');
      } else {
        count = Number(a) + 1;
        $("#place-alert").html(
            "位置偏移(<font id='number'>" + count + "</font>)");
      }
    }
    if (evt.data == "0") {
      var count;
      var a = $("#snum").html();
      if (a == null) {
        count = 1;
        $uncheckedAlertList
            .prepend('<li class="sos-alert"> <a href="alert?menuId=274" rel="external nofollow" rel="external nofollow" ><font color="red" id="sos-alert">'
                + "SOS报警(<font id='snum'>"
                + count
                + ")</font>"
                + '</font></a></li>');
      } else {
        count = Number(a) + 1;
        $("#sos-alert").html(
            "SOS报警(<font id='snum'>" + count + "</font>)");
      }
    }
  }
  function onError() {
    websocket.close();
  }
  function onClose() {
  }
  window.close = function() {
    websocket.onclose();
  }
</script>

总结

以上所述是小编给大家介绍的JS实现websocket长轮询实时消息提示的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
javascript StringBuilder类实现
Dec 22 Javascript
jquery 插件学习(六)
Aug 06 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
Node.js Domain 模块实例详解
Mar 18 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 #Javascript
vue.js实现简单轮播图效果
Oct 10 #Javascript
seajs中最常用的7个功能、配置示例
Oct 10 #Javascript
SeaJS中use函数用法实例分析
Oct 10 #Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 #Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 #Javascript
基于vue的换肤功能的示例代码
Oct 10 #Javascript
You might like
php 分库分表hash算法
2009/11/12 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
php递归创建目录的方法
2015/02/02 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
理解JS绑定事件
2016/01/19 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
Python数据类型详解(二)列表
2016/05/08 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
python实现最小二乘法线性拟合
2019/07/19 Python
python实现对变位词的判断方法
2020/04/05 Python
python实现三种随机请求头方式
2021/01/05 Python
RetroStage德国:复古服装
2019/02/03 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
开办加工厂创业计划书
2014/01/03 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
甘南现象心得体会
2014/09/11 职场文书
无房证明样本
2015/06/17 职场文书
《实心球》教学反思
2016/02/23 职场文书
创业计划书之溜冰场
2019/10/25 职场文书