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还不了解的话可以查看：https://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()，用来关闭连接。