HTML5WebSocketsnode.js实例教程

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

创新互联长期为千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为无极企业提供专业的成都做网站、网站制作，无极网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

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就可以了，如图：

#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的目录中输入如下图的命令，以启动服务端：

这样，服务端就已经启动了，下面来编写客户端，客户端其实就是一个简单的html页面，代码如下：