HTML5資料推送SSE原理及應用程式開發的圖文詳解
- 黄舟原創
- 2017-03-08 15:23:152643瀏覽
JavaScript表達行為，CSS表達外觀，注意HTML既表達結構（邏輯結構），又表達內容（資料本身）通常需要更新資料時，並不需要更新結構，正是這種不改變組織結構僅改變資料的訴求，推動了資料拉取和資料推送技術的產生。
SSE是一種允許伺服器端向客戶端推送新資料（簡稱資料推送）的HTML5技術。資料推送有兩種替代方案：無更新方案和資料拉取方案。
無更新方案：
#載入完畢HTML之後，得到一個HTML頁面，之後瀏覽器會要求圖片、CSS檔案和JavaScript檔案等，他們都是瀏覽器可以快取的靜態檔案。如果頁面使用後端語言，例如PHP、Ruby和Python等為使用者動態產生HTML的語言。
資料拉取方案：
瀏覽器會基於一些使用者行為，或在一定時間之後，或基於某種別的觸發方案，向伺服器端請求或全部更新數據，透過javascript或一個meta標籤能夠命令整個頁面重新載入。我們所熟悉的Ajax技術只被用來要求最新數據，當收到數據時，javascript函數會利用它來局部更新DOM。資料拉取的要義：僅拉取新數據，並且只更新頁面中受影響部分。
以上的都不是資料推送，資料推送不是靜態文件，也不涉及瀏覽器為更新資料而發起請求，資料推送是由伺服器選擇客戶端發送新資料。
當資料來源有新資料時，伺服器端能立刻傳送給一個或多個客戶端，而不用等客戶端來請求，這些新資料可能是突發新聞、最新股票、上線朋友的聊天資訊、新的天氣預報、策略遊戲中的下一步等。
SSE適用於更新頻繁、低延遲且資料都是從服務端到客戶端。它和WebSocket的差別：
1）便利，不需要增加任何新元件，用任何習慣的後端語言和框架就能繼續使用，不用為新建虛擬機器弄一個新的IP或新的端口號而勞神。
2）伺服器端的簡潔。因為SSE能在現有的HTTP/HTTPS協定上運作，所以它能夠直接運作於現有的代理伺服器和認證技術。
WebSocket相較SSE最大的優勢在於它是雙向交流的，這意味著伺服器發送資料就像從伺服器接受資料一樣簡單，而SSE一般透過一個獨立的Ajax請求從客戶端向服務端傳送數據，因此相對於WebSocket使用Ajax會增加開銷。因此，如果需要以每秒一次或更快的頻率向服務端傳輸數據，就應該使用WebSocket。
具體程式碼如下：
html程式碼
#<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>basic SSE test</title>
</head>
<body>
<pre id = "x">initializting...