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 相关文章推荐
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
js下载文件并修改文件名
May 08 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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中cookie的作用域
2008/03/27 PHP
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
layui table设置前台过滤转义等方法
2018/08/17 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
vue开发中遇到的问题总结
2020/04/07 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
代码详解django中数据库设置
2019/01/28 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
python之拟合的实现
2019/07/19 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
总监职责范文
2013/11/09 职场文书
挂职思想汇报
2013/12/31 职场文书
业务部主管岗位职责
2014/01/29 职场文书
财产公证书格式
2014/04/10 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
导游词400字
2015/02/13 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python
java开发双人五子棋游戏
2022/05/06 Java/Android
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL