偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

HTML5 WebSockets node.js實(shí)例教程

譯文
作者：廖煜嶸 編譯
開發(fā) 前端
HTML 5 中WebSockets是極其重要的部分,它的一個(gè)好處之一是減少了不必要的網(wǎng)絡(luò)流量。

HTML 5 中WebSockets是極其重要的部分,它的一個(gè)好處之一是減少了不必要的網(wǎng)絡(luò)流量。它主要是用于在客戶機(jī)和服務(wù)器之間建立單一的雙向連接。這意味著客戶只需要發(fā)送一個(gè)請(qǐng)求到服務(wù)端，那么服務(wù)端則會(huì)進(jìn)行處理，處理好后則將其返回給客戶端，客戶端則可以在等待這個(gè)時(shí)間繼續(xù)去做其他工作，整個(gè)過程是異步的。

WebSockets應(yīng)用的場景是很廣泛的，當(dāng)需要實(shí)時(shí)顯示數(shù)據(jù)的時(shí)候（比如股票，實(shí)時(shí)聊天，對(duì)戰(zhàn)游戲等），用戶最期望的是不需要去刷新頁面，否則獲得的用戶體驗(yàn)是不佳的。而在最新的HTML 5標(biāo)準(zhǔn)中，出現(xiàn)了兩個(gè)解決該方面問題的規(guī)范，一個(gè)是服務(wù)端推送事件（Server Sent Events），另外一個(gè)是WebSockets，其中服務(wù)端推送事件由于在IE 中不能獲得原生支持，因此不在本文討論范圍之中。本文著重講解HTML 5中WebSockets的相關(guān)知識(shí)。首先我們還是來復(fù)習(xí)下在HTTP 的網(wǎng)絡(luò)世界中的基本架構(gòu)，這是下一步學(xué)習(xí)的基礎(chǔ)。

客戶－服務(wù)器模式是網(wǎng)絡(luò)世界中最經(jīng)典的模式了，能允許多個(gè)用戶通過前端圖形界面的方式去，如下圖：

 

通常，客戶服務(wù)端模式分為兩層和三層。在三層結(jié)構(gòu)中，通常是出現(xiàn)在web應(yīng)用中，中間一層使用了各類的中間件服務(wù)器，分別如下兩圖所示：

 

 

我們來看下HTML 5 WebSocket的架構(gòu)圖，如下：

 

  

在HTML 5 WebSockets標(biāo)準(zhǔn)中，僅僅定義了一些列的API,這些API用來在客戶端和服務(wù)端之間建立“socket”連接。下面我們來學(xué)習(xí)使用node.js來進(jìn)行WebSockets的學(xué)習(xí)。

首先，到node.js的官網(wǎng)下載node.js，我們選用windows 版本就可以了。

 

下載安裝包后并選擇socket.io，這只需要在 安裝好的nodejs目錄下，運(yùn)行命令install就可以了，如圖：

 

 

#p#

然后，我們?cè)趎odejs目錄下建立一個(gè)簡單的js文件，命名為serverfile.js，然后編寫代碼如下：

  1.  var http = require('http');  
  2. var io = require('socket.io');  
  3.    
  4. var yourserver = http.createServer(function (request, response) {  
  5.     response.writeHead(250, { 'Content-Type': 'text/html' });  
  6.     response.end('Your WebSocket server is running');  
  7. }).listen(22222);  
  8.    
  9. var yoursocket = io.listen(yourserver).set('log', 1);  
  10.    
  11. yoursocket.on('connection', function (client) {  
  12.     client.on('message', function (data) {  
  13.         console.log('Client Message: ', data);  
  14.     
  15.         var current = new Date().getTime();  
  16.    
  17.         client.emit('YourMessageResponse', data + '->' + current);  
  18.  
  19. client.on('disconnect', function () {  
  20.  console.log('Your Client disconnected');  
  21. });  
  22.     });  
  23. }); 

然后重新在nodejs的目錄中輸入如下圖的命令，以啟動(dòng)服務(wù)端：

