js中WebSocket

一、概念

WebSocket的定義

　　WebSocket是html5提供的一種在單個TCP連接上進行雙向通信的協議，解決了客戶端和服務端之間的實時通信問題。瀏覽器和服務器只需完成一次握手，兩者之間就可以創建一個持久性的TCP連接，此后服務器和客戶端通過此TCP連接進行雙向實時通信。

WebSocket的優點

　　很多網站為了實現數據推送，所用的技術都是ajax輪詢。輪詢是在特定的時間間隔，由瀏覽器主動發起請求，將服務器的數據拉回來。輪詢需要不斷的向服務器發送請求，會占用很多帶寬和服務器資源。WebSocket建立TCP連接后，服務器可以主動給客戶端傳遞數據，能夠更好的節省服務器資源和帶寬，實現更實時的數據通訊。

WebSocke的屬性

　　

WebSocket的方法

　　

WebSocket的實例

　　WebSocket協議本質上是一個基於TCP的協議，為了建立一個WebSocket連接，瀏覽器需要向服務器發起一個HTTP請求，這個請求和普通的HTTP請求不同，它包含了一些附加頭信息，服務器解析這些附加頭信息后產生應答信息返回給客戶端，客戶端和服務端的WebSocket連接就建立起來了，雙方可以通過連接通道自由的傳遞信息，並且這個連接會持續存在直到客戶端或服務端某一方主動關閉連接。

 

function webSocket(){
　　if("WebSocket" in window){
　　　　console.log("您的瀏覽器支持WebSocket");
　　　　var ws = new WebSocket("ws://localhost:8080"); //創建WebSocket連接
　　　　//...
　　}else{
　　　　console.log("您的瀏覽器不支持WebSocket");
　　}
}

 

WebSocket的事件

　　客戶端支持WebSocket的瀏覽器中，在創建socket后，可以通過onopen、onmessage、onclose和onerror四個事件對socket進行響應。WebSocket的所有操作都是采用事件的方式觸發的，這樣不會阻塞UI，是的UI有更快的響應時間，有更好的用戶體驗。

　　瀏覽器通過Javascript向服務器發出建立WebSocket連接的請求，連接建立后，客戶端和服務器就可以通過TCP連接直接交換數據。當你獲取WebSocket連接后，可以通多send()方法向服務器發送數據，可以通過onmessage事件接收服務器返回的數據。

var ws = new WebSocket("ws://localhost:8080"); 
//申請一個WebSocket對象，參數是服務端地址，同http協議使用http://開頭一樣，WebSocket協議的url使用ws://開頭，另外安全的WebSocket協議使用wss://開頭
ws.onopen = function(){
　　//當WebSocket創建成功時，觸發onopen事件
   console.log("open");
　　ws.send("hello"); //將消息發送到服務端
}
ws.onmessage = function(e){
　　//當客戶端收到服務端發來的消息時，觸發onmessage事件，參數e.data包含server傳遞過來的數據
　　console.log(e.data);
}
ws.onclose = function(e){
　　//當客戶端收到服務端發送的關閉連接請求時，觸發onclose事件
　　console.log("close");
}
ws.onerror = function(e){
　　//如果出現連接、處理、接收、發送數據失敗的時候觸發onerror事件
　　console.log(error);
}

 

 

WebSocket的事件