DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript之WebSocket技術詳解
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方法用於監聽對方發送的消息。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved