1、概述

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

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

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

WebSocket不使用HTTP協(xié)議，而是使用自己的協(xié)議。瀏覽器發(fā)出的WebSocket請求類似于下面的樣子：

GET / HTTP/1.1Connection: Upgrade  Upgrade: websocket  Host: example.com  Origin: nullSec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==  Sec-WebSocket-Version: 13

上面的頭信息顯示，有一個HTTP頭是Upgrade。HTTP1.1協(xié)議規(guī)定，Upgrade頭信息表示將通信協(xié)議從HTTP1.1轉向該項所指定的協(xié)議。“Connection: Upgrade”就表示瀏覽器通知服務器，如果可以，就升級到webSocket協(xié)議。Origin用于驗證瀏覽器域名是否在服務器許可范圍內。Sec-WebSocket-Key則是用于握手協(xié)議的密鑰，是base64編碼的16字節(jié)隨機字符串。

服務端的WebSocket回應則是：

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

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

注意：WebSocket協(xié)議用ws表示。此外，還有wss協(xié)議，表示加密的WebSocket協(xié)議，對應HTTPs協(xié)議。

完成握手以后，WebSocket協(xié)議就在TCP協(xié)議之上，開始傳送數(shù)據(jù)。

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

2、客戶端

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

• 建立連接和斷開連接

• 發(fā)送數(shù)據(jù)和接收數(shù)據(jù)

• 處理錯誤

2.1 建立連接和斷開連接

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

if (window.WebSocket != undefined) {    // 支持}

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

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

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

• 0：正在連接

• 1：連接成功

• 2：正在關閉

• 3：連接關閉

握手協(xié)議成功以后，readyState就從0變成1，并觸發(fā)open事件，這時就可以向服務器發(fā)送信息了。我們可以指定open事件的回調函數(shù)。

connection.onopen = wsOpen;function wsOpen(event) {      console.log('Connected');  }

關閉WebSocket會觸發(fā)close事件。

connection.onclose = wsClose;function onClose(event) {    var wasClean = event.wasClean; //bool值，連接是否關閉了      var code = event.code; //連接狀態(tài)（數(shù)字），由服務端提供      var reason = event.reason; //關閉原因，由服務端提供      console.log('Closed');  }    connection.close();

2.2 發(fā)送數(shù)據(jù)和接收數(shù)據(jù)

連接建立后，客戶端通過send方法向服務器端發(fā)送數(shù)據(jù)。

connection.send(message);

除了發(fā)送字符串，也可以使用Blob或ArrayBuffer對象發(fā)送二進制數(shù)據(jù)。

//使用ArrayBuffer發(fā)送Canvas圖像數(shù)據(jù)  var img = canvas_context.getImageData(0, 0, 400, 320);  var binary = new Unit8Array(img.data.length);for(var i = 0; i < img.data.length; i++) {      binary[i] = img.data[i]  }  connection.send(binary.buffer);//使用Blob發(fā)送文件  var file = document.querySelector('input[type="file"]').files[0];  connection.send(file);

客戶端收到服務器發(fā)送的數(shù)據(jù)，會觸發(fā)message事件?？梢酝ㄟ^定義message事件的回調函數(shù)，來處理服務端返回的數(shù)據(jù)。

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

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

2.3 處理錯誤

如果出現(xiàn)錯誤，瀏覽器會觸發(fā)WebSocket實例對象的error事件。

connection.onerror = wsError;function wsError(event) {      console.log('Error: ' + event.data);  }

3、服務器端

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

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

假設監(jiān)聽1740端口。

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

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

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

WebSocket服務器建立request事件的回調函數(shù)。

var connection;    wsServer.on('request', function(req){      connect = req.accept('echo-protocol', req.origin);  });

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

wsServer.on('request', function(r) {      connection = req.accept('echo-protocol', req.origin);        connection.on('message', function(message) {              var msgString = message.utf8Data;          connection.sendUTF(msgString);      });  });

最后，監(jiān)聽用戶的disconnect事件。

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

4、Socket.io簡介

Socket.io是目前最流行的WebSocket實現(xiàn)，包括服務器和瀏覽器兩個部分。它不僅簡化了接口，使得操作更容易，而且對于那些不支持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插入客戶端網(wǎng)頁。

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

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

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

由于本例假定WebSocket主機與客戶端是同一臺機器，所以connect方法的參數(shù)是http://localhost。接著，指定news事件（即服務器端發(fā)送news）的回調函數(shù)。

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

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

請注意：emit方法可以取代Ajax請求，而on方法指定的回調函數(shù)，也等同于Ajax的回調函數(shù)。

第四步，在服務器端的app.js中加入以下代碼。

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

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