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
3.1 AJAX輪詢
function doAjaxPolling(){
$.ajax({
url: "http://xxx",
timeout: 1000*60,
success: function(data){
//data就是從Server獲取的消息
},
error: function(){
//錯誤處理
},
complete: 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獲取的消息
},
error: function(){
//錯誤處理
},
complete: 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://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/10028770/html5-websocket-vs-long-polling-vs-ajax-vs-webrtc