這樣，服務(wù)端就已經(jīng)啟動(dòng)了，下面來編寫客戶端，客戶端其實(shí)就是一個(gè)簡單的html頁面，代碼如下：

  1.  <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <script src='http://localhost:22222/socket.io/socket.io.js'></script> 
  5. </head> 
  6. <body> 
  7.     <script> 
  8.         var HTML5WebSockets = {};  
  9.         HTML5WebSockets.socketio = {  
  10.             yoursocket: null,  
  11.    
  12.             initialize: function () {  
  13.    
  14.                 HTML5WebSockets.socketio.yoursocket = io.connect('http://localhost:22222');  
  15.    
  16.                 HTML5WebSockets.socketio.yoursocket.on('connect', function () {  
  17.                     HTML5WebSockets.socketio.log('You are connected to Server<br />');  
  18.                 });  
  19.    
  20.                 HTML5WebSockets.socketio.yoursocket.on('message', function (data) {  
  21.                     HTML5WebSockets.socketio.log('Server Response:  ' + data + '<br />');  
  22.                 });  
  23.               
  24.                 HTML5WebSockets.socketio.yoursocket.on('disconnect', function () {  
  25.                     HTML5WebSockets.socketio.log('You are disconnected from Server<br />');  
  26.                 });  
  27.    
  28.                 document.querySelector('#sendMes').onclick = function () {  
  29.                     HTML5WebSockets.socketio.sendMessageToServer(document.querySelector('#mes').value);  
  30.                     document.querySelector('#mes').value = '';  
  31.                 };  
  32.                 
  33.             },  
  34.             sendMessageToServer: function (data) {  
  35.                 HTML5WebSockets.socketio.yoursocket.send(data);  
  36.                 HTML5WebSockets.socketio.log('Message to Server: ' + data + '<br />');  
  37.             },            
  38.    
  39.             log: function (message) {  
  40.                 document.querySelector('#log').innerHTML += message;  
  41.             }  
  42.         }  
  43.     </script> 
  44.    
  45.     <div id='log'></div> 
  46.     <input type='text' id='mes' /> 
  47.     <button type='button' id='sendMes'>Send</button> 
  48.     <br />    
  49.     <script> 
  50.         HTML5WebSockets.socketio.initialize();  
  51.     </script> 
  52. </body> 
  53. </html> 

現(xiàn)在假設(shè)服務(wù)端已經(jīng)運(yùn)行后，我們可以直接在瀏覽器中輸入網(wǎng)址運(yùn)行，如下圖：

 

 

這個(gè)時(shí)候表示客戶端已經(jīng)和服務(wù)端連接上了（這個(gè)時(shí)候調(diào)用的是

HTML5WebSockets.socketio.yoursocket.on的方法）。

接下來我們?cè)谖谋究蛑休斎胍恍┮l(fā)送到服務(wù)端的信息，并點(diǎn)Send按鈕，則可以從日志信息中看到信息發(fā)送到服務(wù)端的提示，如下兩圖所示： 

 

 

同時(shí)我們也觀察下服務(wù)端的控制臺(tái)的輸出，如下所示：

 

可以看到服務(wù)端正確收到了來自客戶段的請(qǐng)求信息。

從上面的例子可以看到，node.js由于使用了Socket.io 模塊，大大減輕了使用WebSocket的難度，可以說是為WebSocket而生的。

接下來，我們看下如何對(duì)客戶端進(jìn)行廣播消息？所謂的廣播消息，就是將某個(gè)消息在同一時(shí)間發(fā)送給已連接服務(wù)端的所有客戶端，所有客戶端都能收到該消息。下面我們動(dòng)手改造下服務(wù)端的代碼如下：

  1. var http = require('http');  
  2. var io = require('socket.io');  
  3.    
  4. var yourserver = http.createServer(function (request, response) {  
  5.     response.writeHead(250, { 'Content-Type': 'text/html' });  
  6.     response.end('Your WebSocket server is running');  
  7. }).listen(22222);  
  8.    
  9. var yoursocket = io.listen(yourserver).set('log', 1);  
  10.    
  11. yoursocket.on('connection', function (client) {  
  12.     client.on('YourcustomMessage', function (data) {  
  13.         console.log('Client Custom Message: ', data);  
  14.    
  15.         var current = new Date().getTime();  
  16.    
  17.         client.broadcast.emit('YourMessageResponse', data + '(broadcasted)->' + current);  
  18.     });  
  19.     client.on('disconnect', function () {  
  20.         console.log('Your Client disconnected');  
  21.     });  
  22. }); 

#p#

可以看到，唯一和之前服務(wù)端代碼不同的是使用了client.broadcast.emit方法，可以從Socket.IO 服務(wù)器將廣播消息發(fā)送給客戶端。并且為了驗(yàn)證我們是在同一時(shí)刻發(fā)送相同的消息給各個(gè)客戶端，我們?cè)O(shè)置了當(dāng)前的時(shí)間到current變量進(jìn)行返回。我們可以將該文件另存為serverfile2.js。然后同樣按上文的方法啟動(dòng)服務(wù)端。

