web socket教程

標籤：web   http   執行個體   開啟   通訊協定   傳遞   change   發送資訊   example   

web socket是一種網路通訊協定，很多網頁應用中都會使用到它，比如聊天室，選票等等.

一、為什麼需要WebSocket？

HTTP是無串連（不需連線的含義是限制每次串連只處理一個請求。伺服器處理完客戶的請求，並收到客戶的應答後，即中斷連線。採用這種方式可以節省傳輸時間）

HTTP是無狀態（HTTP協議是無狀態協議。無狀態是指協議對於交易處理沒有記憶能力。缺少狀態意味著如果後續處理需要前面的資訊，則它必須重傳，這樣可能導致每次串連傳送的資料量增大。另一方面，在伺服器不需要先前資訊時它的應答就較快）

HTTP 協議有一個缺陷：通訊只能由用戶端發起。HTTP 協議做不到伺服器主動向用戶端推送資訊。

這種http單向請求的特點，如果伺服器有連續的狀態變化，用戶端要獲知就非常麻煩。我們只能使用“輪詢”：每隔一段時候，就發出一個詢問，瞭解伺服器有沒有新的資訊。最典型的情境就是聊天室，選票

輪詢的效率低，非常浪費資源（因為必須不停串連，或者 HTTP 串連始終開啟）。因此，工程師們一直在思考，有沒有更好的方法。WebSocket 就是這樣發明的。

二、WebSocket介紹。

所有瀏覽器都已經支援了。

在JavaScript 中建立了Web Socket 之後，會有一個HTTP 要求發送到瀏覽器以發起串連。在取得伺服器響應後，建立的串連會使用HTTP 升級從HTTP 協議交換為WebSocket 通訊協定。

它的最大特點就是，伺服器可以主動向用戶端推送資訊，用戶端也可以主動向伺服器發送資訊，是真正的雙向平等對話，屬於伺服器推送技術的一種。

使用自訂協議而非HTTP 協議的好處是：能夠在用戶端和伺服器之間發送非常少量的資料，而不必擔心HTTP 那樣位元組級的開銷。由於傳遞的資料包很小，因此Web Sockets 非常適合行動裝置 App。沒有同源限制，用戶端可以與任意伺服器通訊。

三、WebSocket使用。

1要建立Web Socket，先執行個體一個WebSocket 對象並傳入要串連的URL：

var socket = new WebSocket("ws://www.example.com/server.php");

注意，必須給WebSocket 建構函式傳入絕對URL。同源策略對Web Sockets 不適用，因此可以通過它開啟到任何網站的串連。至於是否會與某個域中的頁面通訊，則完全取決於伺服器。

執行個體化了WebSocket 對象後，瀏覽器就會馬上嘗試建立串連。與XHR 類似，WebSocket 也有一個表示目前狀態的readyState 屬性。不過，這個屬性的值與XHR 並不相同，

 WebSocket.OPENING (0)：正在建立串連。

 WebSocket.OPEN (1)：已經建立串連。

 WebSocket.CLOSING (2)：正在關閉串連。

 WebSocket.CLOSE (3)：已經關閉串連。

WebSocket 沒有readystatechange 事件；不過，它有其他事件，對應著不同的狀態。readyState的值永遠從0 開始。

要關閉Web Socket 串連，可以在任何時候調用close()方法。

socket.close();

調用了close()之後，readyState 的值立即變為2（正在關閉），而在關閉串連後就會變成3。

2. 發送和接收資料

Web Socket 開啟之後，就可以通過串連發送和接收資料。要向伺服器發送資料，使用send()方法

並傳入任一字元串，例如：var socket = new WebSocket("ws://www.example.com/server.php");

socket.send("Hello world!");

因為Web Sockets 只能通過串連發送純文字資料，所以對於複雜的資料結構，在通過串連發送之前，必須進行序列化。下面的例子展示了先將資料序列化為一個JSON 字串，然後再發送到伺服器：

var message = {

     time: new Date(),

     text: "Hello world!",

     clientId: "asdfp8734rew"

};

socket.send(JSON.stringify(message));

接下來，伺服器要讀取其中的資料，就要解析接收到的JSON 字串。

當伺服器向用戶端發來訊息時，WebSocket 對象就會觸發message 事件。這個message 事件與其他傳遞訊息的協議類似，也是把返回的資料儲存在event.data 屬性中。

socket.onmessage = function(event){

     var data = event.data;

    //處理資料

};

與通過send()發送到伺服器的資料一樣，event.data 中返回的資料也是字串。如果你想得到其他格式的資料，必須手工解析這些資料。

3. 其他事件

WebSocket 對象還有其他三個事件，在串連生命週期的不同階段觸發。

? open：在成功建立串連時觸發。

? error：在發生錯誤時觸發，串連不能持續。

? close：在串連關閉時觸發。

WebSocket 對象不支援DOM 2 級事件接聽程式，因此必須使用DOM 0 級文法分別定義每個事件處理常式。

var socket = new WebSocket("ws://www.example.com/server.php");

socket.onopen = function(){

     alert("Connection established.");

};

socket.onerror = function(){

     alert("Connection error.");

};

socket.onclose = function(){

     alert("Connection closed.");

};

在這三個事件中，只有close 事件的event 對象有額外的資訊。這個事件的事件對象有三個額外的屬性：wasClean、code 和reason。其中，wasClean 是一個布爾值，表示串連是否已經明確地關閉；code 是伺服器返回的數值狀態代碼；而reason 是一個字串，包含伺服器發回的訊息。可以把這些資訊顯示給使用者，也可以記錄到日誌中以便將來分析。

socket.onclose = function(event){

           console.log("Was clean? " + event.wasClean + " Code=" + event.code + " Reason="+                       event.reason);

};

web socket教程