Javascript Ajax總結——其餘跨域技術之Web Sockets

Web Sockets的目標是在一個單獨的持久鏈接上提供全雙工、雙向通訊。在Javascript中建立了Web Sockets以後，會有一個HTTP請求發送到瀏覽器以發起鏈接。在取得服務器響應後，創建的鏈接會使用HTTP升級從HTTP協議交換爲Web Socket協議。也就是說，使用標準的HTTP服務器沒法實現Web Sockets，只有支持這種協議的專門服務器才能正常工做。

因爲Web Sockets使用了自定義的協議，因此URL模式也略有不一樣。未加密的鏈接再也不是http://，而是ws://；加密的鏈接也不是https://，而是wss://。在使用Web Sockets URL時，必須帶着這個模式，由於未來還有可能支持其餘模式。

使用自定義協議而非HTTP協議的好處：
    
　　可以在客戶端和服務器之間發送很是少許的數據，而沒必要擔憂HTTP那樣字節級的開銷。因爲傳遞的數據包很小，所以Web Sockets很是適合移動應用。畢竟對移動應用而言，帶寬和網絡延遲都是關鍵問題。

自定義協議的缺點：

    制定協議的時間比制定Javascript API的時間還要長。
    存在一致性和安全性問題。

支持Web Sockets的瀏覽器：Firefox6+、Safari5+、Chrome、iOS4+版的Safari。

（1）Web Sockets API

建立Web Socket，實例一個WebSocket對象並傳入要鏈接的URL：
    var socket = new WebSocket("ws://www.example.com/server.php");

注：必須給WebSocket構造函數傳入絕對URL。同源策略對Web Sockets不適用，所以能夠經過它打開到任何站點的鏈接。至因而否會與某個域中的頁面通訊，則徹底取決於服務器。（經過握手信息就能夠知道請求來自何方。）

WebSocket表示當前狀態的readyState屬性：
    * WebSocket.OPENING(0)：正在創建鏈接。
    * WebSocket.OPEN(1)：已經創建鏈接。
    * WebSocket.CLOSING(2)：正在關閉鏈接。
    * WebSocket.CLOSE(3)：已經關閉鏈接。

關閉Web Socket鏈接：
    socket.close();

調用了close()以後，readyState的值當即變爲2（正在關閉），而在關閉鏈接後就會變成3。

（2）發送和接收數據

向服務器發送數據，使用send()方法並傳入任意字符串：

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

由於Web Sockets只能經過鏈接發送純文本數據，因此對於複雜的數據結構，在經過鏈接發送以前，必須序列化。

如：
    var message = {
        time: new Date(),
        text: "Hello World!",
        clientId: "asdfp8734req"
    };
    socket.send(JSON.stringify(message));

當服務器向客戶端發送消息是，WebSocket對象就會觸發message事件：

    socket.onmessage = function(event){
        var data = event.data;
        //處理數據
        //event.data返回的數據也是字符串
    };


（3）其餘事件

* open：在成功創建鏈接時觸發。
* error：在發生錯誤時觸發，鏈接不能持續。
* close：在鏈接關閉時觸發。

WebSocket對象不支持DOM2級事件偵聽器，必須使用DOM0級語法分別定義每一個事件處理程序。

 1 var socket = new WebSocket("ws://www.example.com/server.php");
 2 socket.onopen = function(){
 3     alert("Connection established.");
 4 };
 5 socket.onerror = function(){
 6     alert("Connection error.");
 7 };
 8 socket.onclose = function(){
 9     alert("Connection closed.");
10 };

只有close事件的event對象有額外的信息。

三個額外屬性：    wasClean：布爾值，表示鏈接是否已經明確的關閉；    code：服務器返回的數值狀態碼；    reason：一個字符串，包含服務器發回的消息。能夠吧這些信息顯示給用戶，也能夠記錄到日誌中以便未來分析：socket.onclose = function(event){    console.log("Was clean?" + event.wasClean + " Code=" + event.code + " Reason=" + event.reason);};