H5學習系列之webSocket入門

Websocket

1.websocket是什麼？

WebSocket是爲解決客戶端與服務端實時通訊而產生的技術。其本質是先經過HTTP/HTTPS協議進行握手後建立一個用於交換數據的TCP鏈接，

此後服務端與客戶端經過此TCP鏈接進行實時通訊。

2.websocket的優勢

之前咱們實現推送技術，用的都是輪詢，在特色的時間間隔有瀏覽器自動發出請求，將服務器的消息主動的拉回來，在這種狀況下，咱們須要不斷的向服務器 發送請求，然而HTTP request 的header是很是長的，裏面包含的數據可能只是一個很小的值，這樣會佔用不少的帶寬和服務器資源。會佔用大量的帶寬和服務器資源。

WebSocket API最偉大之處在於服務器和客戶端能夠在給定的時間範圍內的任意時刻，相互推送信息。在創建鏈接以後，服務器能夠主動傳送數據給客戶端。

此外，服務器與客戶端之間交換的標頭信息很小。

WebSocket並不限於以Ajax(或XHR)方式通訊，由於Ajax技術須要客戶端發起請求，而WebSocket服務器和客戶端能夠彼此相互推送信息；

關於ajax,comet,websocket的詳細介紹，和websocket報文的介紹，你們能夠參看http://www.shaoqun.com/a/54588.aspx  網頁設計]Ajax、Comet與Websocket，

我若是之後有時間，也會寫出來的

3.如何使用websocket

客戶端

在支持WebSocket的瀏覽器中，在建立socket以後。能夠經過onopen，onmessage，onclose即onerror四個事件實現對socket進行響應

一個簡單是示例

var ws = new WebSocket(「ws://localhost:8080」);

ws.onopen = function()

{  console.log(「open」);

  ws.send(「hello」);

};

ws.onmessage = function(evt)

{

  console.log(evt.data)

};

ws.onclose = function(evt)

{

  console.log(「WebSocketClosed!」);

};

ws.onerror = function(evt)

{

  console.log(「WebSocketError!」);

};

1.var ws = new WebSocket(「ws://localhost:8080」);

申請一個WebSocket對象，參數是須要鏈接的服務器端的地址，同http協議使用http://開頭同樣，WebSocket協議的URL使用ws://開頭，另外安全的WebSocket協議使用wss://開頭。

ws.send(「hello」);
用於叫消息發送到服務端
2.ws.onopen = function() { console.log(「open」)};

當websocket建立成功時，即會觸發onopen事件 3.ws.onmessage = function(evt) { console.log(evt.data) }; 當客戶端收到服務端發來的消息時，會觸發onmessage事件，參數evt.data中包含server傳輸過來的數據 4.ws.onclose = function(evt) { console.log(「WebSocketClosed!」); }; 當客戶端收到服務端發送的關閉鏈接的請求時，觸發onclose事件 5.ws.onerror = function(evt) { console.log(「WebSocketError!」); }; 若是出現鏈接，處理，接收，發送數據失敗的時候就會觸發onerror事件 咱們能夠看出全部的操做都是採用事件的方式觸發的，這樣就不會阻塞UI，使得UI有更快的響應時間，獲得更好的用戶體驗。