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