JavaScript之WebSocket技術詳解_javascript技巧

概述

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屬性。

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

然後，開始與伺服器建立串連（這裡假定伺服器就是原生1740連接埠，需要使用ws協議）。

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;

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

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

connection.onclose = wsClose;

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

發送資料和接收資料

串連建立後，用戶端通過send方法向伺服器端發送資料。

connection.send(message);
除了發送字串，也可以使用 Blob 或 ArrayBuffer 對象發送位元據。

// 使用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;

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

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

如果接收的是位元據，需要將連線物件的格式設為blob或arraybuffer。

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

處理錯誤

如果出現錯誤，瀏覽器會觸發WebSocket執行個體對象的error事件。

connection.onerror = wsError;

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

伺服器端

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

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

假設監聽1740連接埠。

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

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

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

WebSocket伺服器建立request事件的回呼函數。

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

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

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

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

<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事件。

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

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

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架構）。

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）的回呼函數。

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

最後，用emit方法向伺服器端發送訊號，觸發伺服器端的anotherNews事件。

socket.emit('anotherNews');

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

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方法用於監聽對方發送的訊息。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。