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 相关文章推荐
Javascript typeof 用法
Dec 28 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
js读取cookie方法总结
Oct 31 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
详解Vue之父子组件传值
Apr 01 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与java通过socket通信的实现代码
2013/10/21 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
vue实现的下拉框功能示例
2019/01/29 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Python全栈之列表数据类型详解
2019/10/01 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
2014年学校德育工作总结
2014/12/05 职场文书
团员个人总结
2015/02/26 职场文书
车间质检员岗位职责
2015/04/08 职场文书
2015最新民情日记范文
2015/06/26 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery