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长轮询实时消息提示的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-10-07

Javascript WebSocket使用实例介绍(简明入门教程)

一旦你了解了网络套接字与WEB服务器的连接,你将可以从浏览器发送数据到服务器并且可以接收由服务器返回的响应数据. 以下是创建一个新的WebSocket对象的API: 复制代码 代码如下: var Socket = new WebSocket(url, [protocal] ); 这里第一个参数是指要连接的URL,第二个参数是可选的,如果需要的话,则是指定一个的服务器支持的协议. WEB Socket属性: 属性 说明 Socket.readyState readyState的代表的ReadOnl

Python通过websocket与js客户端通信示例分析

具体的 websocket 介绍可见 http://zh.wikipedia.org/wiki/WebSocket 这里,介绍如何使用 Python 与前端 js 进行通信. websocket 使用 HTTP 协议完成握手之后,不通过 HTTP 直接进行 websocket 通信. 于是,使用 websocket 大致两个步骤:使用 HTTP 握手,通信. js 处理 websocket 要使用 ws 模块: Python 处理则使用 socket 模块建立 TCP 连接即可,比一般的 soc

基于html5和nodejs相结合实现websocket即使通讯

最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有WebSocket也很值得注意.可以用来做双屏互动游戏,何为双屏互动游戏?就是通过移动端设备来控制PC端网页游戏.这样的话就要用到实时通讯了,而WebSocket无疑是最合适的.WebSocket相较于HTTP来说,有很多的优点,主要表现在WebSocket只建立一个TCP连接,可以主动推送数据到客户端,而且还有更轻量级的协议头,减少数据传送量.所以WebSocket暂时来说是实时通讯的最佳协

浅析nodejs实现Websocket的数据接收与发送

WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术.在WebSocket API中,浏览器和服务器只需要要做一个握手(handshaking)的动作,然后,浏览器和服务器之间就形成了一条快速通道.两者之间就直接可以数据互相传送. WebSocket是一个通信的协议,分为服务器和客户端.服务器放在后台,保持与客户端的长连接,完成双方通信的任务.客户端一般都是实现在支持HTML5浏览器核心中,通过提供JavascriptAPI使用网页可以建立websocket连接.

JavaScript之WebSocket技术详解

概述 HTTP协议是一种无状态协议,服务器端本身不具有识别客户端的能力,必须借助外部机制,比如session和cookie,才能与特定客户端保持对话.这多多少少带来一些不便,尤其在服务器端与客户端需要持续交换数据的场合(比如网络聊天),更是如此.为了解决这个问题,HTML5提出了浏览器的WebSocket API. WebSocket的主要作用是,允许服务器端与客户端进行全双工(full-duplex)的通信.举例来说,HTTP协议有点像发电子邮件,发出后必须等待对方回信:WebSocket则是

详解WebSocket+spring示例demo(已使用sockJs库)

1.简介 作为下一代的Web标准,HTML5拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket等等.这其中有"Web的 TCP"之称的 WebSocket格外吸引开发人员的注意.WebSocket的出现使得浏览器提供对 Socket的支持成为可能,从而在浏览器和服务器之间提供了一个基于TCP连接的双向通道.Web开发人员可以非常方便地使用WebSocket构建实时 web 应用,开发人员的手中从此又多了一柄神兵利器. Web 应用的信息交互过程通常

集合框架(Collections Framework)详解及代码示例

简介 集合和数组的区别: 数组存储基础数据类型,且每一个数组都只能存储一种数据类型的数据,空间不可变. 集合存储对象,一个集合中可以存储多种类型的对象.空间可变. 严格地说,集合是存储对象的引用,每个对象都称为集合的元素.根据存储时数据结构的不同,分为几类集合.但对象不管存储到什么类型的集合中,既然集合能存储任何类型的对象,这些对象在存储时都必须向上转型为Object类型,也就是说,集合中的元素都是Object类型的对象. 既然是集合,无论分为几类,它都有集合的共性,也就是说虽然存储时数据结构不

Java中的静态内部类详解及代码示例

