概述

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

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

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

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

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

服務(wù)器端的WebSocket回應(yīng)則是

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

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

請(qǐng)注意，WebSocket協(xié)議用ws表示。此外，還有wss協(xié)議，表示加密的WebSocket協(xié)議，對(duì)應(yīng)HTTPs協(xié)議。
完成握手以后，WebSocket協(xié)議就在TCP協(xié)議之上，開始傳送數(shù)據(jù)。

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

客戶端

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

建立連接和斷開連接
發(fā)送數(shù)據(jù)和接收數(shù)據(jù)
處理錯(cuò)誤

建立連接和斷開連接

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

if(window.WebSocket != undefined) {

 // WebSocket代碼

}

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

if(window.WebSocket != undefined) {

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

}

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

0： 正在連接
1： 連接成功
2： 正在關(guān)閉
3： 連接關(guān)閉
握手協(xié)議成功以后，readyState就從0變?yōu)?，并觸發(fā)open事件，這時(shí)就可以向服務(wù)器發(fā)送信息了。我們可以指定open事件的回調(diào)函數(shù)。

connection.onopen = wsOpen;

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

關(guān)閉WebSocket連接，會(huì)觸發(fā)close事件。

connection.onclose = wsClose;

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

connection.close();

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

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

connection.send(message);
除了發(fā)送字符串，也可以使用 Blob 或 ArrayBuffer 對(duì)象發(fā)送二進(jìn)制數(shù)據(jù)。

// 使用ArrayBuffer發(fā)送canvas圖像數(shù)據(jù)

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發(fā)送文件 
var file = document.querySelector(‘input[type=”file”]').files[0]; 
connection.send(file);

客戶端收到服務(wù)器發(fā)送的數(shù)據(jù)，會(huì)觸發(fā)message事件。可以通過定義message事件的回調(diào)函數(shù)，來處理服務(wù)端返回的數(shù)據(jù)。

connection.onmessage = wsMessage;

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

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

如果接收的是二進(jìn)制數(shù)據(jù)，需要將連接對(duì)象的格式設(shè)為blob或arraybuffer。

connection.binaryType = 'arraybuffer';

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

處理錯(cuò)誤

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

connection.onerror = wsError;

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

服務(wù)器端

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

var http = require('http');

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

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

server.listen(1740, function() {

 console.log((new Date()) + ' Server is listening on port 1740');

});

接著啟動(dòng)WebSocket服務(wù)器。這需要加載websocket庫，如果沒有安裝，可以先使用npm命令安裝。

var WebSocketServer = require('websocket').server;

var wsServer = new WebSocketServer({

 httpServer: server

});

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

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

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

上面代碼的回調(diào)函數(shù)接受一個(gè)參數(shù)req，表示request請(qǐng)求對(duì)象。然后，在回調(diào)函數(shù)內(nèi)部，建立WebSocket連接connection。接著，就要對(duì)connection的message事件指定回調(diào)函數(shù)。

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>
});

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

connection.on('close', function(reasonCode, description) {

 console.log(connection.remoteAddress + ' disconnected.');

});

使用ws模塊，部署一個(gè)簡(jiǎn)單的WebSocket服務(wù)器非常容易。

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簡(jiǎn)介

Socket.io是目前最流行的WebSocket實(shí)現(xiàn)，包括服務(wù)器和客戶端兩個(gè)部分。它不僅簡(jiǎn)化了接口，使得操作更容易，而且對(duì)于那些不支持WebSocket的瀏覽器，會(huì)自動(dòng)降為Ajax連接，最大限度地保證了兼容性。它的目標(biāo)是統(tǒng)一通信機(jī)制，使得所有瀏覽器和移動(dòng)設(shè)備都可以進(jìn)行實(shí)時(shí)通信。

第一步，在服務(wù)器端的項(xiàng)目根目錄下，安裝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');
});

上面代碼表示，先建立并運(yùn)行HTTP服務(wù)器。Socket.io的運(yùn)行建立在HTTP服務(wù)器之上。

第三步，將Socket.io插入客戶端網(wǎng)頁。

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

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

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

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

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

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

socket.emit('anotherNews');

請(qǐng)注意，emit方法可以取代Ajax請(qǐng)求，而on方法指定的回調(diào)函數(shù)，也等同于Ajax的回調(diào)函數(shù)。
第四步，在服務(wù)器端的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連接建立）的回調(diào)函數(shù)。在回調(diào)函數(shù)中，用emit方法向客戶端發(fā)送數(shù)據(jù)，觸發(fā)客戶端的news事件。然后，再用on方法指定服務(wù)器端anotherNews事件的回調(diào)函數(shù)。

不管是服務(wù)器還是客戶端，socket.io提供兩個(gè)核心方法：emit方法用于發(fā)送消息，on方法用于監(jiān)聽對(duì)方發(fā)送的消息。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論