JavaScript之WebSocket技術(shù)詳解
概述
HTTP協(xié)議是一種無狀態(tài)協(xié)議,服務(wù)器端本身不具有識別客戶端的能力,必須借助外部機(jī)制,比如session和cookie,才能與特定客戶端保持對話。這多多少少帶來一些不便,尤其在服務(wù)器端與客戶端需要持續(xù)交換數(shù)據(jù)的場合(比如網(wǎng)絡(luò)聊天),更是如此。為了解決這個問題,HTML5提出了瀏覽器的WebSocket API。
WebSocket的主要作用是,允許服務(wù)器端與客戶端進(jìn)行全雙工(full-duplex)的通信。舉例來說,HTTP協(xié)議有點像發(fā)電子郵件,發(fā)出后必須等待對方回信;WebSocket則是像打電話,服務(wù)器端和客戶端可以同時向?qū)Ψ桨l(fā)送數(shù)據(jù),它們之間存著一條持續(xù)打開的數(shù)據(jù)通道。
WebSocket協(xié)議完全可以取代Ajax方法,用來向服務(wù)器端發(fā)送文本和二進(jìn)制數(shù)據(jù),而且還沒有“同域限制”。
WebSocket不使用HTTP協(xié)議,而是使用自己的協(xié)議。瀏覽器發(fā)出的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協(xié)議規(guī)定,Upgrade頭信息表示將通信協(xié)議從HTTP/1.1轉(zhuǎn)向該項所指定的協(xié)議?!癈onnection: Upgrade”就表示瀏覽器通知服務(wù)器,如果可以,就升級到webSocket協(xié)議。Origin用于驗證瀏覽器域名是否在服務(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值。瀏覽器將對這個值進(jìn)行驗證,以證明確實是目標(biāo)服務(wù)器回應(yīng)了webSocket請求。Sec-WebSocket-Location表示進(jìn)行通信的WebSocket網(wǎng)址。
請注意,WebSocket協(xié)議用ws表示。此外,還有wss協(xié)議,表示加密的WebSocket協(xié)議,對應(yīng)HTTPs協(xié)議。
完成握手以后,WebSocket協(xié)議就在TCP協(xié)議之上,開始傳送數(shù)據(jù)。
WebSocket協(xié)議需要服務(wù)器支持,目前比較流行的實現(xiàn)是基于node.js的socket.io,更多的實現(xiàn)可參閱Wikipedia。至于瀏覽器端,目前主流瀏覽器都支持WebSocket協(xié)議(包括IE 10+),僅有的例外是手機(jī)端的Opera Mini和Android Browser。
客戶端
瀏覽器端對WebSocket協(xié)議的處理,無非就是三件事:
建立連接和斷開連接
發(fā)送數(shù)據(jù)和接收數(shù)據(jù)
處理錯誤
建立連接和斷開連接
首先,客戶端要檢查瀏覽器是否支持WebSocket,使用的方法是查看window對象是否具有WebSocket屬性。
if(window.WebSocket != undefined) { // WebSocket代碼 }
然后,開始與服務(wù)器建立連接(這里假定服務(wù)器就是本機(jī)的1740端口,需要使用ws協(xié)議)。
if(window.WebSocket != undefined) { var connection = new WebSocket('ws://localhost:1740'); }
建立連接以后的WebSocket實例對象(即上面代碼中的connection),有一個readyState屬性,表示目前的狀態(tài),可以取4個值:
0: 正在連接
1: 連接成功
2: 正在關(guān)閉
3: 連接關(guān)閉
握手協(xié)議成功以后,readyState就從0變?yōu)?,并觸發(fā)open事件,這時就可以向服務(wù)器發(fā)送信息了。我們可以指定open事件的回調(diào)函數(shù)。
connection.onopen = wsOpen;
function wsOpen (event) { console.log(‘Connected to: ‘ + event.currentTarget.URL); }
關(guān)閉WebSocket連接,會觸發(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 對象發(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ù),會觸發(fā)message事件??梢酝ㄟ^定義message事件的回調(diào)函數(shù),來處理服務(wù)端返回的數(shù)據(jù)。
connection.onmessage = wsMessage;
function wsMessage (event) { console.log(event.data); }
上面代碼的回調(diào)函數(shù)wsMessage的參數(shù)為事件對象event,該對象的data屬性包含了服務(wù)器返回的數(shù)據(jù)。
如果接收的是二進(jìn)制數(shù)據(jù),需要將連接對象的格式設(shè)為blob或arraybuffer。
connection.binaryType = 'arraybuffer'; connection.onmessage = function(e) { console.log(e.data.byteLength); // ArrayBuffer對象有byteLength屬性 };
處理錯誤
如果出現(xiàn)錯誤,瀏覽器會觸發(fā)WebSocket實例對象的error事件。
connection.onerror = wsError;
function wsError(event) { console.log(“Error: “ + event.data); }
服務(wù)器端
服務(wù)器端需要單獨(dú)部署處理WebSocket的代碼。下面用node.js搭建一個服務(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'); });
接著啟動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ù)接受一個參數(shù)req,表示request請求對象。然后,在回調(diào)函數(shù)內(nèi)部,建立WebSocket連接connection。接著,就要對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模塊,部署一個簡單的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簡介
Socket.io是目前最流行的WebSocket實現(xiàn),包括服務(wù)器和客戶端兩個部分。它不僅簡化了接口,使得操作更容易,而且對于那些不支持WebSocket的瀏覽器,會自動降為Ajax連接,最大限度地保證了兼容性。它的目標(biāo)是統(tǒng)一通信機(jī)制,使得所有瀏覽器和移動設(shè)備都可以進(jìn)行實時通信。
第一步,在服務(wù)器端的項目根目錄下,安裝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ī)與客戶端是同一臺機(jī)器,所以connect方法的參數(shù)是http://localhost。接著,指定news事件(即服務(wù)器端發(fā)送news)的回調(diào)函數(shù)。
socket.on('news', function (data){ console.log(data); });
最后,用emit方法向服務(wù)器端發(fā)送信號,觸發(fā)服務(wù)器端的anotherNews事件。
socket.emit('anotherNews');
請注意,emit方法可以取代Ajax請求,而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提供兩個核心方法:emit方法用于發(fā)送消息,on方法用于監(jiān)聽對方發(fā)送的消息。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 存在陷阱 刪除某一區(qū)域所有節(jié)點
實現(xiàn)功能:刪除某一區(qū)域中所有節(jié)點。2010-05-05JS加密插件CryptoJS實現(xiàn)的DES加密示例
這篇文章主要介紹了JS加密插件CryptoJS實現(xiàn)的DES加密,結(jié)合實例形式分析了javascript使用CryptoJS插件進(jìn)行des加密的各種常見模式使用技巧,需要的朋友可以參考下2018-08-08JavaScript DOM節(jié)點操作實例小結(jié)(新建,刪除HTML元素)
這篇文章主要介紹了JavaScript DOM節(jié)點操作,結(jié)合實例形式總結(jié)分析了JS操作DOM實現(xiàn)新建與刪除HTML元素的具體步驟與相關(guān)技巧,需要的朋友可以參考下2017-01-01JavaScript中SQL語句的應(yīng)用實現(xiàn)
最近一直在用javascript在做項目 可是做著做著 感覺很多功能代碼都是重復(fù)的。2010-05-05關(guān)于字符串和對象互轉(zhuǎn)以及JSON.parse()的坑
這篇文章主要介紹了關(guān)于字符串和對象互轉(zhuǎn)以及JSON.parse()的坑及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09getElementsByTagName vs selectNodes效率 及兼容的selectNodes實現(xiàn)
天在csdn上看到有人問 getElementsByTagName 和 selectNodes誰更快 ,這個還真沒研究過。2010-02-02