HTML5中MessageEvent以及SSE的規(guī)范是什么

這篇文章給大家分享的是有關(guān)HTML5中MessageEvent以及SSE的規(guī)范是什么的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

1.MessageEvent接口

在HTML5規(guī)范中定義的新的通信方式，無論是WebSocket還是SSE，包括實(shí)現(xiàn)視頻、音頻通信的WebRTC，都是基于HTML5規(guī)范中定義的一個(gè)接口：MessageEvent。這是一個(gè)基于消息的事件。首先我們可以看一下在JavaScript中，傳統(tǒng)的事件類型有哪些。

傳統(tǒng)的DOM事件的基類主要包括：

(1)UIEvents：一般化的UI事件，其中鼠標(biāo)事件和鍵盤事件都繼承自UI事件；

(2)MouseEvents：一般化的鼠標(biāo)事件，比如click事件、mousemove事件等，都是MouseEvents事件類型的實(shí)例；

(3)MutationEvents：一般化的DOM變動(dòng)事件；

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

而HTML5中新增添的MessageEvent事件，是專門用來進(jìn)行事件傳輸?shù)氖录?。它除了包含Event的屬性之外，還包含一些自己特有的屬性。接口具體代碼這里就不貼了，可以查看HTML5規(guī)范的第880頁查看。

MessageEvent新增的重要屬性包括：

(1)data：這里面存儲(chǔ)的就是服務(wù)器發(fā)送的數(shù)據(jù)

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

除此之外還包括origin、ports、source等屬性。下面通過對(duì)SSE實(shí)現(xiàn)的分析，了解如何使用MessageEvent。

2、SSE和MessageEvent

SSE客戶端的實(shí)現(xiàn)就使用了MessageEvent接口。

服務(wù)器在清單中的各個(gè)字段會(huì)按照一種規(guī)則被客戶端進(jìn)行解讀，其中的id字段就對(duì)應(yīng)著MessageEvent中的lastEventId。其中的data字段定義的數(shù)據(jù)通過解讀后，就會(huì)被傳送到MessageEvent的data字段，看如下代碼：

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

這里面我們直接使用事件對(duì)象的處理方法，在Chrome控制臺(tái)中打印出這個(gè)事件對(duì)象的結(jié)構(gòu)?？梢钥吹皆搶?duì)象的data字段就是test.php中發(fā)送過來的數(shù)據(jù)，它的type是message，而其原型繼承的就是MessageEvent。

此外還要注意，SSE服務(wù)器清單中的retry是一個(gè)內(nèi)部屬性，是不能通過JavaScript代碼獲取的。

3.EventSource接口

我們?cè)赟SE中使用的EventSource接口在HTML5規(guī)范中定義，代碼可見HTML5規(guī)范的第882頁。

從接口中可以看到，首先是定義的三個(gè)內(nèi)置的事件處理程序：onopen/onmessage/onclose。此外還包括三個(gè)連接的狀態(tài)readyState，CONNECTING表示正在建立連接，可能的情況是連接還沒建立好或者連接中斷客戶端正在重連這個(gè)過程；OPEN表示連接開啟可以傳送數(shù)據(jù)的狀態(tài)，CLOSED表示連接中斷，并且客戶端沒有嘗試重連。其中定義的方法我們可以看到只有close()，用來關(guān)閉連接。

感謝各位的閱讀！關(guān)于“HTML5中MessageEvent以及SSE的規(guī)范是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！