建站
咨詢
售后
建站咨詢
新聞中心
HTML 5 中WebSockets是極其重要的部分,它的一個好處之一是減少了不必要的網(wǎng)絡流量。它主要是用于在客戶機和服務器之間建立單一的雙向連接。這意味著客戶只需要發(fā)送一個請求到服務端，那么服務端則會進行處理，處理好后則將其返回給客戶端，客戶端則可以在等待這個時間繼續(xù)去做其他工作，整個過程是異步的。
創(chuàng)新互聯(lián)長期為千余家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為無極企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作，無極網(wǎng)站改版等技術服務。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
WebSockets應用的場景是很廣泛的，當需要實時顯示數(shù)據(jù)的時候（比如股票，實時聊天，對戰(zhàn)游戲等），用戶最期望的是不需要去刷新頁面，否則獲得的用戶體驗是不佳的。而在最新的HTML 5標準中，出現(xiàn)了兩個解決該方面問題的規(guī)范，一個是服務端推送事件（Server Sent Events），另外一個是WebSockets，其中服務端推送事件由于在IE 中不能獲得原生支持，因此不在本文討論范圍之中。本文著重講解HTML 5中WebSockets的相關知識。首先我們還是來復習下在HTTP 的網(wǎng)絡世界中的基本架構，這是下一步學習的基礎。
客戶－服務器模式是網(wǎng)絡世界中最經(jīng)典的模式了，能允許多個用戶通過前端圖形界面的方式去，如下圖：
通常，客戶服務端模式分為兩層和三層。在三層結構中，通常是出現(xiàn)在web應用中，中間一層使用了各類的中間件服務器，分別如下兩圖所示：
我們來看下HTML 5 WebSocket的架構圖，如下：
在HTML 5 WebSockets標準中，僅僅定義了一些列的API,這些API用來在客戶端和服務端之間建立“socket”連接。下面我們來學習使用node.js來進行WebSockets的學習。
首先，到node.js的官網(wǎng)下載node.js，我們選用windows 版本就可以了。
下載安裝包后并選擇socket.io，這只需要在 安裝好的nodejs目錄下，運行命令install就可以了，如圖：
#p#
然后，我們在nodejs目錄下建立一個簡單的js文件，命名為serverfile.js，然后編寫代碼如下：
- var http = require('http');
- var io = require('socket.io');
- var yourserver = http.createServer(function (request, response) {
- response.writeHead(250, { 'Content-Type': 'text/html' });
- response.end('Your WebSocket server is running');
- }).listen(22222);
- var yoursocket = io.listen(yourserver).set('log', 1);
- yoursocket.on('connection', function (client) {
- client.on('message', function (data) {
- console.log('Client Message: ', data);
- var current = new Date().getTime();
- client.emit('YourMessageResponse', data + '->' + current);
- client.on('disconnect', function () {
- console.log('Your Client disconnected');
- });
- });
- });
然后重新在nodejs的目錄中輸入如下圖的命令，以啟動服務端：
這樣，服務端就已經(jīng)啟動了，下面來編寫客戶端，客戶端其實就是一個簡單的html頁面，代碼如下：
現(xiàn)在假設服務端已經(jīng)運行后，我們可以直接在瀏覽器中輸入網(wǎng)址運行，如下圖：
這個時候表示客戶端已經(jīng)和服務端連接上了（這個時候調用的是
HTML5WebSockets.socketio.yoursocket.on的方法）。
接下來我們在文本框中輸入一些要發(fā)送到服務端的信息，并點Send按鈕，則可以從日志信息中看到信息發(fā)送到服務端的提示，如下兩圖所示：
同時我們也觀察下服務端的控制臺的輸出，如下所示：
可以看到服務端正確收到了來自客戶段的請求信息。
從上面的例子可以看到，node.js由于使用了Socket.io 模塊，大大減輕了使用WebSocket的難度，可以說是為WebSocket而生的。
接下來，我們看下如何對客戶端進行廣播消息？所謂的廣播消息，就是將某個消息在同一時間發(fā)送給已連接服務端的所有客戶端，所有客戶端都能收到該消息。下面我們動手改造下服務端的代碼如下：
- var http = require('http');
- var io = require('socket.io');
- var yourserver = http.createServer(function (request, response) {
- response.writeHead(250, { 'Content-Type': 'text/html' });
- response.end('Your WebSocket server is running');
- }).listen(22222);
- var yoursocket = io.listen(yourserver).set('log', 1);
- yoursocket.on('connection', function (client) {
- client.on('YourcustomMessage', function (data) {
- console.log('Client Custom Message: ', data);
- var current = new Date().getTime();
- client.broadcast.emit('YourMessageResponse', data + '(broadcasted)->' + current);
- });
- client.on('disconnect', function () {
- console.log('Your Client disconnected');
- });
- });
#p#
可以看到，唯一和之前服務端代碼不同的是使用了client.broadcast.emit方法，可以從Socket.IO 服務器將廣播消息發(fā)送給客戶端。并且為了驗證我們是在同一時刻發(fā)送相同的消息給各個客戶端，我們設置了當前的時間到current變量進行返回。我們可以將該文件另存為serverfile2.js。然后同樣按上文的方法啟動服務端。
接下來編寫客戶端代碼如下：
可以看到客戶端的代碼并沒有多大變化。接下來我們同時啟動多個瀏覽器打開這個客戶端的文件，如下圖：
這表明各個客戶端都已經(jīng)連接上服務端了，然后在其中的一個客戶端頁面中輸入任意內容，點發(fā)送，則可以看到服務端的nodejs控制臺收到了該消息，并且同時將當前時間附加到消息中，同時發(fā)送到各請求的客戶端，實現(xiàn)了廣播的功能，如下圖：
讀者可以進一步對上面的nodejs例子進行改造，就可以很容易實現(xiàn)如各類實時應用了。
英文原文：HTML5 WebSockets Introduction
本文名稱：HTML5WebSocketsnode.js實例教程
標題路徑：http://www.dlmjj.cn/article/djdhsih.html