接下來編寫客戶端代碼如下：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <script src='http://localhost:22222/socket.io/socket.io.js'></script> 
  5. </head> 
  6. <body> 
  7.     <script> 
  8.         var HTML5WebSockets = {};  
  9.         HTML5WebSockets.socketio = {  
  10.             yoursocket: null,  
  11.    
  12.             initialize: function () {  
  13.    
  14.                 HTML5WebSockets.socketio.yoursocket = io.connect('http://localhost:22222');  
  15.    
  16.                 HTML5WebSockets.socketio.yoursocket.on('connect', function () {  
  17.                     HTML5WebSockets.socketio.log('You are connected to Server<br />');  
  18.                 });                 
  19.    
  20.                 HTML5WebSockets.socketio.yoursocket.on('YourMessageResponse', function (data) {  
  21.                     HTML5WebSockets.socketio.log('Server Custom Response: ' + data + '<br />');  
  22.                 });  
  23.    
  24.                 HTML5WebSockets.socketio.yoursocket.on('disconnect', function () {  
  25.                     HTML5WebSockets.socketio.log('You are disconnected from Server<br />');  
  26.                 });                 
  27.    
  28.                 document.querySelector('#sendCustMes').onclick = function () {  
  29.                     HTML5WebSockets.socketio.emitCustomMessageToServer(document.querySelector('#custMes').value);  
  30.                     document.querySelector('#custMes').value = '';  
  31.                 };  
  32.             },            
  33.    
  34.             emitCustomMessageToServer: function (data) {  
  35.                 HTML5WebSockets.socketio.yoursocket.emit('YourcustomMessage', data);  
  36.                 HTML5WebSockets.socketio.log('Custom message to Server: ' + data + '<br />');  
  37.             },  
  38.    
  39.             log: function (message) {  
  40.                 document.querySelector('#log').innerHTML += message;  
  41.             }  
  42.         }  
  43.     </script> 
  44.    
  45.     <div id='log'></div> 
  46.     <input type='text' id='custMes' /> 
  47.     <button type='button' id='sendCustMes'>Brodcast</button> 
  48.    
  49.     <script> 
  50.         HTML5WebSockets.socketio.initialize();  
  51.     </script> 
  52. </body> 
  53. </html> 

可以看到客戶端的代碼并沒有多大變化。接下來我們同時(shí)啟動(dòng)多個(gè)瀏覽器打開這個(gè)客戶端的文件，如下圖：

 

這表明各個(gè)客戶端都已經(jīng)連接上服務(wù)端了，然后在其中的一個(gè)客戶端頁面中輸入任意內(nèi)容，點(diǎn)發(fā)送，則可以看到服務(wù)端的nodejs控制臺(tái)收到了該消息，并且同時(shí)將當(dāng)前時(shí)間附加到消息中，同時(shí)發(fā)送到各請(qǐng)求的客戶端，實(shí)現(xiàn)了廣播的功能，如下圖：

 

 

讀者可以進(jìn)一步對(duì)上面的nodejs例子進(jìn)行改造，就可以很容易實(shí)現(xiàn)如各類實(shí)時(shí)應(yīng)用了。

英文原文：HTML5 WebSockets Introduction

責(zé)任編輯：陳四芳 來源： 51CTO
HTML5node.js
相關(guān)推薦

2021-03-16 16:16:41

GeneratorWebsockets前端

2011-12-16 10:08:36

Node.js

2020-05-29 15:33:28

Node.js框架JavaScript

2009-09-18 11:44:05

Scala實(shí)例教程Kestrel

2013-11-01 09:34:56

Node.js技術(shù)

2015-03-10 10:59:18

Node.js開發(fā)指南基礎(chǔ)介紹

2014-02-19 16:28:53

Node.jsWeb工具

2014-08-26 11:46:46

QtAndroid實(shí)例教程

2020-03-17 13:24:04

微服務(wù)架構(gòu)數(shù)據(jù)

2011-09-08 13:46:14

node.js

2011-11-01 10:30:36

Node.js

2011-09-02 14:47:48

Node

2011-09-09 14:23:13

Node.js

2011-11-10 08:55:00

Node.js

2012-10-24 14:56:30

IBMdw

2015-07-15 10:32:44

Node.js命令行程序

2021-12-25 22:29:57

Node.js 微任務(wù)處理事件循環(huán)

2010-08-17 11:02:45

DIV CSS實(shí)例教程

2019-06-17 15:25:17

expandunexpandLinux

2015-06-23 15:27:53

HproseNode.js
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)