WebSocket 實時保持數據連接 的使用及詳解

WebSocket 協議在2008年誕生，2011年成爲國際標準。所有瀏覽器都已經支持了。

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

特點包括：
（1）建立在 TCP 協議之上，服務器端的實現比較容易。

（2）與 HTTP 協議有着良好的兼容性。默認端口也是80和443，並且握手階段採用 HTTP 協議，因 此握手時不容易屏蔽，能通過各種 HTTP 代理服務器。

（3）數據格式比較輕量，性能開銷小，通信高效。

（4）可以發送文本，也可以發送二進制數據。

（5）沒有同源限制，客戶端可以與任意服務器通信。

（6）協議標識符是ws（如果加密，則爲wss），服務器網址就是 URL。

一、客戶端的簡單示例

function webSocket() {
    var websocket = null;
    //判斷當前瀏覽器是否支持WebSocket
    if (typeof(WebSocket) == "undefined") {
        alert('當前瀏覽器 Not support websocket');
    }
    else {
  //建立連接，這裏的/websocket ，是Servlet中註解中的那個值
        console.log("support websocket");
        var id =ground.userID;
        websocket = new WebSocket("請求地址"+ id);
    }
    //連接發生錯誤的回調方法
    websocket.onerror = function () {
        console.log("WebSocket連接發生錯誤");
    };
    //連接成功建立的回調方法
    websocket.onopen = function () {
        console.log("WebSocket連接成功");
    }
    //接收到消息的回調方法
    websocket.onmessage = function (event) {
       var data = event.data;
       // 處理數據
    }
    //連接關閉的回調方法
    websocket.onclose = function () {
        console.log("WebSocket連接關閉");
    }
    //監聽窗口關閉事件，當窗口關閉時，主動去關閉WebSocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。
    window.onbeforeunload = function () {
        websocket.close();
    }

二 . 使用方法詳解

webSocket.onopen

實例對象的onopen屬性，用於指定連接成功後的回調函數。

websocket.onopen = function () {
  websocket.send('Hello Server!');
}

如果要指定多個回調函數，可以使用addEventListener方法。

websocket.addEventListener('open', function (event) {
  websocket.send('Hello Server!');
});

webSocket.onclose

實例對象的onclose屬性，用於指定連接關閉後的回調函數。

websocket.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
};

websocket.addEventListener("close", function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
});

webSocket.onmessage

實例對象的onmessage屬性，用於指定收到服務器數據後的回調函數。

websocket.onmessage = function(event) {
  var data = event.data;
  // 處理數據
};

websocket.addEventListener("message", function(event) {
  var data = event.data;
  // 處理數據
});

webSocket.send()

實例對象的send()方法用於向服務器發送數據。

發送文本的例子。

websocket.send('your message');

發送 Blob 對象的例子。

var file = document
  .querySelector('input[type="file"]')
  .files[0];
websocket.send(file);

webSocket.bufferedAmount

實例對象的bufferedAmount屬性，表示還有多少字節的二進制數據沒有發送出去。它可以用來判斷髮送是否結束。

var data = new ArrayBuffer(10000000);
socket.send(data);

if (socket.bufferedAmount === 0) {
  // 發送完畢
} else {
  // 發送還沒結束
}

webSocket.onerror

實例對象的onerror屬性，用於指定報錯時的回調函數。

socket.onerror = function(event) {
  // handle error event
};

socket.addEventListener("error", function(event) {
  // handle error event
});

三、參考鏈接

How to Use WebSockets

WebSockets - Send & Receive Messages