本文将学到什么
- 如何使用 Node Version Manager(NVM)安装 NodeJS 0.10.16
- 如何安装 NodeJS 的 Express web 应用程序框架
- 如何设置一个简单的 Express 项目
- 如何在 Express 中设置 socket.io
- 实时向客户端发送简单消息
- 如何使用客户端 JavaScript 监听消息
步骤 1:设置 NodeJS
注意:如果您已经知道已安装了 NodeJS v0.10.16,则可以跳过此步骤
Node Version Manager(NVM)是一个帮助在 Linux 机器上安装各种 NodeJS 版本的工具。为了使用 NVM,请确保已安装 git
和 curl
。
使用 SSH 连接到您的 VPS(droplet)。
如果您尚未安装这些软件,请使用系统的软件包管理器进行安装。例如,在 Ubuntu 或 Debian 上,您可以运行:
``` sudo apt-get install curl git ```
现在,您需要运行 NVM 安装脚本:
curl https://raw.github.com/creationix/nvm/master/install.sh | sh
重要:您现在必须注销并使用 SSH 重新连接到您的服务器。
通过在终端中输入 nvm
来测试 nvm
命令是否有效。如果没有收到 command not found
错误,则已正确设置了 NVM。
要安装最新版本的 Node(本文撰写时为 0.10.16),只需输入:
nvm install 0.10.16
然后等待安装完成。如果安装成功,您应该会看到输出:Now using node v0.10.16
。
在终端中输入 node -v
来确保您正在使用指定的版本。您应该会得到输出:v0.10.16
。
步骤 2:设置 Express
Express 是 Node 的 Web 应用程序框架。它简洁灵活。要开始使用 Express,您需要使用 NPM 安装该模块。只需简单地输入:
npm install -g express
这将安装 Express 命令行工具,该工具将帮助创建一个基本的 Web 应用程序。安装 Express 后,请按照以下步骤创建一个空的 Express 项目:
mkdir socketio-test cd socketio-test express npm install
这些命令将在我们刚创建的目录中创建一个空的 Express 项目 socketio-test
。然后运行 npm install
来获取运行应用程序所需的所有依赖项。要测试空应用程序,请运行 node app
,然后在浏览器中导航至 http://yourDropletIp-or-domainName:3000。您应该会收到一个简单的欢迎消息,内容为:“Welcome to Express”。
如果您看到欢迎消息,则表示您已经准备好并运行了一个基本的 Express 应用程序!
在继续之前,请确保使用 Ctrl+C 键盘命令关闭您的 VPS。
步骤 3:将 Socket.io 安装到您的 Express 应用程序中
首先,简要介绍一下 Socket.io 是什么。Socket.io 是一个实时的 JavaScript 库。简而言之,它是一个 WebSocket API,根据浏览器的能力确定要建立的正确连接类型,无论是 AJAX 长轮询、Flash,甚至只是普通的 WebSocket。
那么,如何开始使用它呢?首先,您需要一个 Socket.io 服务器。我们已经准备好并等待的 Express 服务器,我们只需要添加上 socket 库。为此,我们需要将其添加到 package.json
文件中。
您的初始文件可能看起来像这样:
{ "name": "application-name", "version": "0.0.1", "private": true, "scripts": { "start": "node app.js" }, "dependencies": { "express": "3.3.5", "jade": "*" } }
现在在 “dependencies” 区域添加一个新字段:
"socket.io": "latest",
您的最终文件应该看起来像这样:
{ "name": "application-name", "version": "0.0.1", "private": true, "scripts": { "start": "node app.js" }, "dependencies": { "socket.io": "latest", "express": "3.3.5", "jade": "*" } }
现在再次运行 npm install
来安装 socket 库。
第 4 部分:服务器代码
现在我们已经设置好所有的依赖项,可以开始编写代码了!打开 Express 应用程序文件夹中的 app.js
文件。在其中,您会看到一堆自动生成的代码,删除所有这些代码,然后使用以下示例代码:
/** * Module dependencies. */ var express = require('express') , routes = require('./routes') , http = require('http'); var app = express(); var server = app.listen(3000); var io = require('socket.io').listen(server); // this tells socket.io to use our express server app.configure(function(){ app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.static(__dirname + '/public')); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); }); app.configure('development', function(){ app.use(express.errorHandler()); }); app.get('/', routes.index); console.log("Express server listening on port 3000");
这个示例文件只是重新组织了自动生成的代码,并添加了 var io = require('socket.io').listen(server);
这一行,告诉 socket.io 监听并使用我们的 Express 服务器。如果运行您的 node 应用程序,您应该会看到输出:info - socket.io started
。
现在我们如何将消息传输给用户呢?
在您的 app.js
文件中,在最后一行下面添加以下行:
io.sockets.on('connection', function (socket) { console.log('A new user connected!'); socket.emit('info', { msg: 'The world is round, there is no up or down.' }); });
这将在新用户连接到服务器时发送一个新的 socket 消息。现在我们只需要一种方法来在客户端与 VPS 进行交互。
第五部分:客户端代码
进入 Express 应用程序中的 public/javascripts
文件夹,添加一个名为 client.js
的新文件,并将以下代码放入其中:
// 连接到 socket 服务器 var socket = io.connect(); // 如果从 socket 服务器接收到 "info" 事件,则在控制台打印接收到的数据 socket.on('info', function (data) { console.log(data); });
这段代码很简单,但它演示了使用 Socket.io 可以做什么。现在我们只需要将脚本包含到我们的主页面中。
进入 Express 应用程序中的 views
文件夹,打开 layout.jade
文件。Express 不使用普通的 HTML 来渲染页面,它使用一个名为 Jade 的模板引擎。(有关 Jade 的更多信息可以在这里找到)Jade 相对于普通的 HTML 更简单、更清晰。要添加我们的客户端脚本并添加 Socket.io 客户端库,我们只需要在 link(rel='stylesheet', href='/stylesheets/style.css')
下方添加以下两行代码:
script(type='text/javascript', src="/socket.io/socket.io.js") script(type='text/javascript', src='javascripts/client.js')
确保它们在相同的缩进级别上,并且不要混合使用制表符和空格。这将导致 Jade 抛出错误。
切换回到 socketio-test 目录:
cd socketio-test
保存布局文件,并再次使用 node app
启动 Express 应用程序。
第六部分:测试
现在再次在浏览器中导航到 http://yourDropletIp-or-domainName:3000,并打开开发者工具控制台。您应该在日志中看到类似以下内容:
Object {msg: "The world is round, there is no up or down."}
这是一条实时从 VPS 直接发送到客户端的消息。