建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家分享的是有關(guān)HTML5中MessageEvent以及SSE的規(guī)范是什么的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
1.MessageEvent接口
在HTML5規(guī)范中定義的新的通信方式，無(wú)論是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事件，是專門用來(lái)進(jìn)行事件傳輸?shù)氖录Ｋ税珽vent的屬性之外，還包含一些自己特有的屬性。接口具體代碼這里就不貼了，可以查看HTML5規(guī)范的第880頁(yè)查看。
MessageEvent新增的重要屬性包括：
(1)data：這里面存儲(chǔ)的就是服務(wù)器發(fā)送的數(shù)據(jù)
(2)lastEventId：這里面存放的是最后一次的事件ID字符串
除此之外還包括origin、ports、source等屬性。下面通過(guò)對(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ù)通過(guò)解讀后，就會(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ā)送過(guò)來(lái)的數(shù)據(jù)，它的type是message，而其原型繼承的就是MessageEvent。
此外還要注意，SSE服務(wù)器清單中的retry是一個(gè)內(nèi)部屬性，是不能通過(guò)JavaScript代碼獲取的。
3.EventSource接口
我們?cè)赟SE中使用的EventSource接口在HTML5規(guī)范中定義，代碼可見HTML5規(guī)范的第882頁(yè)。
從接口中可以看到，首先是定義的三個(gè)內(nèi)置的事件處理程序：onopen/onmessage/onclose。此外還包括三個(gè)連接的狀態(tài)readyState，CONNECTING表示正在建立連接，可能的情況是連接還沒(méi)建立好或者連接中斷客戶端正在重連這個(gè)過(guò)程；OPEN表示連接開啟可以傳送數(shù)據(jù)的狀態(tài)，CLOSED表示連接中斷，并且客戶端沒(méi)有嘗試重連。其中定義的方法我們可以看到只有close()，用來(lái)關(guān)閉連接。
感謝各位的閱讀！關(guān)于“HTML5中MessageEvent以及SSE的規(guī)范是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
標(biāo)題名稱：HTML5中MessageEvent以及SSE的規(guī)范是什么-創(chuàng)新互聯(lián)
地址分享：http://fisionsoft.com.cn/article/ddpepo.html
