伺服器推送 SSE 了解一下？

若干年前，伺服器並沒有主動推送的能力，主要是通過輪詢的方式來達到近似於伺服器推送的能力。現在不需要這麼麻煩，輪詢只作為向下相容的方案即可，當前主流的伺服器推送是使用 sse 或者 websocket 來實現的。兩者對比如下：

是否基於新協議

是否雙向通訊

是否支援跨域

接入成本

sse否（http）

否（伺服器單向）

否（firefox 支援跨域）

低websocket

是（ws）是是

高需要稍微解釋一下的是接入成本。sse 是相對輕量級的協議，（node）**實現上比較簡單，而 websocket 是比較複雜的協議，雖然也有類庫可以套用，也許頁端方面兩者**量差不多，但伺服器方面實現就複雜不少了。同時，要實現 websocket，是需要另起乙個服務，而 sse 並不需要。

比較之後，對 sse 與 websocket 有了大致的理解。專案對伺服器推送的要求是傳送通知，而未來可能需要接入實時同步的功能，結合專案實際情況與接入成本後，選擇了 sse。

最後看一下瀏覽器支援情況以作參考：

ie就let it go吧，日常不支援~其他瀏覽器還是綠油油的，支援度還是挺高的。

專案中使用 egg 作為框架，底層是 koa2 的，因而使用 koa2 作為示例。node 端關鍵**如下：

const } = ctx;

res.writehead(200, );

let stream = new passthrough();

let i = 0;

let timer = setinterval(() => else

stream.write(`id: $\n`); // 訊息id

stream.write(`data: $\n`); // 訊息資料

stream.write('retry: 10000\n'); // 重連時間

stream.write('\n\n'); // 訊息結束

i++;

}, 1000);

stream.on('close', function() )

ctx.body = stream;

});複製**

伺服器告訴客戶端，返回的型別是事件流（text/event-stream），查閱 mdn 文件可知：事件流僅僅是乙個簡單的文字資料流，文字應該使用 utf- 8 格式的編碼。每條訊息後面都由乙個空行作為分隔符。以冒號開頭的行為注釋行，會被忽略。

之後就是訊息主體了，儘管例子使用setinterval模擬不斷傳送推送，但換成任意條件觸發推送也是可以的。stream.write呼叫了5次，對應規範中的各個字段，理解如下：

更詳細的解釋可以查閱 mdn 文件。有乙個小細節需要注意，在 sse 的草案中提到，"text/event-stream" 的 mime 型別傳輸應當在靜置 15 秒後自動斷開。但實測（僅用了 chrome）後發現，即使靜置時間超過 15 秒，瀏覽器與客戶端均不會斷開連線。查閱了不少文章，均建議維護一套傳送\n\n的心跳機制。個人認為此舉有助於提高客戶端程式的健壯性，但不是必須的。

最後是監聽事件流的close事件，用於結束此次的鏈結。測試後發現，無論是讓客戶端呼叫close方法（下文有例子~），還是異常結束，包括關閉視窗、關閉程式等，都能觸發伺服器的close事件。

客戶端**更簡單，示例如下：

複製**前端童鞋對於這樣的**應該挺熟悉的，一切都是事件觸發，根據不同的事件執行對應的**。稍微說明一下eventsource擁有的屬性和方法，相信大家就可以愉快地使用了。

eventsource有三個預設的事件，分別是：

兩個唯讀屬性：

乙個方法：

更詳細的解釋可以查閱 mdn 文件

關於伺服器 sse 的簡單介紹就到此為止了，可以看到，sse 開發起來還是比較簡單的，接入成本非常低。但並不是說 websocket 就是不好的，拋開實際場景談業務就是耍流氓。此外上述**只是演示，還能進一步進行優化的。如為了減輕伺服器開銷，可以建立一套機制有目的地斷開與重連等，大家可以自行實現。

相關的**已經丟到 github 上，歡迎查閱。

感謝各位看官大人看到這裡，知易行難，希望本文對你有所幫助~謝謝！

20 行**寫乙個資料推送服務

使用伺服器傳送事件

eventsource

伺服器推送 SSE 了解一下？

SSE 伺服器傳送事件

伺服器指示燈想購買伺服器機櫃，就得了解一下

ping 一下伺服器的IP

伺服器推送 SSE 了解一下？

SSE 伺服器傳送事件

伺服器指示燈 想購買伺服器機櫃，就得了解一下

ping 一下伺服器的IP

相關推薦

伺服器指示燈想購買伺服器機櫃，就得了解一下