HTML5中MessageEvent以及SSE的规范是什么

这篇文章给大家分享的是有关HTML5中MessageEvent以及SSE的规范是什么的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联公司主营虞城网站建设的网络公司,主营网站建设方案,重庆APP开发公司,虞城h5小程序开发搭建,虞城网站营销推广欢迎虞城等地区企业咨询

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接口。

服务器在清单中的各个字段会按照一种规则被客户端进行解读，其中的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()，用来关闭连接。

感谢各位的阅读！关于“HTML5中MessageEvent以及SSE的规范是什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！