脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5规范中的MessageEvent以及SSE，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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); })

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

3.EventSource接口

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

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

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-HTML5规范中的MessageEvent以及SSE全部内容，希望文章能够帮你解决html5教程-HTML5规范中的MessageEvent以及SSE所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。