JavaScript之WebSocket技術詳解
- 高洛峰原創
- 2016-12-06 14:56:40998瀏覽
概述
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-MWA30000nF775 Sec-WebSocket-Version: 13
上面的頭目資訊顯示，有一個HTTP頭是Upgrade。 HTTP1.1協定規定，Upgrade頭資訊表示將通訊協定從HTTP/1.1轉向該項所指定的協定。 「Connection: Upgrade」就表示瀏覽器通知伺服器，如果可以，就升級到webSocket協定。 Origin用於驗證瀏覽器網域是否在伺服器授權的範圍內。 Sec-WebSocket-Key則是用來握手協定的金鑰，是base64編碼的16位元組隨機字串。
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: fFBooB7FAmLloBRRkk-TR30503050503050000545FFF45：TFF例如TFoneT 只是TRWkalk 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協定就在TCP協定之上，開始傳送資料。
WebSocket協定需要伺服器支持，目前比較流行的實作是基於node.js的socket.io，更多的實作可參考Wikipedia。至於瀏覽器端，目前主流瀏覽器都支援WebSocket協定（包括IE 10+），僅有的例外是手機端的Opera Mini和Android Browser。
發送資料和接收資料
處理錯誤
建立連接和斷開連接，客戶端要檢查瀏覽器是否支援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
成功
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方法傳送資料到伺服器端。
除了發送字串，也可以使用 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事件。
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插入客户端网页。
b87e043dd6e28f8c8a3dcd50a2ffa1652cacc6d41bbb37262a98f745aa00fbf0
然后，在客户端脚本中，建立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方法用于监听对方发送的消息。