跳到主要内容

使用Socket.IO构建实时应用程序

Socket.IO可能是所有实时Web框架中最着名的。与Node.js相结合,它有助于显着提高对“即时网络”,实时数据和实时交互式用户体验的好处的认识。

在本教程中,我将了解新Socket.IO 1.0中的内容,并展示如何使用它来构建用于实时分析的应用程序。

为了简单起见,我们将使用Modernizr(modernizr.com)捕获页面URL和一些浏览器功能。该信息将使用Socket.IO连接发送到服务器。

服务器将对该数据进行一些基本分析,存储并将数据发布到仪表板。仪表板将接收信息并使用Epoch图表库(fastly.github.io/epoch)显示它。

入门

对于这个你需要的应用程序最少安装Node.js V0.10.25。你还需要下载'入门'拉链。解压缩该存档,您将看到一个node_modules目录,其中包含本教程所需的所有Node.js模块。

我们将所有客户端代码放在公共目录中 - 其中有一个bower_components目录,其中包含我们的应用程序将依赖的所有JavaScript库。还有一个仪表板目录,我们将在其中构建仪表板前端。

让我们设置Socket.IO并创建一个连接到正在运行的服务器的测试页面。首先在工作目录的根目录中创建一个index.js文件。由于我们想要提供仪表板,我们将首先使用创建Web服务器表达,最流行的Node.js Web服务器包之一。

var express = require('express'); var app = express(); app.use(express.static(__ dirname +'/ public')); var server = require('http')。Server(app); server.listen(3000,function(){console.log('listen on *:3000');});

在index.js中,我们使用Express'express.static函数来声明公用文件夹中的所有文件都可以直接提供。让我们在公共目录中创建一个capture.html。

从命令提示符运行工作目录中的节点index.js,然后在浏览器中导航到http:// localhost:3000 / capture.html。确保您看到正在提供的文件。现在我们可以将Socket.IO添加到index.js。

var server = require('http')。Server(app); var io = require('socket.io')(server); io.on('connection',function(socket){console.log('我们有连接!');});

通过require('http')获得对正在运行的服务器的引用。然后,服务器(app)和Socket.IO可以使用var io = require('socket.io')(服务器)连接到该服务器。我们还使用io.on('connection,function(){})绑定到连接事件,并在触发事件时登录到连接。此事件表示已检测到来自客户端的连接。

最后,我们需要添加一些JavaScript来捕获。 html连接到Socket.IO。

 

为了实现这一点,我们已经包含了Socket.IO客户端库,使用io('localhost:3000')创建了一个新的套接字连接并绑定到connect事件,因此我们知道何时建立了服务器连接。

重新加载capture.html并打开JavaScript控制台以检查连接的日志消息。查看用于执行节点index.js的提示,您将看到我们有连接!

捕获数据

有了基础知识,我们现在可以开始从客户端捕获数据。我们将使用capture.html作为开发和测试此功能的一种方式。

我们要捕获并最终显示的信息如下:已建立连接,用户正在查看哪个页面URL以及一些用户的浏览器功能,如Touch和HTML5 Video支持。

  


翻译字数超限