HTML5规范中的MessageEvent以及SSE

1.MessageEvent接口

在HTML5规范中定义的新的通信方式,无论是WebSocket还是SSE,包括实现视频、音频通信的WebRTC,都是基于HTML5规范中定义的一个接口:MessageEvent。这是一个基于消息的事件。首先我们可以看一下在JavaScript中,传统的事件类型有哪些。

传统的DOM事件的基类主要包括:

(1)UIEvents:一般化的UI事件,其中鼠标事件和键盘事件都继承自UI事件;

(2)MouseEvents:一般化的鼠标事件,比如click事件、mousemove事件等,都是MouseEvents事件类型的实例;

(3)MutationEvents:一般化的DOM变动事件;

(4)HTMLEvents:一般化的HTML事件。

而HTML5中新增添的MessageEvent事件,是专门用来进行事件传输的事件。它除了包含Event的属性之外,还包含一些自己特有的属性。接口具体代码这里就不贴了,可以查看HTML5规范的第880页查看。

MessageEvent新增的重要属性包括:

(1)data:这里面存储的就是服务器发送的数据

(2)lastEventId:这里面存放的是最后一次的事件ID字符串

除此之外还包括origin、ports、source等属性。下面通过对SSE实现的分析,了解如何使用MessageEvent。

2、SSE和MessageEvent

SSE客户端的实现就使用了MessageEvent接口。对SSE还不了解的话可以查看:http://blog.csdn.net/fareise/article/details/52149193。

服务器在清单中的各个字段会按照一种规则被客户端进行解读,其中的id字段就对应着MessageEvent中的lastEventId。其中的data字段定义的数据通过解读后,就会被传送到MessageEvent的data字段,看如下代码:

var es = new EventSource("test.php");
es.addEventListener("message", function(e){
    console.log(e);
})

这里面我们直接使用事件对象的处理方法,在Chrome控制台中打印出这个事件对象的结构。可以看到该对象的data字段就是test.php中发送过来的数据,它的type是message,而其原型继承的就是MessageEvent。

此外还要注意,SSE服务器清单中的retry是一个内部属性,是不能通过JavaScript代码获取的。


3.EventSource接口

我们在SSE中使用的EventSource接口在HTML5规范中定义,代码可见HTML5规范的第882页。

从接口中可以看到,首先是定义的三个内置的事件处理程序:onopen/onmessage/onclose。此外还包括三个连接的状态readyState,CONNECTING表示正在建立连接,可能的情况是连接还没建立好或者连接中断客户端正在重连这个过程;OPEN表示连接开启可以传送数据的状态,CLOSED表示连接中断,并且客户端没有尝试重连。其中定义的方法我们可以看到只有close(),用来关闭连接。

时间: 2024-12-18 12:19:55

HTML5规范中的MessageEvent以及SSE的相关文章

在HTML5规范中div中读取预存的data-[key]值

HTML 代码: <div id="div_test" data-test="this is test" ></div> jQuery 代码: $("#div_test").data("test"); //this is test!

可参考的HTML5规范

HTML5规范 1. 代码风格 1.1 缩进与换行 [建议]使用4个空格作为一个缩进层级. [建议]模板代码的缩进优先保证 HTML 代码的缩进规则. 1.2 命名规则 [强制]class:必须单词全字母小写,单词间以-分隔,且必须代表相应的模块或部件的内容或功能,不得以html内置样式进行命名,命名应该具有明确的语义. [强制]id:必须保持在页面中的唯一性,命名应该具有明确的语义. 1.3 标签 [强制]Html中的标签名必须使用小写字母. [强制]标签的闭合要符合html5的规定. [强制

[HTML面试]HTML5 面试中最常问到的 10 个问题

1. HTML5 新的 DocType 和 Charset 是什么?HTML5 现在已经不是 SGML 的子集,DocType 简化为:                  <!doctype html>HTML 5 指定 UTF-8 编码的方式如下:                 <meta charset="UTF-8"> 2. 如何在 HTML5 页面中嵌入音频?HTML 5 包含嵌入音频文件的标准方式,支持的格式包括 MP3.Wav 和 Ogg:<

HTML5 canvas 中的arcTo()方法的用法

除了arc()之外,Canvas的绘图环境对象还提供了另一个用于创建圆弧路径的方法,那就是arcTo().改方法接受了5个参数: arcTo(x1,x2,y1,y2,radius) arcTo()方法的参数分别代表两个点击圆形半径.该方法一指定的半径来绘制一条圆弧,此圆弧与当前点到第一个点(x1,y1)的连线相切,而且第一个点到第二点(x2,y2)的连线也相切.该方法的这些特性,使得它非常适合用了绘制矩形的原角. 使用arcTo()方法: html: <!Doctyp html> <ht

关于 html5 代码中 &quot;xxx&quot;(双引号) 和 (单引号)&#39;xxx&#39; 的区别,谈谈我的经验!

最近在学习的时候看到有人问 "find" 与 'find' 的区别,发现了很多人都说没有区别,纯属个人爱好! 于是我好奇地试验了一下,发现了不一样的结果,通过对比分析发现 '' 和 "" (单引号,双引号),还是有很大的区别地! 建议:<!--************为了防止 引号匹配错误: 单引号与双引号交叉使用*******************--> 在使用html onclick 事件属性时候乱用 单引号 /双引号 会出错的,比如: <!

理解JMS规范中的持久订阅和非持久订阅

jms1.1规范针对publisher/subscriber模型提出了持久订阅和非持久订阅者.我们用现实生活中的例子来说明,持久订阅和非持久订阅的区别. 1.非持久订阅 考虑学生听老师讲课的情景,大学老师讲课,一部分学生会去教室听课,另一部分学生会选择逃课在寝室睡觉.开始上课前,老师可能会点名,在教室听课的同学知道这个消息,逃课的同学就不知道这个消息(除非朋友电话通知的情况).即老师发布消息的时候,如果学生在教室就能知道,不在教室就不知道.非持久订阅只有当客户端处于激活状态,也就是和JMS Pr

理解JMS规范中消息的传输模式和消息持久化

JMS规范定义了2种消息传输模式:持久传送模式和非持久传输模式.发送者可以通过如下类似的代码进行设置 TopicPublisher publihser = session.createPublisher(topic); // 设置持久化传输 publihser.setDeliveryMode(DeliveryMode.PERSISTENT); 这种方式对publisher发送的所有消息都有效,相当于是一个全局的效果.如果只是想设置某一个消息的传输模式,可以通过以下代码设置消息头的属性来实现 Te

代码规范中常见问题举例说明

1.背景说明 虽然不止一次说明代码规范的问题,但是在协同作战的时候,代码规范这问题总是被遗忘,希望大家能够引以为戒.协同作战的时候,如果不能遵守代码规范,很容易出现各种问题,而且不知道从何处入手解决,消耗时间成本. 实际上,对于代码规范这种问题,应该有人专门来审核代码的,但是公司小,项目也不大,参与的人员也不多的情况下,绝大多数公司都没有这种机制,尤其是在移动端编程上面 ,这就需要开发人员自我监督,避免出现不必要的麻烦. 本文就举例说明,在近期笔者所带领的团队协作中,出现的一些问题. 2.命名

OWIN规范中最让人费解的地方

OWIN defines a standard interface between .NET web servers and web applications. OWIN最让人费解不是OWIN的五大角色(Host, Server, Middleware, Web Framework, Web Application),不是Application Delegate与Environment,而是.NET web servers,规范中并没有说明.NET web servers究竟是什么?它与通常的W