HTML5 WebSockets+NodeJs 實例教程

時間 2019-11-11

標籤 html5 html websockets+nodejs websockets nodejs 實例教程欄目 HTML5 简体版

原文原文鏈接

HTML 5 中WebSockets是極其重要的部分,它的一個好處之一是減小了沒必要要的網絡流量。它主要是用於在客戶機和服務器之間創建單一的雙向鏈接。這意味着客戶只須要發送一個請求到服務端，那麼服務端則會進行處理，處理好後則將其返回給客戶端，客戶端則能夠在等待這個時間繼續去作其餘工做，整個過程是異步的。
html

WebSockets應用的場景是很普遍的，當須要實時顯示數據的時候（好比股票，實時聊天，對戰遊戲等），用戶最指望的是不須要去刷新頁面，不然得到的用戶體驗是不佳的。而在最新的HTML 5標準中，出現了兩個解決該方面問題的規範，一個是服務端推送事件（Server Sent Events），另一個是WebSockets，其中服務端推送事件因爲在IE 中不能得到原生支持，所以不在本文討論範圍之中。本文着重講解HTML 5中WebSockets的相關知識。首先咱們仍是來複習下在HTTP 的網絡世界中的基本架構，這是下一步學習的基礎。前端

客戶－服務器模式是網絡世界中最經典的模式了，能容許多個用戶經過前端圖形界面的方式去，以下圖：html5

一般，客戶服務端模式分爲兩層和三層。在三層結構中，一般是出如今web應用中，中間一層使用了各種的中間件服務器，分別以下兩圖所示：node

咱們來看下HTML 5 WebSocket的架構圖，以下：web

在HTML 5 WebSockets標準中，僅僅定義了一些列的API,這些API用來在客戶端和服務端之間創建「socket」鏈接。下面咱們來學習使用node.js來進行WebSockets的學習。windows

首先，到node.js的官網下載node.js，咱們選用windows 版本就能夠了。瀏覽器

下載安裝包後並選擇socket.io，這隻須要在安裝好的nodejs目錄下，運行命令install就能夠了，如圖：服務器

而後，咱們在nodejs目錄下創建一個簡單的js文件，命名爲serverfile.js，而後編寫代碼以下：websocket

 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的目錄中輸入以下圖的命令，以啓動服務端：網絡

這樣，服務端就已經啓動了，下面來編寫客戶端，客戶端其實就是一個簡單的html頁面，代碼以下：

 <!DOCTYPE html> 
 <html> 
 <head>     
     <script src='http://localhost:22222/socket.io/socket.io.js'></script> 
 </head> 
 <body>     
 <script>         
 var HTML5WebSockets = {};          
 HTML5WebSockets.socketio = {
     
     yoursocket: null,                 
     initialize: function () {
                          
         HTML5WebSockets.socketio.yoursocket = io.connect('http://localhost:22222');                    HTML5WebSockets.socketio.yoursocket.on('connect', function () {                      
             HTML5WebSockets.socketio.log('You are connected to Server<br />');
         });
                              
         HTML5WebSockets.socketio.yoursocket.on('message', function (data) {                              HTML5WebSockets.socketio.log('Server Response:  ' + data + '<br />');                        });                                
         HTML5WebSockets.socketio.yoursocket.on('disconnect', function () {                                 HTML5WebSockets.socketio.log('You are disconnected from Server<br />');                    });
                              
         document.querySelector('#sendMes').onclick = function () {                      
            HTML5WebSockets.socketio.sendMessageToServer(document.querySelector('#mes').value);            document.querySelector('#mes').value = '';                  
         };                              
     },              
     
     sendMessageToServer: function (data) {                  
         HTML5WebSockets.socketio.yoursocket.send(data);                  
         HTML5WebSockets.socketio.log('Message to Server: ' + data + '<br />');              
     },                           
     log: function (message) {                  
         document.querySelector('#log').innerHTML += message;              
     }          
 }      
 </script>        
 <div id='log'></div>     
 <input type='text' id='mes' />     
 <button type='button' id='sendMes'>Send</button>     
 <br />        
 <script>         
     HTML5WebSockets.socketio.initialize();      
 </script> 
 </body> 
 </html>

