JavaScript之WebSocket技術詳解

概述

HTTP協議是一種無狀態協議，服務器端本身不具有識別客戶端的能力，必須借助外部機制，比如session和cookie，才能與特定客戶端保持對話。這多多少少帶來一些不便，尤其在服務器端與客戶端需要持續交換數據的場合（比如網絡聊天），更是如此。為了解決這個問題，HTML5提出了瀏覽器的WebSocket API。

WebSocket的主要作用是，允許服務器端與客戶端進行全雙工（full-duplex）的通信。舉例來說，HTTP協議有點像發電子郵件，發出后必須等待對方回信；WebSocket則是像打電話，服務器端和客戶端可以同時向對方發送數據，它們之間存着一條持續打開的數據通道。

WebSocket協議完全可以取代Ajax方法，用來向服務器端發送文本和二進制數據，而且還沒有“同域限制”。

WebSocket不使用HTTP協議，而是使用自己的協議。瀏覽器發出的WebSocket請求類似於下面的樣子：

GET / HTTP/1.1
Connection: Upgrade
Upgrade: websocket
Host: example.com
Origin: null
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13
上面的頭信息顯示，有一個HTTP頭是Upgrade。HTTP1.1協議規定，Upgrade頭信息表示將通信協議從HTTP/1.1轉向該項所指定的協議。“Connection: Upgrade”就表示瀏覽器通知服務器，如果可以，就升級到webSocket協議。Origin用於驗證瀏覽器域名是否在服務器許可的范圍內。Sec-WebSocket-Key則是用於握手協議的密鑰，是base64編碼的16字節隨機字符串。

服務器端的WebSocket回應則是

HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Origin: null
Sec-WebSocket-Location: ws://example.com/

服務器端同樣用“Connection: Upgrade”通知瀏覽器，需要改變協議。Sec-WebSocket-Accept是服務器在瀏覽器提供的Sec-WebSocket-Key字符串后面，添加“258EAFA5-E914-47DA-95CA-C5AB0DC85B11” 字符串，然后再取sha-1的hash值。瀏覽器將對這個值進行驗證，以證明確實是目標服務器回應了webSocket請求。Sec-WebSocket-Location表示進行通信的WebSocket網址。

請注意，WebSocket協議用ws表示。此外，還有wss協議，表示加密的WebSocket協議，對應HTTPs協議。
完成握手以后，WebSocket協議就在TCP協議之上，開始傳送數據。

WebSocket協議需要服務器支持，目前比較流行的實現是基於node.js的socket.io，更多的實現可參閱Wikipedia。至於瀏覽器端，目前主流瀏覽器都支持WebSocket協議（包括IE 10+），僅有的例外是手機端的Opera Mini和Android Browser。

客戶端

瀏覽器端對WebSocket協議的處理，無非就是三件事：

建立連接和斷開連接
發送數據和接收數據
處理錯誤

建立連接和斷開連接

首先，客戶端要檢查瀏覽器是否支持WebSocket，使用的方法是查看window對象是否具有WebSocket屬性。

?

1 2 3 4 5

if (window.WebSocket != undefined) {     // WebSocket代碼   }

然后，開始與服務器建立連接（這里假定服務器就是本機的1740端口，需要使用ws協議）。

?

1 2 3 4 5

if (window.WebSocket != undefined) {     var connection = new WebSocket( 'ws://localhost:1740' );   }

建立連接以后的WebSocket實例對象（即上面代碼中的connection），有一個readyState屬性，表示目前的狀態，可以取4個值：

0： 正在連接
1： 連接成功
2： 正在關閉
3： 連接關閉
握手協議成功以后，readyState就從0變為1，並觸發open事件，這時就可以向服務器發送信息了。我們可以指定open事件的回調函數。

connection.onopen = wsOpen;

?

1 2 3

function wsOpen (event) { console.log(‘Connected to: ‘ + event.currentTarget.URL); }

關閉WebSocket連接，會觸發close事件。

connection.onclose = wsClose;

?

1 2 3 4 5

function wsClose () { console.log(“Closed”); }   connection.close();

發送數據和接收數據

連接建立后，客戶端通過send方法向服務器端發送數據。

connection.send(message);
除了發送字符串，也可以使用 Blob 或 ArrayBuffer 對象發送二進制數據。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 使用ArrayBuffer發送canvas圖像數據   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];   }   connection.send(binary.buffer); // 使用Blob發送文件 var file = document.querySelector(‘input[type=”file”]').files[0]; connection.send(file);

客戶端收到服務器發送的數據，會觸發message事件。可以通過定義message事件的回調函數，來處理服務端返回的數據。

connection.onmessage = wsMessage;

?

1 2 3

function wsMessage (event) { console.log(event.data); }

上面代碼的回調函數wsMessage的參數為事件對象event，該對象的data屬性包含了服務器返回的數據。

如果接收的是二進制數據，需要將連接對象的格式設為blob或arraybuffer。

?

1 2 3 4 5

