首頁 > web前端 > H5教程 > HTML5中MessageEvent以及SSE的規範

HTML5中MessageEvent以及SSE的規範

黄舟
發布: 2018-05-28 16:16:06
原創
3000 人瀏覽過

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介面。

伺服器在清單中的各個欄位會依照一種規則被客戶端解讀,其中的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()#,用來關閉連線。

以上是HTML5中MessageEvent以及SSE的規範的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板