1. 什么是静态内部类 在Java中有静态代码块.静态变量.静态方法,当然也有静态类,但Java中的静态类只能是Java的内部类,也称为静态嵌套类.静态内部类的定义如下: public class OuterClass { static class StaticInnerClass { ... } } 在介绍静态内部类之前,首先要弄清楚静态内部类与Java其它内部类的区别. 2. 内部类 什么是内部类?将一个类的定义放在另一个类的内部,就是内部类.Java的内部类主要分为成员内部类.局部内部类.

C语言指针详解及用法示例

新手在C语言的学习过程中遇到的最头疼的知识点应该就是指针了,指针在C语言中有非常大的用处.下面我就带着问题来写下我对于指针的一些理解. 指针是什么? 指针本身是一个变量,它存储的是数据在内存中的地址而不是数据本身的值.它的定义如下: int a=10,*p; p=&a int a=10; int *p=&a; 首先我们可以理解 int* 这个是要定义一个指针p,然后因为这个指针存储的是地址所以要对a取地址(&)将值赋给指针p,也就是说这个指针p指向a. 很多新手都会对这两种定义方法

Java中的HashSet详解和使用示例_动力节点Java学院整理

第1部分 HashSet介绍 HashSet 简介 HashSet 是一个没有重复元素的集合. 它是由HashMap实现的,不保证元素的顺序,而且HashSet允许使用 null 元素. HashSet是非同步的.如果多个线程同时访问一个哈希 set,而其中至少一个线程修改了该 set,那么它必须 保持外部同步.这通常是通过对自然封装该 set 的对象执行同步操作来完成的.如果不存在这样的对象,则应该使用 Collections.synchronizedSet 方法来"包装" set.

Java 中的HashMap详解和使用示例_动力节点Java学院整理

第1部分 HashMap介绍 HashMap简介 HashMap 是一个散列表,它存储的内容是键值对(key-value)映射. HashMap 继承于AbstractMap,实现了Map.Cloneable.java.io.Serializable接口. HashMap 的实现不是同步的,这意味着它不是线程安全的.它的key.value都可以为null.此外,HashMap中的映射不是有序的. HashMap 的实例有两个参数影响其性能:"初始容量" 和 "加载因子&quo

Java中LinkedList详解和使用示例_动力节点Java学院整理

第1部分 LinkedList介绍 LinkedList简介 LinkedList 是一个继承于AbstractSequentialList的双向链表.它也可以被当作堆栈.队列或双端队列进行操作. LinkedList 实现 List 接口,能对它进行队列操作. LinkedList 实现 Deque 接口,即能将LinkedList当作双端队列使用. LinkedList 实现了Cloneable接口,即覆盖了函数clone(),能克隆. LinkedList 实现java.io.Serial

ArrayList详解和使用示例_动力节点Java学院整理

第1部分 ArrayList介绍 ArrayList简介 ArrayList 是一个数组队列,相当于 动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractList,实现了List, RandomAccess, Cloneable, java.io.Serializable这些接口. ArrayList 继承了AbstractList,实现了List.它是一个数组队列,提供了相关的添加.删除.修改.遍历等功能. ArrayList 实现了RandmoAccess接口,即提

Java之dao模式详解及代码示例

什么是dao模式? DAO(Data Access Object)顾名思义是一个为数据库或其他持久化机制提供了抽象接口的对象,在不暴露底层持久化方案实现细节的前提下提供了各种数据访问操作.在实际的开发中,应该将所有对数据源的访问操作进行抽象化后封装在一个公共API中.用程序设计语言来说,就是建立一个接口,接口中定义了此应用程序中将会用到的所有事务方法.在这个应用程序中,当需要和数据源进行交互的时候则使用这个接口,并且编写一个单独的类来实现这个接口,在逻辑上该类对应一个特定的数据存储.DAO模式实

Java中Volatile关键字详解及代码示例

一.基本概念 先补充一下概念:Java内存模型中的可见性.原子性和有序性. 可见性: 可见性是一种复杂的属性,因为可见性中的错误总是会违背我们的直觉.通常,我们无法确保执行读操作的线程能适时地看到其他线程写入的值,有时甚至是根本不可能的事情.为了确保多个线程之间对内存写入操作的可见性,必须使用同步机制. 可见性,是指线程之间的可见性,一个线程修改的状态对另一个线程是可见的.也就是一个线程修改的结果.另一个线程马上就能看到.比如:用volatile修饰的变量,就会具有可见性.volatile修饰的