HTML5 新特性之 Websocket

HTML5 為 Web 應用帶來了一種新的通訊方式，它不同於 Ajax 通訊方式在於 Websocket 是一種客戶端與伺服器端可以雙工通訊，這樣一來客戶端不僅可以拉取伺服器端的資料，而且伺服器端可以主動的向客戶的推送資料。這樣一來在 Web 應用中可以實現更多的資料互動方式，完成更佳好的資料體驗。

在 Websocket 出現之前，網站為了實現這種即時通訊，都是採用輪詢拉取服務端的資料，雖然這種方式可以完成類似於資料推送的通訊，但是在即時性和效能上都不如 Websocket 技術。

Websocket API

建立一個例項

建立一個 WebSocket 例項，即和 WebSocket 伺服器之間建立了連線：

var socket = new WebSocket('ws://domain:port');

send(msg)

它是用來給 WebSocket 伺服器傳送資料的方法：

var socket = new WebSocket('ws://domain:port'); 
socket.send("send message to server");

close()

它是用來關閉和 WebSocket 伺服器之間的連線：

var socket = new WebSocket('ws://domain:port'); 
socket.close();

onopen

它是用來監聽客戶端連結 WebSocket 伺服器成功的事件：

var socket = new WebSocket('ws://domain:port'); 
socket.onopen = function(evt){
};

onerror

它是用來監聽客戶端和 WebSocket 伺服器資料互動產生錯誤（連線失敗、傳送或者接收資料失敗、處理事件失敗等）的事件：

var socket = new WebSocket('ws://domain:port'); 
socket.onerror = function(evt){
};

onmessage

它是用來監聽客戶端和 WebSocket 伺服器之間傳送資料的事件，其中資料會包含在回撥函式的傳入引數evt中：

var socket = new WebSocket('ws://domain:port'); 
socket.onmessage = function(evt){
};

onclose

它是用來監聽客戶端與 WebSocket 伺服器斷開連線的事件：

var socket = new WebSocket('ws://domain:port'); 
socket.onclose = function(evt){
};

總結

這種長連結的雙工的通訊方式讓 Web 應用在體驗上又更佳提升了一步，並且在效能上面有了一定的提升，它讓 Web 的資料更佳實時的展現出來，並且它讓 Web 應用擴充到即時通訊、遊戲、影片等行業，讓 Web 的應用性更佳的寬廣。