connection.binaryType = 'arraybuffer' ;   connection.onmessage = function (e) {   console.log(e.data.byteLength); // ArrayBuffer對象有byteLength屬性 };

處理錯誤

如果出現錯誤，瀏覽器會觸發WebSocket實例對象的error事件。

connection.onerror = wsError;

?

1 2 3

function wsError(event) { console.log(“Error: “ + event.data); }

服務器端

服務器端需要單獨部署處理WebSocket的代碼。下面用node.js搭建一個服務器環境。

?

1 2 3

var http = require( 'http' );   var server = http.createServer( function (request, response) {});

假設監聽1740端口。

?

1 2 3 4 5

server.listen(1740, function () {     console.log(( new Date()) + ' Server is listening on port 1740' );   });

接着啟動WebSocket服務器。這需要加載websocket庫，如果沒有安裝，可以先使用npm命令安裝。

?

1 2 3 4 5 6 7

var WebSocketServer = require( 'websocket' ).server;   var wsServer = new WebSocketServer({     httpServer: server   });

WebSocket服務器建立request事件的回調函數。

var connection;
wsServer.on(‘request', function(req){

?

1 2	connection = req.accept(‘echo-protocol', req.origin); });

上面代碼的回調函數接受一個參數req，表示request請求對象。然后，在回調函數內部，建立WebSocket連接connection。接着，就要對connection的message事件指定回調函數。

?

1 2 3

wsServer.on(‘request ', function(r){     connection = req.accept(‘echo-protocol' , req.origin);

?

1 2 3 4 5

< span class = "nx" >connection</ span >< span class = "p" >.</ span >< span class = "nx" >on</ span >< span class = "p" >(</ span >< span class = "s1" >'message'</ span >< span class = "p" >,</ span > < span class = "kd" >function</ span >< span class = "p" >(</ span >< span class = "nx" >message</ span >< span class = "p" >)</ span > < span class = "p" >{</ span >   < span class = "kd" >var</ span > < span class = "nx" >msgString</ span > < span class = "o" >=</ span > < span class = "nx" >message</ span >< span class = "p" >.</ span >< span class = "nx" >utf8Data</ span >< span class = "p" >;</ span >   < span class = "nx" >connection</ span >< span class = "p" >.</ span >< span class = "nx" >sendUTF</ span >< span class = "p" >(</ span >< span class = "nx" >msgString</ span >< span class = "p" >);</ span > < span class = "p" >});</ span > });

最后，監聽用戶的disconnect事件。

?

1 2 3 4 5

connection.on( 'close' , function (reasonCode, description) {     console.log(connection.remoteAddress + ' disconnected.' );   });

使用ws模塊，部署一個簡單的WebSocket服務器非常容易。

?

1 2 3 4 5 6 7 8 9 10

var WebSocketServer = require( 'ws' ).Server; var wss = new WebSocketServer({ port: 8080 });   wss.on( 'connection' , function connection(ws) {   ws.on( 'message' , function incoming(message) {   console.log( 'received: %s' , message);   });     ws.send( 'something' ); });

Socket.io簡介

Socket.io是目前最流行的WebSocket實現，包括服務器和客戶端兩個部分。它不僅簡化了接口，使得操作更容易，而且對於那些不支持WebSocket的瀏覽器，會自動降為Ajax連接，最大限度地保證了兼容性。它的目標是統一通信機制，使得所有瀏覽器和移動設備都可以進行實時通信。

第一步，在服務器端的項目根目錄下，安裝socket.io模塊。

$ npm install socket.io

第二步，在根目錄下建立app.js，並寫入以下代碼（假定使用了Express框架）。

?

1 2 3 4 5 6 7 8 9

var app = require( 'express' )(); var server = require( 'http' ).createServer(app); var io = require( 'socket.io' ).listen(server);   server.listen(80);   app.get( '/' , function (req, res) {   res.sendfile(__dirname + '/index.html' ); });

上面代碼表示，先建立並運行HTTP服務器。Socket.io的運行建立在HTTP服務器之上。

第三步，將Socket.io插入客戶端網頁。

<script src="/socket.io/socket.io.js"></script>

然后，在客戶端腳本中，建立WebSocket連接。

var socket = io.connect('http://localhost:80');

由於本例假定WebSocket主機與客戶端是同一台機器，所以connect方法的參數是http://localhost。接着，指定news事件（即服務器端發送news）的回調函數。

?

1 2 3

socket.on( 'news' , function (data){   console.log(data); });

最后，用emit方法向服務器端發送信號，觸發服務器端的anotherNews事件。

socket.emit('anotherNews');

請注意，emit方法可以取代Ajax請求，而on方法指定的回調函數，也等同於Ajax的回調函數。
第四步，在服務器端的app.js，加入以下代碼。

?

1 2 3 4 5 6

io.sockets.on( 'connection' , function (socket) {   socket.emit( 'news' , { hello: 'world' });   socket.on( 'anotherNews' , function (data) {   console.log(data);   }); });

上面代碼的io.sockets.on方法指定connection事件（WebSocket連接建立）的回調函數。在回調函數中，用emit方法向客戶端發送數據，觸發客戶端的news事件。然后，再用on方法指定服務器端anotherNews事件的回調函數。

不管是服務器還是客戶端，socket.io提供兩個核心方法：emit方法用於發送消息，on方法用於監聽對方發送的消息。