加入收藏 | 设为首页 | 会员中心 | 我要投稿 辽源站长网 (https://www.0437zz.com/)- 云专线、云连接、智能数据、边缘计算、数据安全!
当前位置: 首页 > 站长学院 > MySql教程 > 正文

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

发布时间:2020-03-17 06:39:31 所属栏目:MySql教程 来源:站长网
导读:副标题#e# 对于一般的 Web 应用开发,大多数开发人员并不陌生。在 Web 应用中,浏览器和服务器之间使用的是请求 / 响应的交互模式。浏览器发出请求,服务器根据收到的请求来生成相应的响应。浏览器再对收到的响应进行处理,展现给用户。响应的格式可能是 HT

对于服务器端返回的响应,浏览器端需要在 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)}; } }

(编辑:辽源站长网)

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

推荐文章
    热点阅读