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

来源：互联网发布：天天向上四大网络作家编辑：程序博客网时间：2024/05/21 19:28

额。前天就说有时间要研究下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"}

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

观察客户端页面，你会发现：（某一时刻）

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