源文件：https://w3ctech.com/topic/1754
技術實現
1、ajax輪詢
2、ajax長輪詢
3、websocket
4、server-sent-events(SSE)
ajax輪詢
建議不采用，通過 setInterval 定時發送請求。
缺點：數據同步不及時；增加后端處理壓力。
setInterval(function() {
?????$.ajax({?
?????????url: 'http://api.3g.qq.com',?
? ? ? ? ?success: function() { //code from here }?
?????});
}, 3000);
ajax長輪詢
沒有更新的時候不再返回空響應，而且把連接保持到有更新的時候，客戶端向服務器發送Ajax請求，服務器接到請求后hold住連接，直到有新消息才返回響應信息并關閉連接，客戶端處理完響應信息后再向服務器發送新的請求，通常把這種實現也叫做comet。
function async() {?
?????$.ajax({?
?????????url: 'http://api.3g.qq.com',
?????????success: function() { async(); //code from here }?
?????});
}
通常的做法是，在服務器的程序中加入一個死循環，在循環中監測數據的變動。當發現新數據時，立即將其輸出給瀏覽器并斷開連接，瀏覽器在收到數據后，再次發起請求以進入下一個周期。
Server-sent-events(SSE)
Server-sent-events(SSE)讓服務端可以向客戶端流式發送文本消息，在實現上，客戶端瀏覽器中增加EventSource對象，使其能通過事件的方式接收到服務器推送的消息，在服務端，使用長連接的事件流協議，即請求響應時增加新數據流數據格式。
非常適應于后端數據更新頻繁且對實時性要求較高而又不需要客戶端向服務端通信的場景下。
EventSource API
var source = new EventSource('http://localhost:8080');
source.addEventListener('message', function(e) {? console.log(e.data);}, false);
source.addEventListener('open', function(e) {? // Connection was opened.}, false);
source.addEventListener('error', function(e) {? if (e.readyState == EventSource.CLOSED) {? ? // Connection was closed.? }}, false);
source.addEventListener('userlogin', function(e) {? console.log(e.data);}, false);
客戶端API使用非常簡單，瀏覽器在支持的情況下會自動處理一切，包括連接管理接收并解析數據到最后觸發DOM事件，開發時只需要關注業務邏輯，EventSource接口還能自動重新連接并跟蹤最近接收的消息，還可以向服務器發送上一次接收到消息的ID，以便服務器重傳丟失的消息并恢復流。
Event Stream協議
SSE事件流以流式HTTP響應請求，客戶端發起普通的HTTP請求，服務器以自定義的text/event-stream內容類型響應，然后通過事件傳遞數據。
響應頭
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
響應數據格式
id: 123\n
retry: 10000\n
event: userlogin\n
data: {"username": "John123"}\n\n
客戶端通過EventSource接口發起連接，服務器以text/event-stream內容類型響應，可設置中斷后重連時間間隔retry，數據通過字符串的方式賦值給data字段，也可以指定消息類型給event字段。在客戶端EventSource接口通過檢查換行分隔符來解析到來的數據流，從data字段中獲取數據，檢查可選的ID和類型，最后分配事件告知應用，如果存在某個類型，觸發自定義的事件回調，否則就會調用通用的onmessage回調。
為了在連接中斷時恢復中斷過程中丟失的消息，服務器在響應時可以給每條消息關聯任意的ID字符串，瀏覽器會自動記錄最后一次接收到消息ID，并在發送重新連接請求時自動在HTTP請求頭中追加Last-Event-ID，這樣就可以標識中斷過程中丟失的消息并重新發送給客戶端。
優點
基于現有http協議，實現簡單
斷開后自動重聯，并可設置重聯超時
派發任意事件
跨域并有相應的安全過濾
缺點
只能單向通信，服務器端向客戶端推送事件
事件流協議只能傳輸UTF-8數據，不支持二進制流。
IE下目前所有不支持EventSource
Tip?如果代理服務器或中間設備不支持SSE，會導致連接失效，正式環境中使用通過TLS協議發送SSE事件流。
WebSocket
WebSocket可以實現與客戶端與服務器雙向，基于消息的文本或二進制數據通信，主要包括兩個部分，客戶端WebSocket API及WebSocket協議。
WebSocket是HTML5出的東西（協議），也就是說HTTP協議沒有變化，或者說沒關系，但HTTP是不支持持久連接的（長連接，循環連接的不算）首先HTTP有1.1和1.0之說，也就是所謂的keep-alive，把多個HTTP請求合并為一個，但是Websocket其實是一個新協議，跟HTTP協議基本沒有關系，只是為了兼容現有瀏覽器的握手規范而已。
WebSocket API
瀏覽器提供的WebSocket API很簡單，使用時無需關心連接管理和消息處理等底層細節，只需要發起連接，綁定相應的事件回調即可。
var connection = new WebSocket('ws://localhost:8080');
// When the connection is open, send some data to the server
connection.onopen = function () { connection.send('Ping'); // Send the message 'Ping' to the server};
// Log errors
connection.onerror = function (error) { console.log('WebSocket Error ' + error);};
// Log messages from the server
connection.onmessage = function (e) { console.log('Server: ' + e.data);};
// Sending String
connection.send('your message');
// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
????binary[i] = img.data[i];
}
connection.send(binary.buffer);
// Sending file as Blob
var file = document.querySelector('input[type="file"]').files[0];
connection.send(file);
WebSocket資源URL采用了自定議模式，沒有使用http是為了在非http協議場景下也能使用，wss表示使用加密信道通信(TCP + TLS)，支持接收和發送文本和二進制數據。
WebSocket 協議
WebSocket通信協議包含兩個部分，一是開放性HTTP握手連接協商連接參數，二是二進制消息分幀機制（接收消息的文本和二進制數據傳輸）。它是一個獨立完善的協議，也可以在瀏覽器之外實現。
HTTP升級協商
WebSocket協議提供了很多強大的特性：基于消息的通信、自定義的二進制分幀層、子協議協商、可選的協議擴展，等等。即在交換數據之前，客戶端必須與服務器協商適當的參數以建立連接。
利用HTTP完成握手有幾個好處。首先，讓WebSockets與現有HTTP基礎設施兼容：WebSocket服務器可以運行在80和443 端口上，這通常是對客戶端唯一開放的端口。其次，讓我們可以重用并擴展HTTP的Upgrade流，為其添加自定義的WebSocket首部，以完成協商。
請求頭信息
Connection:Upgrade
Sec-WebSocket-Key:eDCPPyPQZq7PiwRcx8SPog==
Sec-WebSocket-Version:13
Upgrade:websocket
響應頭信息
HTTP/1.1 101 Switching Protocols
Connection:Upgrade
Sec-WebSocket-Accept:/ZVAP3n6XuqDUoDp416PYUO+ZJc=
Upgrade:websocket
最后，前述握手完成后，如果握手成功，該連接就可以用作雙向通信信道交換WebSocket消息。到此，客戶端與服務器之間不會再發生HTTP通信，一切由WebSocket?協議接管。
服務端實現
。Node (Socket.IO, WebSocket-Node, ws)
。Java (Jetty)
。Python (Tornado, pywebsocket)
。...
使用場景
適合于對數據的實時性要求比較強的場景，如通信、股票、Feed、直播、共享桌面，特別適合于客戶端與服務頻繁交互的情況下，如實時共享、多人協作等平臺。
優點
。真正的全雙工通信
。支持跨域設置(Access-Control-Allow-Origin)
缺點
。采用新的協議，后端需要單獨實現
。客戶端并不是所有瀏覽器都支持
。代理服務器會有不支持websocket的情況
。無超時處理
。更耗電及占用資源
TIP?代理、很多現有的HTTP中間設備可能不理解新的WebSocket協議，而這可能導致各種問題，使用時需要注意，可以使借助TLS，通過建立一條端到端的加密信道，可以讓WebSocket通信繞過所有中間代理。
