[TOC] ## 概述 - HTTP 協議無法做到服務器主動推送信息。但是，有一種變通方法，就是服務器向客戶端聲明，接下來要發送的是流信息（streaming） - 它基于 HTTP 協議，目前除了 IE/Edge，其他瀏覽器都支持 優點: * SSE 屬于輕量級，使用簡單；WebSocket 協議相對復雜。 * SSE 默認支持斷線重連，WebSocket 需要自己實現。 * SSE 一般只用來傳送文本，二進制數據需要編碼后傳送，WebSocket 默認支持傳送二進制數據。 * SSE 支持自定義發送的消息類型。 ## API ### EventSource 對象 判斷是否支持 EventSource ``` if ('EventSource' in window) { // ... } ``` 初始化 ``` var source = new EventSource(url); // 如果跨域,可以設置第二個參數,是否發送cookie var source = new EventSource(url, { withCredentials: true }); ``` 屬性: - readyState ``` 0：相當于常量EventSource.CONNECTING，表示連接還未建立，或者斷線正在重連。 1：相當于常量EventSource.OPEN，表示連接已經建立，可以接受數據。 2：相當于常量EventSource.CLOSED，表示連接已斷，且不會重連。 ``` 方法: - onopen ``` source.onopen = function (event) { // ... }; // 另一種寫法 source.addEventListener('open', function (event) { // ... }, false); ``` - message ``` source.onmessage = function (event) { var data = event.data; // handle message }; // 另一種寫法 source.addEventListener('message', function (event) { var data = event.data; // handle message }, false); ``` - error ``` source.onerror = function (event) { // handle error event }; // 另一種寫法 source.addEventListener('error', function (event) { // handle error event }, false); ``` - close ``` source.close(); ``` - 自定義事件 ``` 開發者還可以自定義 SSE 事件，且發送回來的數據不會觸發message事件 source.addEventListener('foo', function (event) { var data = event.data; // handle message }, false); ``` ### 服務器實現 1. 必須是utf-8 格式,且頭信息如下 ``` Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive ``` 2. 每一次發送的信息，由若干個message組成，每個message之間用`\n\n`分隔 3. 每個message內部由若干行組成，每一行都是如下格式 ``` [field]: value\n field類型: data event id retry ``` 3. 保持心跳:用冒號開頭的行,標識注釋 ``` : This is a comment ``` 示例 ``` : this is a test stream\n\n data: some text\n\n data: another message\n data: with two lines \n\n ``` #### data 字段 單行: ``` data: message\n\n ``` 多行 ``` data: begin message\n data: continue message\n\n ``` 示例:json ``` data: {\n data: "foo": "bar",\n data: "baz", 555\n data: }\n\n ``` #### id 字段 數據標識符用id字段表示，相當于每一條數據的編號 ``` id: msg1\n data: message\n\n ``` - 瀏覽器用lastEventId屬性讀取這個值。 - 一旦連接斷線，瀏覽器會發送一個 HTTP 頭，里面包含一個特殊的Last-Event-ID頭信息，將這個值發送回來，用來幫助服務器端重建連接。 - 因此，這個頭信息可以被視為一種同步機制。 #### event 字段 - 表示自定義的事件類型，默認是message事件 - 瀏覽器可以用addEventListener()監聽該事件 ``` event: foo\n data: a foo event\n\n data: an unnamed event\n\n event: bar\n data: a bar event\n\n ``` - 第一條的名字是foo，觸發瀏覽器的foo事件； - 第二條未取名，表示默認類型，觸發瀏覽器的message事件； - 第三條是bar，觸發瀏覽器的bar事件 示例 ``` event: userconnect data: {"username": "bobby", "time": "02:33:48"} event: usermessage data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."} event: userdisconnect data: {"username": "bobby", "time": "02:34:23"} event: usermessage data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."} ``` #### retry 字段 指定瀏覽器重新發起連接的時間間隔 ``` retry: 10000\n ``` 兩種情況會導致瀏覽器重新發起連接： - 一種是時間間隔到期， - 二是由于網絡錯誤等原因，導致連接出錯。