文档章节

HTML5 WebSockets+NodeJs 实例教程

JayPark不作死
 JayPark不作死
发布于 2014/02/20 20:11
字数 1588
阅读 4960
收藏 17

HTML 5 中WebSockets是极其重要的部分,它的一个好处之一是减少了不必要的网络流量。它主要是用于在客户机和服务器之间建立单一的双向连接。这意味着客户只需要发送一个请求到服务端,那么服务端则会进行处理,处理好后则将其返回给客户端,客户端则可以在等待这个时间继续去做其他工作,整个过程是异步的。

WebSockets应用的场景是很广泛的,当需要实时显示数据的时候(比如股票,实时聊天,对战游戏等),用户最期望的是不需要去刷新页面,否则获得的用户体验是不佳的。而在最新的HTML 5标准中,出现了两个解决该方面问题的规范,一个是服务端推送事件(Server Sent Events),另外一个是WebSockets,其中服务端推送事件由于在IE 中不能获得原生支持,因此不在本文讨论范围之中。本文着重讲解HTML 5中WebSockets的相关知识。首先我们还是来复习下在HTTP 的网络世界中的基本架构,这是下一步学习的基础。

客户-服务器模式是网络世界中最经典的模式了,能允许多个用户通过前端图形界面的方式去,如下图:

 

通常,客户服务端模式分为两层和三层。在三层结构中,通常是出现在web应用中,中间一层使用了各类的中间件服务器,分别如下两图所示:

 

 

我们来看下HTML 5 WebSocket的架构图,如下:

 

  

在HTML 5 WebSockets标准中,仅仅定义了一些列的API,这些API用来在客户端和服务端之间建立“socket”连接。下面我们来学习使用node.js来进行WebSockets的学习。

首先,到node.js的官网下载node.js,我们选用windows 版本就可以了。

 

下载安装包后并选择socket.io,这只需要在 安装好的nodejs目录下,运行命令install就可以了,如图:

 

 

然后,我们在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的目录中输入如下图的命令,以启动服务端:

这样,服务端就已经启动了,下面来编写客户端,客户端其实就是一个简单的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









本文转载自:http://developer.51cto.com/art/201308/407192.htm

共有 人打赏支持
JayPark不作死
粉丝 15
博文 51
码字总数 13622
作品 0
苏州
程序员
私信 提问
HTML5实例教程:拼图游戏-何韬-专题视频课程

HTML5实例教程:拼图游戏—16983人已学习 课程介绍 用HTML5,CNAVES开发一个拼图游戏,通过此游戏,熟练掌握拼图游戏开发的各种技巧。 课程收益 通过实例,快速掌握拼图游戏的做法。 讲师介绍...

pkutao
2015/06/02
0
0
HTML5实例教程——简易涂鸦板-何韬-专题视频课程

HTML5实例教程——简易涂鸦板—6858人已学习 课程介绍 用CANVES制作一个涂鸦板,让初学者初步了解HTML5的语言与功能。 课程收益 快速学会涂鸦板的做法,同时对HTML5有一个初步了解。 讲师介绍...

pkutao
2015/06/02
0
0
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
分享最好的HTML5编码教程和参考手册

原文:queness.com 编译:GBin1.com 今天我们介绍相关HTML5的参考手册,演讲稿,电子书和教程。 HTML5是新兴的web技术,虽然不是完全的新技术但是已经有很多的相关文章介绍HTML5,特别是当我...

gbin1
2011/10/21
1K
3
HTML5开发手机App之:HTML5系统教程-何韬-专题视频课程

HTML5开发手机App之:HTML5系统教程—23518人已学习 课程介绍 通过案例进行详尽的讲解,浓缩HTML5开发APP之前端基础语法,掌握HTML5的开发方法,为进一步的深入学习打下基础。 课程收益 使零...

pkutao
2016/02/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

泛型就这么简单

前言 从今天开始进入Java基础的复习,可能一个星期会有一篇的<十道简单算法>,我写博文的未必都是正确的~如果有写错的地方请大家多多包涵并指正~ 今天要复习的是泛型,泛型在Java中也是个很...

群星纪元
20分钟前
0
0
大数据提醒你:中国这些古建筑,可能是下一个巴黎圣母院!

大家晚上好,我是今天的提笔人嗅嗅。 巴黎圣母院失火事件让我的心情很沉重,一句无关痛痒的安慰“巴黎不哭”,已经不能表达我对这场文化之殇的惋惜之痛,人类伟大的建筑在一瞬间被毁灭。 世界...

forespider
32分钟前
0
0
mysql函数substring_index的用法

substring_index 按索引字符位进行截取字符串 substring_index(“待截取的字符串”,“截取数据依据的字符”,截取字符的位置N) 第三个参数可正,可负。正数表示索引字符前面的字符串,负数...

echojson
32分钟前
0
0
好程序员web前端分享用CSS和JS打造一个简单的图片编辑器

好程序员web前端分享用CSS和JS打造一个简单的图片编辑器,本文主要是利用CSS的 filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节。 CSS filt...

好程序员IT
41分钟前
2
0
浅析spring mvc的细节

spring mvc 整体结构 系统监听到请求 -> 通知tomcat -> 根据web.xml 通知相应的拦截器(spring mvc 通常指DispatcherServlet) --> 检查url是否有相匹配的请求实现 --> 拿到请求实现bean的适配...

最爱肉肉
43分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部