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接口。對SSE還不瞭解的話可以查看：http://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);
})

這裏面我們直接使用事件對象的處理方法，在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()，用來關閉連接。