1.MessageEvent接口
在 HTML 5规范中定义的新的通信方式，无论是WebSocket还是SSE，包括实现视频、音频通信的We br TC，都是基于HT ML 5规范中定义的一个接口：MessageEvent。这是一个基于消息的事件。首先我们可以看一下在JavaScript中，传统的事件类型有 哪些 。
传统的 DOM 事件的基类主要包括：
(1)UIEvents：一般化的UI事件，其中鼠标事件和键盘事件都继承自UI事件；
(2)MouseEvents：一般化的鼠标事件，比如click事件、mou SEM ove事件等，都是MouseEvents事件类型的实例；
(3)MutationEvents：一般化的DOM变动事件；
(4)HTMLEvents：一般化的HTML事件。
而HTML5中新增添的MessageEvent事件，是专门用来进行事件传输的事件。它除了包含Event的属性之外，还包含一些自己特有的属性。接口具体代码这里就不贴了，可以查看HTML5规范的第880页查看。
MessageEvent新增的 重要 属性包括：
(1)data：这里面存储的就是 服务器 发送的数据
(2)lastEventId：这里面 存放 的是最后一次的事件ID字符串
除此之外还包括ori gin 、ports、source等属性。下面通过对SSE实现的分析， 了解 如何使 用M essageEvent。
&nbs p;
2、SSE和MessageEvent
SSE客户端的实现就使用了MessageEvent接口。对SSE还不了解的话可以查看：https:// blog .csdn.net/far ei se/article/det ai ls/52149193。
服务器在清单中的各个字段会按照一种规则被客户端进行 解读 ，其中的id字段就对应着MessageEvent中的lastEventId。其中的data字段定义的数据通过解读后，就会被传送到MessageEvent的data字段，看如下代码：
VAR es = new EventSource(" test .php"); es.addEventListener(" ;m essage", function(e){ console. LOG (e); }) 这里面我们直接使用事件对象的处理方法，在Ch rom e控制台中打印出这个事件对象的结构。可以看到该对象的data字段就是test.php中发送过来的数据，它的ty PE 是message，而其原型继承的就是MessageEvent。
此外还要注意，SSE服务器清单中的retry是一个内部属性，是不能通过JavaScript代码获取的。
3.EventSource接口
我们在SSE中使用的EventSource接口在HTML5规范中定义，代码可见HTML5规范的第882页。
从接口中可以看到，首先是定义的三个内置的 事件处理 程序：onopen/onmessage/onclose。此外还包括三个连接的状态ready State ，CONNECTING表示正在建立连接，可能的情况是连接还没建立好 或者 连接中断客户端正在重连这个过程；OPEN表示连接开启可以传送数据的状态，CLOSED表示连接中断，并且客户端没有尝试重连。其中定义的方法我们可以看到只有close()，用来关闭连接。
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); }) 这里面我们直接使用事件对象的处理方法，在C hr ome控制台中打印出这个事件对象的结构。可以看到该对象的data字段就是test.php中发送过来的数据，它的type是message，而其原型继承的就是MessageEvent。
此外还要注意，SSE服务器清单中的retry是一个内部属性，是不能通过JavaScript代码获取的。
3.EventSource接口
我们在SSE中使用的EventSource接口在HTML5规范中定义，代码可见HTML5规范的第882页。
从接口中可以看到，首先是定义的三个内置的事件处理程序：onopen/onmessage/onclose。此外还包括三个连接的状态ready stat e，CONNECTING表示正在建立连接，可能的情况是连接还没建立好或者连接中断客户端正在重连这个过程；OPEN表示连接开启可以传送数据的状态，CLOSED表示连接中断，并且客户端没有尝试重连。其中定义的方法我们可以看到只有close()，用来关闭连接。
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5规范中的MessageEvent以及SSE 全部内容，希望文章能够帮你解决 html5教程-HTML5规范中的MessageEvent以及SSE 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5规范中的MessageEvent以及SSE的详细内容...