如今假設服務端已經運行後，咱們能夠直接在瀏覽器中輸入網址運行，以下圖：

這個時候表示客戶端已經和服務端鏈接上了（這個時候調用的是

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

接下來咱們在文本框中輸入一些要發送到服務端的信息，並點Send按鈕，則能夠從日誌信息中看到信息發送到服務端的提示，以下兩圖所示：

同時咱們也觀察下服務端的控制檯的輸出，以下所示：

能夠看到服務端正確收到了來自客戶段的請求信息。

從上面的例子能夠看到，node.js因爲使用了Socket.io 模塊，大大減輕了使用WebSocket的難度，能夠說是爲WebSocket而生的。

接下來，咱們看下如何對客戶端進行廣播消息？所謂的廣播消息，就是將某個消息在同一時間發送給已鏈接服務端的全部客戶端，全部客戶端都能收到該消息。下面咱們動手改造下服務端的代碼以下：

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');      
    });  
});

能夠看到，惟一和以前服務端代碼不一樣的是使用了client.broadcast.emit方法，能夠從Socket.IO 服務器將廣播消息發送給客戶端。而且爲了驗證咱們是在同一時刻發送相同的消息給各個客戶端，咱們設置了當前的時間到current變量進行返回。咱們能夠將該文件另存爲serverfile2.js。而後一樣按上文的方法啓動服務端。

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

<!DOCTYPE html> 
<html> 
    <head>     
        <script src='http://localhost:22222/socket.io/socket.io.js'></script> 
    </head> 
<body>     
    <script>         
        var HTML5WebSockets = {};          
        HTML5WebSockets.socketio = {              
            yoursocket: null,                 
            initialize: function () {                     
                HTML5WebSockets.socketio.yoursocket = io.connect('http://localhost:22222');                    HTML5WebSockets.socketio.yoursocket.on('connect', function () {                                    HTML5WebSockets.socketio.log('You are connected to Server<br />');                         });                                    

                HTML5WebSockets.socketio.yoursocket.on('YourMessageResponse', function (data) {                    HTML5WebSockets.socketio.log('Server Custom Response: ' + data + '<br />');                });                     

                HTML5WebSockets.socketio.yoursocket.on('disconnect', function () {                                 HTML5WebSockets.socketio.log('You are disconnected from Server<br />');                    });                                    

                document.querySelector('#sendCustMes').onclick = function () {                                     HTML5WebSockets.socketio.emitCustomMessageToServer(document.querySelector('#custMes').value); 
                document.querySelector('#custMes').value = '';                  
                };              
            },                           

            emitCustomMessageToServer: function (data) {                  

                HTML5WebSockets.socketio.yoursocket.emit('YourcustomMessage', data);                  
                HTML5WebSockets.socketio.log('Custom message to Server: ' + data + '<br />');              
            },                 
            log: function (message) {                  
                document.querySelector('#log').innerHTML += message;              
            }          
        }      
</script>        
<div id='log'></div>     
<input type='text' id='custMes' />     
<button type='button' id='sendCustMes'>Brodcast</button>        
<script>         
    HTML5WebSockets.socketio.initialize();      
</script> 
</body> 
</html>

能夠看到客戶端的代碼並無多大變化。接下來咱們同時啓動多個瀏覽器打開這個客戶端的文件，以下圖：

這代表各個客戶端都已經鏈接上服務端了，而後在其中的一個客戶端頁面中輸入任意內容，點發送，則能夠看到服務端的nodejs控制檯收到了該消息，而且同時將當前時間附加到消息中，同時發送到各請求的客戶端，實現了廣播的功能，以下圖：

讀者能夠進一步對上面的nodejs例子進行改造，就能夠很容易實現如各種實時應用了。

轉自：http://developer.51cto.com/art/201308/407192.htm

英文原文：HTML5 WebSockets Introduction