初識html5 WebSocket

標籤：html5   websocket   

1.  WebSocket概念

WebSocket是HTML5開始提供的一種Client與Server間進行全雙工系統(full-duplex)通訊的網路技術

雙工(duplex)，指二台通訊裝置之間，允許有雙向的資料傳輸

Client和Server通過WebSocket Protocol建立串連後，雙方可以互傳資料並且雙方都可以關閉此串連

2. HTTP概念

HTTP Protocol是無狀態協議的，Client和Server通過HTTP Protocol建立串連後，將採用”request—response”模式通訊

2.1 Client發起請求

2.2 Server接收請求

2.3 經過三向交握，建立串連

2.4 Server處理請求

2.5 Server將結果發給Client

2.6 中斷連線

3. 既然使用HTTP時，Server不會主動向Client發送訊息，那麼Client如何擷取Server的最新訊息呢(重新整理瀏覽器除外)？

常用的方法有：AJAX輪詢、AJAX長輪詢、HTML5 Server Sent Events (SSE) / EventSource

(下面的圖片源自此文：http://stackoverflow.com/questions/11077857/what-are-long-polling-websockets-server-sent-events-sse-and-comet?lq=1)

3.1 AJAX輪詢

function doAjaxPolling(){   $.ajax({     url: "http://xxx",     timeout: 1000*60,     success: function(data){       //data就是從Server擷取的訊息     },     complete: function(){         setTimeout(doAjaxPolling(),10*1000);     },     error: function(){setTimeout(doAjaxPolling(),10*1000);     }   });　}

Client每隔一段時間(如：10s)向Server發送一次請求

3.2 AJAX長輪詢

function doAjaxLongPolling(){   $.ajax({     url: "http://xxx",     timeout: 1000*60,     success: function(data){       //data就是從Server擷取的訊息     },     complete: function(){        doAjaxLongPolling();     },     error: function(){   doAjaxLongPolling();     }   });　}

Client向Server發送一次請求，這時Server並未及時處理該請求，而是等到Server端產生新訊息才處理該請求，然後將結果發給Client，Client收到訊息後，會重新向Server發送一次請求

如果在規定時間內，Server仍未返回訊息，Client會斷開此次串連，然後重新向Server發送一次請求

 

3.3 HTML5 Server Sent Events (SSE) / EventSource

var source = new EventSource("http://xxx");source.onmessage = function(event) {  //event.data就是從Server擷取的訊息};

Server Sent Events跟AJAX輪詢類似，只不過輪詢時間為3s

4. 使用WebSocket擷取Server新訊息

使用HTTP時，訊息總是單項傳輸，而使用WebSocket時，Client和Server建立串連後，可以雙向傳輸訊息，當Server有新訊息時，可以直接發給Client 

5. WebSocket與HTTP keep-alive

HTTP keep-alive（HTTP 持久串連）是使用同一個TCP串連來發送和接收多個HTTP request/response，而不是為每一個新的request/response開啟新的串連的方法

在 HTTP 1.1 中，所有的串連預設都是持續串連，除非特殊聲明不支援

Chrome的keep-alive值為300s

Tomcat可在server.xml的Conenctor標籤中設定keepAliveTimeout屬性。預設情況下，keepAliveTimeout=connectionTimeout，即20s。keepAliveTimeout設定為-1，則串連永久有效

HTTP keep-alive，雖然也儲存了串連，但仍是request—response模式，Server不能主動向Client發送訊息

6. WebSocket的demo

開啟http://www.websocket.org/echo.html，可看到當前瀏覽器是否支援WebSocket。如果支援，點擊”Connect”，串連成功後，點”Send”即可發送訊息

該頁面下方，有個建立WebSocket的例子

7. WebSocket API

http://dev.w3.org/html5/websockets/

總結下WebSocket的特點：

Client和Server之間的串連可以一直使用，直到某一方關閉串連；避免了頻繁建立、中斷連線所產生的CPU、記憶體開銷；Client和Server之間可以雙向傳輸訊息

 

參考文章：

http://www.websocket.org/

http://zh.wikipedia.org/wiki/WebSocket

http://zh.wikipedia.org/wiki/%E5%85%A8%E9%9B%99%E5%B7%A5

http://zh.wikipedia.org/wiki/HTTP%E6%8C%81%E4%B9%85%E8%BF%9E%E6%8E%A5

http://gabenell.blogspot.hk/2010/11/connection-keep-alive-timeouts-for.html

http://stackoverflow.com/questions/7620620/whats-the-behavioral-difference-between-http-stay-alive-and-websockets

http://stackoverflow.com/questions/17608551/how-is-websocket-different-than-http-with-header-connection-keep-alive-million

http://stackoverflow.com/questions/10028770/html5-websocket-vs-long-polling-vs-ajax-vs-webrtc

http://stackoverflow.com/questions/11077857/what-are-long-polling-websockets-server-sent-events-sse-and-comet?lq=1