WebSocket 教程

on1024 8年前發布 | 68K 次閱讀 WebSocket WebSocket 開發

WebSocket 是一種網絡通信協議，很多高級功能都需要它。

本文介紹 WebSocket 協議的使用方法。

一、為什么需要 WebSocket？

初次接觸 WebSocket 的人，都會問同樣的問題：我們已經有了 HTTP 協議，為什么還需要另一個協議？它能帶來什么好處？

答案很簡單，因為 HTTP 協議有一個缺陷：通信只能由客戶端發起。

舉例來說，我們想了解今天的天氣，只能是客戶端向服務器發出請求，服務器返回查詢結果。HTTP 協議做不到服務器主動向客戶端推送信息。

這種單向請求的特點，注定了如果服務器有連續的狀態變化，客戶端要獲知就非常麻煩。我們只能使用 "輪詢" ：每隔一段時候，就發出一個詢問，了解服務器有沒有新的信息。最典型的場景就是聊天室。

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

二、簡介

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

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

其他特點包括：

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

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

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

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

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

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

ws://example.com:80/some/path

三、客戶端的簡單示例

WebSocket 的用法相當簡單。

下面是一個網頁腳本的例子（點擊這里看運行結果），基本上一眼就能明白。

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};

四、客戶端的 API

WebSocket 客戶端的 API 如下。

4.1 WebSocket 構造函數

WebSocket 對象作為一個構造函數，用于新建 WebSocket 實例。

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

執行上面語句之后，客戶端就會與服務器進行連接。

實例對象的所有屬性和方法清單，參見這里。

4.2 webSocket.readyState

readyState 屬性返回實例對象的當前狀態，共有四種。

CONNECTING：值為0，表示正在連接。
OPEN：值為1，表示連接成功，可以通信了。
CLOSING：值為2，表示連接正在關閉。
CLOSED：值為3，表示連接已經關閉，或者打開連接失敗。

下面是一個示例。

switch (ws.readyState) {
  case WebSocket.CONNECTING:
    // do something
    break;
  case WebSocket.OPEN:
    // do something
    break;
  case WebSocket.CLOSING:
    // do something
    break;
  case WebSocket.CLOSED:
    // do something
    break;
  default:
    // this never happens
    break;
}

4.3 webSocket.onopen

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

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

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

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

4.4 webSocket.onclose

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

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

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

4.5 webSocket.onmessage

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

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

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

注意，服務器數據可能是文本，也可能是二進制數據（ blob 對象或 Arraybuffer 對象）。

ws.onmessage = function(event){
  if(typeOf event.data === String) {
    console.log("Received data string");
  }

  if(event.data instanceof ArrayBuffer){
    var buffer = event.data;
    console.log("Received arraybuffer");
  }
}

除了動態判斷收到的數據類型，也可以使用 binaryType 屬性，顯式指定收到的二進制數據類型。

// 收到的是 blob 數據
ws.binaryType = "blob";
ws.onmessage = function(e) {
  console.log(e.data.size);
};

// 收到的是 ArrayBuffer 數據
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
  console.log(e.data.byteLength);
};

4.6 webSocket.send()

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

發送文本的例子。

ws.send('your message');

發送 Blob 對象的例子。

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

發送 ArrayBuffer 對象的例子。

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
  binary[i] = img.data[i];
}
ws.send(binary.buffer);

4.7 webSocket.bufferedAmount

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

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

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

4.8 webSocket.onerror

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

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

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

五、服務端的實現

WebSocket 服務器的實現，可以查看維基百科的列表。

常用的 Node 實現有以下三種。

具體的用法請查看它們的文檔，這里不詳細介紹了。

六、WebSocketd

下面，我要推薦一款非常特別的 WebSocket 服務器： Websocketd 。

它的最大特點，就是后臺腳本不限語言，標準輸入（stdin）就是 WebSocket 的輸入，標準輸出（stdout）就是 WebSocket 的輸出。

舉例來說，下面是一個 Bash 腳本 counter.sh 。

#!/bin/bash

echo 1
sleep 1

echo 2
sleep 1

echo 3

命令行下運行這個腳本，會輸出1、2、3，每個值之間間隔1秒。

$ bash ./counter.sh
1
2
3

現在，啟動 websocketd ，指定這個腳本作為服務。

$ websocketd --port=8080 bash ./counter.sh

上面的命令會啟動一個 WebSocket 服務器，端口是 8080 。每當客戶端連接這個服務器，就會執行 counter.sh 腳本，并將它的輸出推送給客戶端。

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

ws.onmessage = function(event) {
  console.log(event.data);
};

上面是客戶端的 JavaScript 代碼，運行之后會在控制臺依次輸出1、2、3。

有了它，就可以很方便地將命令行的輸出，發給瀏覽器。

$ websocketd --port=8080 ls

上面的命令會執行 ls 命令，從而將當前目錄的內容，發給瀏覽器。使用這種方式實時監控服務器，簡直是輕而易舉（代碼）。

更多的用法可以參考官方示例。

Bash 腳本讀取客戶端輸入的例子
五行代碼實現一個最簡單的聊天服務器

websocketd 的實質，就是命令行的 WebSocket 代理。只要命令行可以執行的程序，都可以通過它與瀏覽器進行 WebSocket 通信。下面是一個 Node 實現的回聲服務 greeter.js 。

process.stdin.setEncoding('utf8');

process.stdin.on('readable', function() {
  var chunk = process.stdin.read();
  if (chunk !== null) {
    process.stdout.write('data: ' + chunk);
  }
});

啟動這個腳本的命令如下。

$ websocketd --port=8080 node ./greeter.js

官方倉庫還有其他各種語言的例子。

七、參考鏈接

（完）

來自：http://www.ruanyifeng.com/blog/2017/05/websocket.html

本文由用戶 on1024 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1494828644502.html

WebSocket WebSocket 開發