HTML5中MessageEvent以及SSE的規範

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中文網其他相關文章！