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

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

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

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

JavaScript之WebSocket技术详解

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

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

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

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

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

NodeJs 实现简单WebSocket即时通讯的示例代码

服务器的实现很简单,先装一个nodeJs的模块,叫nodejs-websocket , 直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了,然后就可以开始建立服务器了,因为有了nodejs-websocket模块,所以很多工作都不用我们自己做,直接调用别人封装好的方法就行了: 服务端代码 根据客户端传来的消息判断哪个是game1,哪个是game2,保存connection对象. var ws = require("nodejs-websoc

NodeJS简单实现WebSocket功能示例

本文实例讲述了NodeJS简单实现WebSocket功能.分享给大家供大家参考,具体如下: 我们基于express和socket.io开发,首先我们需要安装以下包 npm install --save express npm install --save socket.io 服务器端代码: var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(ht

基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码

Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJs 就是一个函数库,算不上一个框架,源码2万2千多行,提供了前端MVC的开发方式,有双向绑定,指令等特性,这是具有革命性的.我是多么反感jQuery 用选择器 选择元素 ,绑定事件,进行一大堆DOM操作,一旦代码过多,非常不好维护,html结构改变,又要重写js代码,不过 jQuery  对 ajax的

基于HTML5+js+Java实现单文件文件上传到服务器功能

上传单文件到服务器       应公司要求,在HTML5页面上实现上传文件到服务器,对于一个还没毕业的实习生菜鸟来说,这可不得了-----不会,网上各种百度,找各种博客还是没解决,最后还是请教了公司的大神,人家给卸了一个例子,然后根据人家写的终于把这个上传文件搞定. 好了,开始上代码. HTML5代码: <form name="upform" action="" method="POST"> <input type ="

基于HTML5的可预览多图片Ajax上传

一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇"Ajax Upload多文件上传插件"的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中

基于PHP和Mysql相结合使用jqGrid读取数据并显示

jqGrid可以动态读取和加载外部数据,本文将结合PHP和Mysql给大家讲解如何使用jqGrid读取数据并显示,以及可以通过输入关键字查询数据的ajax交互过程. 下面给大家展示效果图,喜欢的朋友可以阅读全文哦. jqGrid本身带有search和edit表格模块,但是这些模块会使得整个插件体积显得有点庞大,而且笔者认为jqGrid的搜索查询和编辑/添加功能不好用,所以笔者放弃jqGrid自有的search和edit表格模块,借助jquery利器来完成相关功能,符合项目的实际应用. XHTML

JS基于HTML5的canvas标签实现炫目的色相球动画效果实例

本文实例讲述了JS基于HTML5的canvas标签实现色相球效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>JS canvas标签制作色相球</title> </head> <body> <canvas></canvas&g

vue 中基于html5 drag drap的拖放效果案例分析

事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动. 案例一: 开始的我,so easy! 通过绑定元素的mousedown 事件,监听鼠标的mousemove,和mouseup 事件,于是我轻松实现了同一区域内元素可以拖着跑,上代码! move (e) { let odiv = e.target // 获取目标元素 // 算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft let disY = e.clientY - o

NetCore WebSocket即时通讯示例

NetCore WebSocket 即时通讯示例,供大家参考,具体内容如下 1.新建Netcore Web项目 2.创建简易通讯协议 public class MsgTemplate { public string SenderID { get; set; } public string ReceiverID { get; set; } public string MessageType { get; set; } public string Content { get; set; } } Se