一步一步學WebSocket (一) 初識WebSocket

時間 2019-11-19

標籤一步 websocket 简体版

原文原文鏈接

　　衆所周知，Http協議是無狀態的，而且是基於Request/Response的方式與服務器進行交互，也就是咱們常說的單工模式。可是隨着互聯網的發展，瀏覽器與服務端進行雙向通訊需求的增長，長輪詢向服務器以獲取最新數據並實現推送效果的方式已經愈來愈不能知足咱們。Html5標準的制定，也爲咱們提供了瀏覽器與服務端的雙工通訊協議WebSocket。javascript

　　WebSocket協議的格式爲 "ws://IP:Port" 或者「wss://IP:Port"。其中wss表示進行加密傳輸的websocket協議。html

　　WebSocket協議與傳統的Socket協議同樣，都須要進行「握手」。可是WebSocket的「握手」階段是經過Http協議進行的，「握手」行爲經過Request/Response的Header完成，只須要交換不多的數據，即可以建立基於TCP/IP協議的雙工通道。下面咱們來看一下Fiddler截取到的WebSocket握手請求java

　　經過Fiddler咱們能夠看到，在握手請求時，客戶端向服務端發送了一個Get請求，而且在請求的頭中增長了這麼幾個Keyweb

　　Origin:http://IP:Port 表示客戶端的地址瀏覽器

　　Connection:Upgrade / Upgrade:WebSocket 表示本次請求是要進行WebSocket的握手動做服務器

　　Sec-WebSocket-Version: 13 表示瀏覽器支持的WebSocket版本信息websocket

　　Sec-WebSocket-Key: 這是一個由客戶端隨機生成的字符串框架

　　在服務器響應的握手信息中Sec-WebSocket-Accept:的值爲服務器經過客戶端Header的Sec-WebSocket-Key的值進行計算並加密的結果。socket

　　而且服務器的響應狀態爲101 表示服務器端已經理解了客戶端的需求，而且客戶端須要根據Upgrade中的協議類型，切換爲新的協議來完成後續的通訊。ide

　　這時候咱們的TCP/IP雙工通道就已經創建了，WebSocket協議就這麼簡單。

　　說完理論知識了，咱們來看如何在瀏覽器中使用WebSocket協議。

　　最新的FireFox、Chrome、IE10及以上版本都已經支持了WebSocket協議。可是在使用它時，咱們須要先檢測瀏覽器是否支持WebSocket協議

　　WebSocket對象位於 window對象下。咱們能夠經過如下代碼檢測瀏覽器對WebSocket的支持

if("WebSocket" in window)

if(window.WebSocket)

if("MozWebSocket" in window)

if(window.MozWebSocket)

View Code

　　若是咱們的瀏覽器支持WebSocket 那麼咱們就能夠建立WebSocket的實例了。

var ws=new WebSocket("ws://localhost:2012");

var ws=new MozWebSocket("ws://localhost:2012);

View Code

　　這裏須要注意一下，當咱們建立WebSocket的實例時，這個WebSocket實例就已經開始向服務器發起握手請求了，不須要咱們手動打開鏈接。

　　WebSocket對象也很簡單，咱們會經常使用到它的4個回調方法 onopen onclose onerror onmessage。他們觸發的實際分別爲握手完成並建立TCP/IP通道後，斷開鏈接後，發生錯誤時，接收到服務端消息時。

　　另外咱們還經常用到一個屬性 readyState 用以檢查鏈接狀態，和一個函數 send() 向服務端發送數據。

　　下面咱們來完成一個完整的瀏覽器使用WebSocket的例子，這裏須要服務端也支持WebSocket協議

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebSocket示例</title>
    <script type="text/javascript">
        var ws;//WebSocket對象
        var wsUrl = "ws://localhost:2012";//支持WebSocket協議的服務器端地址

        function connection() {
            //判斷該使用哪一種WebSocket對象 
            if ("WebSocket" in window) {
                ws = new WebSocket(wsUrl);
            }
            else if ("MozWebSocket" in window) {
                ws = new MozWebSocket(wsUrl);
            } else {
                alert("當前瀏覽器不支持WebSocket");

            }

            //註冊各種回調
            ws.onopen = function () {
                alert("鏈接服務器成功");
            }

            ws.onclose = function () {
                alert("與服務器斷開鏈接");
            }
            ws.onerror = function () {
                alert("數據傳輸發生錯誤");
            }
            ws.onmessage = function (receiveMsg) {
                alert(receiveMsg.data);
            }
        }
        function sendMessage() {
            //嘗試向服務端發送消息

            ws.send("Hello World");

        }

    </script>
</head>
<body>
    <input type="button" value="Connection" onclick="connection()" />
    <input type="button" value="Send" onclick="sendMessage()" />
</body>
</html>