html5服务器推送_动力节点Java学院整理

对于服务器端返回的响应，浏览器端需要在 JavaScript 中使用 EventSource 对象来进行处理。EventSource 使用的是标准的事件监听器方式，只需要在对象上添加相应的事件处理方法即可。EventSource 提供了三个标准事件，如表 1 所示。

表 1. EventSource 对象提供的标准事件

名称

说明

事件处理方法

open

当成功与服务器建立连接时产生

onopen

message

当收到服务器发送的事件时产生

onmessage

error

当出现错误时产生

onerror

如之前所述，服务器端可以返回自定义类型的事件。对于这些事件，可以使用 addEventListener 方法来添加相应的事件处理方法。代码清单 2 给出了 EventSource 对象的使用示例。

EventSource 对象的使用示例

var es = new EventSource('events'); es.onmessage = function(e) { console.log(e.data); }; es.addEventListener('myevent', function(e) { console.log(e.data); });

如上所示，在指定 URL 创建出 EventSource 对象之后，可以通过 onmessage 和 addEventListener 方法来添加事件处理方法。当服务器端有新的事件产生，相应的事件处理方法会被调用。EventSource 对象的 onmessage 属性的作用类似于 addEventListener( ‘ message ’ )，不过 onmessage 属性只支持一个事件处理方法。在介绍完服务器推送事件的规范内容之后，下面介绍服务器端的实现。

服务器端和浏览器端实现

从上一节中对通讯协议的描述可以看出，服务器端推送事件是一个比较简单的协议。服务器端的实现也相对比较简单，只需要按照协议规定的格式，返回响应内容即可。在开源社区可以找到各种不同的服务器端技术相对应的实现。自己开发的难度也不大。本文使用 Java 作为服务器端的实现语言。相应的实现基于开源的 jetty-eventsource-servlet 项目，见参考资源。下面通过一个具体的示例来说明如何使用 jetty-eventsource-servlet 项目。示例用来模拟一个物体在某个限定空间中的随机移动。该物体从一个随机位置开始，然后从上、下、左和右四个方向中随机选择一个方向，并在该方向上移动随机的距离。服务器端不断改变该物体的位置，并把位置信息推送给浏览器，由浏览器来显示。

服务器端实现

服务器端的实现由两部分组成：一部分是用来产生数据的 org.eclipse.jetty.servlets.EventSource 接口的实现，另一部分是作为浏览器访问端点的继承自 org.eclipse.jetty.servlets.EventSourceServlet 类的 servlet 实现。下面代码给出了 EventSource 接口的实现类。

EventSource 接口的实现类 MovementEventSource

public class MovementEventSource implements EventSource { private int width = 800; private int height = 600; private int stepMax = 5; private int x = 0; private int y = 0; private Random random = new Random(); private Logger logger = Logger.getLogger(getClass().getName()); public MovementEventSource(int width, int height, int stepMax) { this.width = width; this.height = height; this.stepMax = stepMax; this.x = random.nextInt(width); this.y = random.nextInt(height); } @Override public void onOpen(Emitter emitter) throws IOException { query(emitter); //开始生成位置信息 } @Override public void onResume(Emitter emitter, String lastEventId) throws IOException { updatePosition(lastEventId); //更新起始位置 query(emitter); //开始生成位置信息 } //根据Last-Event-Id来更新起始位置 private void updatePosition(String id) { if (id != null) { String[] pos = id.split(","); if (pos.length > 1) { int xPos = -1, yPos = -1; try { xPos = Integer.parseInt(pos[0], 10); yPos = Integer.parseInt(pos[1], 10); } catch (NumberFormatException e) { } if (isValidMove(xPos, yPos)) { x = xPos; y = yPos; } } } } private void query(Emitter emitter) throws IOException { emitter.comment("Start sending movement information."); while(true) { emitter.comment(""); move(); //移动位置 String id = String.format("%s,%s", x, y); emitter.id(id); //根据位置生成事件标识符 emitter.data(id); //发送位置信息数据 try { Thread.sleep(2000); } catch (InterruptedException e) { logger.log(Level.WARNING, "Movement query thread interrupted. Close the connection.", e); break; } } emitter.close(); //当循环终止时，关闭连接 } @Override public void onClose() { } //获取下一个合法的移动位置 private void move() { while (true) { int[] move = getMove(); int xNext = x + move[0]; int yNext = y + move[1]; if (isValidMove(xNext, yNext)) { x = xNext; y = yNext; break; } } } //判断当前的移动位置是否合法 private boolean isValidMove(int x, int y) { return x >= 0 && x <= width && y >=0 && y <= height; } //随机生成下一个移动位置 private int[] getMove() { int[] xDir = new int[] {-1, 0, 1, 0}; int[] yDir = new int[] {0, -1, 0, 1}; int dir = random.nextInt(4); return new int[] {xDir[dir] * random.nextInt(stepMax), yDir[dir] * random.nextInt(stepMax)}; } }

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!