`
Everyday都不同
  • 浏览: 713425 次
  • 性别: Icon_minigender_1
  • 来自: 宇宙
社区版块
存档分类
最新评论

【反ajax】webSocket实现实时推送功能

阅读更多

额。前天就说有时间要研究下webSocket这种实时推技术。已经用Comet实现了一个结合redis发布/订阅功能的小功能,其实还是有点复杂度的。今天有时间,遂了解了下webSocket,发现也没有想象中那么难!

但我研究webSocket做东西还是饶了一大圈,有一种用spring+webSocket做的,略复杂(可能容错性和健壮性更高?),最后卡在404连接上了,用的jar包是spring-websocket-4.2.x.jar及相关依赖jar包。鉴于参考网上的例子并没实现,故作罢。

后来,用了JavaEE7 (jdk1.7+支持)和html5支持的webSocket,问题就显得简单多了。涉及jar包:websocket-api-1.x.jar

 

客户端:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>发布订阅测试</title>
	
	<script type="text/javascript">
		var socket = null;
		$(function() {
			var websocket;
//考虑各种浏览器兼容问题
            if ('WebSocket' in window) {
                websocket = new WebSocket("ws://localhost:8080/amp/socket/webSocketServer");
            } else if ('MozWebSocket' in window) {
                websocket = new MozWebSocket("ws://localhost:8080/amp/socket/webSocketServer");
            } else {
                websocket = new SockJS("http://localhost:8080/amp/sockjs/webSocketServer");
            }
//和服务端连接成功后的操作 send操作必须要有  服务端才会可能响应          
            websocket.onopen = function (evnt) {
            	var data = {appId:'hx', status:'s'};
            	websocket.send(JSON.stringify(data));//尝试给服务端发送json参数,这也是项目中常见的的
            	$("#showMsg").append("连接成功!<br/>");
            };
//接收到服务端返回的数据后回调
            websocket.onmessage = function (evnt) {
                $("#showMsg").append("(<font color='red'>"+evnt.data+"</font>)<br/>");
            };
//连接失败回调
            websocket.onerror = function (evnt) {
            };
//服务端关闭引发
            websocket.onclose = function (evnt) {
            	$("#showMsg").append("连接关闭!<br/>");
            }
		});
	</script>
</head>
<body>
	<div id="showMsg" style="border: 1px solid; width: 500px; height: 400px; overflow: auto;"></div>
</body>

 服务端:

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

import net.sf.json.JSONObject;

@ServerEndpoint("/socket/webSocketServer")
public class ScrollInfoHandler {
//接收到客户端的请求
	@OnMessage
	  public void onMessage(String message, Session session)
	    throws IOException, InterruptedException {
	   
	    System.out.println("Received: " + message);
	    
	    Map<String, String> params = JSONObject.fromObject(message);
	    
	    // Send the first message to the client
	    session.getBasicRemote().sendText("return params after handled: " 
	    		+ params.get("appId").toUpperCase() + ", " + params.get("status").toUpperCase());
	   
	    // Send 3 messages to the client every 5 seconds
	    int sentMessages = 0;
//模拟推送数据
	    while(true){
	      Thread.sleep(2000);
	      session.getBasicRemote().
	        sendText("This is an intermediate server message. Count: "
	          + Math.random());
	    }
	   
	  }
//和客户端连接成功后	   
	  @OnOpen
	  public void onOpen() {
	    System.out.println("Client connected");
	  }
//客户端关闭后	 
	  @OnClose
	  public void onClose() {
	    System.out.println("Connection closed");
	  }
	
}

 如果想和redis发布订阅结合起来,很简单:在服务端的onOpen函数里启动订阅渠道的线程,以及定时检查队列大小的线程,而在onMessage函数里执行定时从队列pop数据并send,在onClose里面写停止线程和情空队列的逻辑 即可啦。

 

下面就来测一测效果!

启动项目,打开这个客户端页面,先观察控制台打印:

Client connected

Received: {"appId":"hx","status":"s"}

说明,服务端已经跟客户端连通,并且收到传递过来的参数了。

观察客户端页面,你会发现:(某一时刻)



 客户端是不断刷新着的,而且也收到了服务端处理参数后传过来的数据了。

若关闭客户端,服务端控制台会打印:Connection closed

若关闭服务端,客户端会这样:



 说明,达到了响应服务端关闭后的效果。

 

以上,只是一个很简单的推送实例。要具体应用到实际项目中是需要不断完善代码以提高其健壮性的。但至少对我而言,服务端主动推送技术终于不再那么神秘和困惑了,以后对实时性要求比较高的地方可以采纳,终于突破ajax的方式了。

  • 大小: 21.9 KB
  • 大小: 14.2 KB
0
0
分享到:
评论
1 楼 wahahachuang8 2017-09-27  
GoEasy实时Web推送,支持后台推送和前台推送两种:后台推送可以选择Java SDK、 Restful API支持所有开发语言;前台推送:JS推送。无论选择哪种方式推送代码都十分简单(10分钟可搞定)。由于它支持websocket 和polling两种连接方式所以兼顾大多数主流浏览器,低版本的IE浏览器也是支持的。另外GoEasy针对前台推送采用OTP (one-time-password)方式加密方式,能有效杜绝他人通过在页面上获取 appkey的方式,进行非法操作,十分安全!GoEasy多机房部署,支持全球推送。个人觉得十分值得推荐: goeasy.io

相关推荐

    Spring Boot 集成 WebSocket 实现服务端推送消息到客户端.docx

    假设有这样一个场景:服务端的资源经常在更新,客户端需要...而有了 WebSocket 协议,就能很好地解决这些问题,WebSocket 可以反向通知的,通常向服务端订阅一类消息,服务端发现这类消息有更新就会不停地通知客户端。

    websocket_for_linux-master_websocket_websocket客户端_WEBSOCKET单片机实现

    现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点...

    WebForm实现消息推送源码20130313

    WebForm实现消息推送源码 功能介绍: 假设A,B,C用户登陆,内存记录下已登录的用户的信息,这时A在所在的客户端(SendInfo.aspx)页面向B发消息,则在B所在客户端页面(SendInfo.aspx)将弹出消息框。 关键点有两个: 1...

    WebSocket_vs_Ajax

    1.通过WebSocket实现后台服务器实时刷新的数据推送到前台客户端 2.通过Ajax每秒请求后台,类似实时刷新访问后台数据。 3.本系统两种方式都实现了后台事件的主动推送,性能都非常稳定。 注意:由于采用的是Maven开发...

    PHP实现HTML5的Serversentevents用于实时从server推送信息到client比Websocket更简单代替AJAX

    A simple and efficient library implemented HTML5's server-sent events by PHP, is used to real-time push events from server to client, and easier than Websocket, instead of AJAX request.

    websocket协议开源

    WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信。Ajax技术很聪明的一点是没有设计要使用的...

    基于Websocket的车联网报警推送系统

    报警处理是车联网系统中的重要功能.传统车联网系统一般采用AJAX轮询的方式定时拉取报警信息,既...结果表明:使用Websocket推送方式处理报警信息,既提高了报警的实时性和准确性,又提高了推送的吞吐量,降低网络流量.

    WCF WebSocket Test Code

    在Web应用中,HTTP协议决定了客户端和服务端连接是“短连接”,即客户端Request,服务端Response,连接断开。要想实现客户端和...利用WebSocket,可以取代之前的ajax客户端轮询,真正实现从服务端到客户端的推送。

    php-sse:一个简单高效的库通过PHP实现HTML5的服务器发送的事件,用于将事件从服务器实时推送到客户端,比Websocket更容易,而不是AJAX请求

    一个简单高效的库通过PHP实现了HTML5的服务器发送的事件,用于将事件从服务器实时推送到客户端,并且比Websocket更容易,而不是AJAX请求。 要求 PHP 5.4或更高版本 通过Composer( )安装 composer require " hhxsv5...

    ajax与websocket的区别以及websocket常用使用方式 介绍

    笔者近期在公司的项目中渐渐的接触了一些比较高级的业务逻辑处理,其中比较有意思的地方就是前端接受后台给与的推送问题。 一般前端与后端的交互主要是使用ajax进行异步操作调用交互,比较有趣的是这种交互方式一般...

    Web-服务器推送WebSocketandAjax轮询.docx

    1 服务器推送websocket:服务端主动向客户端发消息。 目标:客户端和服务器建立长连接,服务端与客户端可实时收发数据。 原理:使用HTTP协议建立全双工的TCP长连接。 方法:HTML5的WebSocket。 参考:...

    基于node实现websocket协议

    它突破了早先的AJAX的限制,关键在于实时性,服务器可以主动推送内容 到客户端!可能的应用有:多人在线游戏,即时聊天,实时监控,远程桌面,新闻服务器等等。 对于我自己,当前最想尝试的是canvas+websocket组合...

    asp.net mvc实现简单的实时消息推送

    在百度上搜索了一下,发现实现网页上的消息推送,可以使用asp.net 中的SignalR类库,当然也可以使用H5的WebSocket Ajax的轮回。当然此处我们使用asp.net 中的SignalR类库。因为它可以实现网页上消息的实时推送。...

    html5与webSocket

    WebSocket 服务器和客户端可以彼此相互推送信息;XHR 受到域的限制,而 WebSocket 允许跨域通信。WebSocket 标准正由 W3C制定,目前正处于草稿阶段, 但是相信在不久的将来,它将会改变 WEB 实时通信方式

    websocket.zip

    现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点...

    百度地图毕业设计源码-java-websocket:基于jettywebsocket后台往前台页面推送消息

    Websocket消息推送 本篇结构: 背景 HTTP协议特点 消息推送方案 Websocket简介 Websocket实例 一、背景 HTTP协议的无状态和被动性,使得B/S架构的服务器主动推送消息给浏览器比较困难,而通用的一些解决方案又有各种...

    Node.js实现数据推送

    后端推送数据的解决方案有很多,比如轮询、Comet、WebSocket。 1. 轮询对于后端来说开发成本最低,就是按照传统的方式处理Ajax请求并返回数据,在学校的时候实验室的项目一直都采用轮询,因为它最保险也最容易实现。...

    详解Tomcat7中WebSocket初探

    在Web应用中一个常见的场景是Server端向Client端推送某些消息,要实现这项功能,按照传统的思路可以有以下可选方案: Ajax + 轮询 :这种方案仅仅是一个模拟实现,本质还是HTTP请求响应的模式,由于无法预期什么时候...

    websocket协议开源-易语言

    WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信。Ajax技术很聪明的一点是没有设计要使用的...

Global site tag (gtag.js) - Google Analytics