`
Everyday都不同
  • 浏览: 723534 次
  • 性别: 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

相关推荐

    Django 使用WebSocket实时消息推送和简易聊天室

    在Python的Web框架Django中,我们可以利用第三方库如`dwebsocket`来实现WebSocket功能,创建实时的消息推送和聊天室应用。 **一、WebSocket基础知识** WebSocket是一种在单个TCP连接上进行全双工通信的协议。它在...

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

    总结起来,Spring Boot 结合 WebSocket 可以有效地实现服务端到客户端的消息推送,降低了网络资源的消耗,提升了实时性。通过配置和编写相应的端点服务类,我们可以方便地构建起一个稳定的 WebSocket 通信系统。

    Websocket在服务器推送中的研究

    通过合理地使用Websocket,能够提升用户体验,优化服务器性能,并且在需要进行服务器推送时,可以达到几乎实时的消息传递效果。在网络安全级别不同的场景中,可以根据实际情况选择不同的认证方式,如安全性级别较高...

    用jetty8.0写的websocket实现的简单聊天程序

    在WebSocket出现之前,由于HTTP的无状态性,反向AJAX常被用来模拟服务器推送,但其效率和实时性远不及WebSocket。 综上所述,这个简单的聊天程序利用了Jetty 8.0的WebSocket功能,实现了全双工的通信,允许用户进行...

    springboot集成websocket实现消息的主动推送

    本教程将详细介绍如何利用Spring Boot集成WebSocket,实现消息的主动推送,包括一对一的消息传递和广播给所有在线用户。 首先,我们需要在Spring Boot项目中添加WebSocket相关的依赖。在`pom.xml`文件中,引入`...

    ajax+"服务器推送"简单web聊天

    为了实现实时通信,一种常见的解决方案是“Ajax+服务器推送”技术,本文将围绕这个主题,特别是通过JSP实现一个简单的Web聊天应用,探讨其工作原理和技术细节。 【服务器推送】: 服务器推送是一种在服务器端主动向...

    ajax-demo推送演示例子

    综上所述,"ajax-demo推送演示例子"涉及到Ajax技术与Servlet服务器端推送的结合,通过长轮询实现页面实时更新的效果。开发者可以通过理解Ajax的工作机制,以及如何在服务器端实现推送,来构建类似的交互式Web应用。

    WebSocket 实现聊天室

    与传统的HTTP协议不同,WebSocket允许服务器主动向客户端推送数据,从而极大地提高了数据传输效率和实时性。在WebSocket连接建立后,客户端和服务器可以通过发送和接收WebSocket帧进行通信。 接下来,我们关注聊天...

    springboot集成websocket实现简单聊天

    WebSocket是Web应用中的一种实时通信协议,它允许服务器与客户端之间进行双向通信,极大地提高了数据传输效率和实时性。...通过这种方式,我们可以为Web应用提供实时通信的能力,例如在线聊天、通知推送等场景。

    springboot+mybatis+websocket+jquery+ajax 实现在线聊天功能

    在线聊天系统中,WebSocket用于实现实时聊天功能,当一个用户发送消息时,服务器通过WebSocket连接将消息推送给其他在线用户,确保信息的即时传递。 4. **jQuery**:jQuery是一个高效、简洁的JavaScript库,简化了...

    后台推送php实现程序

    Ajax(Asynchronous JavaScript and XML)是实现后台推送的关键技术,它允许页面在不重新加载整个网页的情况下与服务器交换数据并更新部分网页内容。`state`变量可能用来存储当前的推送状态,用于判断前端如何处理...

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

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

    dwr服务器推送,dwr.jar,推送,服务器ajax,dwr服务推送例子

    这个过程被称为“反向Ajax”或“服务器推送”,它能够实现在不依赖用户操作的情况下,服务器主动向客户端发送数据。 DWR的核心组件包括几个部分: 1. **Engine**:这是DWR的核心,负责处理JavaScript到Java的转换和...

    WebSocket浅析(一):实现群聊功能

    这通常通过维护一个客户端连接池来实现,每当有新的消息到来,遍历连接池,将消息推送给每个客户端。 4. **服务器端处理**: 服务器端通常使用特定的WebSocket库,如Node.js的`ws`库,来处理WebSocket连接。收到...

    使用dwr+spring实现消息推送

    Spring是一个广泛使用的Java应用框架,提供了依赖注入、面向切面编程、事务管理等功能,同时也支持多种集成技术,如WebSocket、HTTP长轮询等,用于实现消息推送。 将DWR与Spring结合,可以创建出高效且易于维护的...

    WebForm实现消息推送源码20130313

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

    基于java,easyui,websocket的聊天界面实现

    同样,服务器也可以通过这个连接实时推送消息到客户端,实现消息的即时显示。 jQuery则是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和Ajax交互。在聊天界面中,jQuery可以帮助我们轻松地添加和...

    socketio实现web推送小例子,有界面哦

    SocketIO 是一个强大的实时应用程序框架,它允许开发者在 Web 应用中实现实时的双向通信。这个小例子是基于 Netty 实现的 ...通过学习和理解这些关键知识点,开发者可以更好地理解和实现 Web 应用中的实时推送功能。

    C#消息推送源码

    2. **Comet**:Comet是一种Web编程模型,用于实现服务器到客户端的长连接,使得服务器能向客户端实时推送数据。在C#中,可以通过建立持久HTTP连接或使用WebSocket等技术来模拟Comet模型。这种技术对于需要实时更新的...

Global site tag (gtag.js) - Google Analytics