实践：构建一个 Node.js 驱动的聊天室 Web 应用 | 第二部分

Rami Sayar

5.00/5 (3投票s)

2015年5月13日

CPOL

9分钟阅读

9704

实践：构建一个 Node.js 驱动的聊天室 Web 应用 | 第二部分

本Node.js 教程系列将帮助您构建一个完全部署在云端的、由 Node.js 驱动的实时聊天室 Web 应用。在本系列教程中，您将学习如何在 Windows 机器上设置 Node.js ，如何使用 Express 开发 Web 前端，如何将基于 Node Express 的应用部署到 Microsoft Azure，如何使用 Socket.IO 添加实时层，以及如何将所有这些整合在一起进行部署。

级别：初学者到中级——您需要了解 HTML5 和 JavaScript

第一部分 - Node.js 简介

第二部分 - 欢迎使用 Node.js 和 Azure 的 Express

第三部分 - 使用 Node、Mongo 和 Socket.IO 构建后端

第四部分 – 使用 Bootstrap 构建聊天室 UI

第五部分 - 使用 WebSockets 连接聊天室

第六部分 – 最终章和调试远程 Node 应用

第二部分：欢迎使用 Node.js 和 Azure 的 Express

欢迎来到实践 Node.js 教程系列：构建一个 Node.js 驱动的聊天室 Web 应用的第二部分。

在本期中，我将向您展示如何启动一个新的 Express-based 的 Node 项目并将其部署到 Azure。

什么是 Express？

Express 是一个简洁、开源且灵活的 Node.js Web 应用框架，旨在使开发网站、Web 应用和 API 更加容易。

为什么使用 Express？

Express 帮助您通过路由支持来响应 HTTP 请求，以便您可以为特定 URL 编写响应。Express 支持多种模板引擎，以简化 HTTP 响应的生成。

您需要确保 Node.js 已正确安装并准备就绪。请参阅本教程系列的第二部分：Node.js 简介。

开始吧

启动一个新的 Node.js 项目相当简单。

启动 Visual Studio。在“文件”菜单上，单击“新建”，然后单击“项目”。
您需要从左侧导航到“已安装”>“模板”>“JavaScript”菜单项，然后在右侧选择“基本 Windows Azure Express Application”。为您的项目选择一个位置和名称，然后单击“确定”。
一条消息会通知您，package.json 中定义的依赖项需要使用 NPM（包管理器）进行安装。您可以在此处查看 NPM 的说明。
将生成一个项目，其中包含一个名为 app.js 的文件。我们将从那里开始。

app.js 说明

1  //
2  /**
3  * Module dependencies.
4  */
5 
6  var express = require('express');
7  var routes = require('./routes');
8  var user = require('./routes/user');
9  var http = require('http');
10 var path = require('path');
11
12 var app = express();
13  
14 // all environments
15 app.set('port', process.env.PORT || 3000);
16 app.set('views', path.join(__dirname, 'views'));
17 app.set('view engine', 'jade');
18 app.use(express.favicon());
19 app.use(express.logger('dev'));
20 app.use(express.json());
21 app.use(express.urlencoded());
22 app.use(express.methodOverride());
23 app.use(app.router);
24 app.use(require('stylus').middleware(path.join(__dirname, 'public')));
25 app.use(express.static(path.join(__dirname, 'public')));
26 
27 // development only
28 if ('development' == app.get('env')) {
29   app.use(express.errorHandler());
30 }
31 
32 app.get('/', routes.index);
33 app.get('/users', user.list);
34 
35 http.createServer(app).listen(app.get('port'), function(){
36   console.log('Express server listening on port ' + app.get('port'));
37 });

第 6 至 10 行

第 6 至 10 行加载了包括 express、http 和 path 在内的各种模块。有趣的是，我们还加载了一个名为 routes 的模块（稍后会解释）以及 routes 文件夹中的一个名为 user 的模块。

第 12 行

在这一行，我们调用了 express() 函数，该函数将创建我们的应用程序。当我们决定创建 HTTP 服务器时，将使用此应用程序，并且它将是包含我们 Web 应用所有属性以及接收到的 URL 和处理其响应的函数之间的映射的对象。

第 15 至 17 行

在这些行中，我们设置了各种配置参数，例如服务器将在哪个端口上运行（第 15 行）以及将在哪个目录中找到模板 HTML 文件（第 16 行）。在第 17 行，我们指定了要使用的模板引擎，在此例中是 Jade。Jade 是一个流行的模板引擎，它使编写 HTML 变得非常容易，而且没有额外的尖括号 (<>) 语法要求。您可以将模板引擎更改为仅按原样返回 HTML 并且不执行任何其他操作，只需将第 17 行替换为以下代码：

app.set('view engine', 'html');

第 18 至 23 行

在这些行中，我们设置了各种配置参数。您可以通过查看API 文档来找到每个参数的含义。本教程不需要解释这些配置参数。

第 24 行和 25 行

这些行很有趣，因为它们是我们指定用于处理 Stylus CSS 样式表和 HTML 的中间件的地方。中间件是在接收请求和返回响应之间的函数调用中自动插入的一层。在此例中，我们要求 Express 对所有 URL 指定项目文件夹内路径的请求运行 stylus 中间件和静态中间件。我们使用它们来原样提供 CSS 和 JavaScript，而不为该 URL 执行请求函数。

第 27 至 30 行

在这些行中，我们指定 Express 在环境设置为开发而不是生产时处理错误。您不必担心这些行。

第 32、33 行

在这些行中，我们最终将 HTTP 请求中的 URL 路径映射到处理响应的特定函数。我们稍后将回到这一点。

第 35 至 38 行

在这些行中，我们创建了一个 HTTP 服务器并指定了端口，以及一个成功回调，用于通知服务器已启动。

路由

路由以及如何正确地进行路由是一个有争议的话题，没有正确的答案。有很多模块实现了 Express 和 Node.js 的路由，每个模块都有不同的风格和结构。我们将坚持使用 Express 自带的路由引擎。在 app.js 中，我们已经指定了路由引擎，并从 routes 目录导入了路由模块。我们在第 32-33 行添加了路由。换句话说，我们将浏览器中的 URL 映射到将响应该请求的服务器上的函数。这些处理请求的函数位于 routes 目录中。让我们看看 index.js。

1 /*
2 * GET home page.
3 */
4 
5 exports.index = function(req, res){
6 res.render('index', { title: 'Express' });
7 };

它只有三行，但这三行做了大量工作。第 1 行将一个名为 index 的函数添加到 exports 变量。exports 变量是 Node.js 每次加载模块时创建的，以便您将函数和变量传递给其他模块，在本例中是 app.js 模块。

index 函数接受两个参数：req 和 res。如果您还记得第一部分，req 参数持有接收到的请求，res 参数持有一个您可以写入响应的变量。在本例中，我们正在执行 response 变量中的 render 函数，该函数接受两个参数。第一个参数指定要使用的视图（视图是 views 目录中的一个文件），并且不需要文件的扩展名，因此 index 会变成 index.jade。第二个参数是一个对象，包含可以插入到 jade 模板中的数据。

Index 模板

index.jade 模板是一种完全不同的语言，本教程不作解释。本教程系列都需要 HTML 知识，在这种情况下，您会注意到 jade 模板语言几乎总是直接映射到 HTML。

extends layout

block content
  h1= title
  p Welcome to #{title}

除了“block”和“extends”关键字之外，其他关键字的含义与 HTML 中的完全相同。此模板将由我们加载到以下 HTML 中的 jade 中间件转换。

1  <!DOCTYPE html>
2  <html>
3  <head>
4     <title>Express</title>
5     <link rel="stylesheet" href="/stylesheets/style.css">
6  </head>
7  <body>
8    <h1>Express</h1>
9    <p>Welcome to Express</p>
10 </body>
11 </html>

您会注意到生成的 H1 标签包含我们之前在 render 函数中传递的 title 值。您还会注意到它直接插入到 p 标签中，与文本处于同一行。您无疑还会注意到完全生成的 HTML 包含 Jade 中未映射的内容。这就是“extends”关键字的作用。在本例中，我们选择扩展 layout.jade 文件。

1 doctype html
2 html
3  head
4    title= title
5    link(rel='stylesheet', href='/stylesheets/style.css')
6  body
7    block content

您会注意到“block content”在两个文件中都再次出现，jade 使用它来指定这块 HTML 在此处（在 layout.jade 文件中），这就是它的样子（在 index.jade 文件中）。

在 layout.jade 文件中，您会注意到一个指向 style.css 文件的链接，该文件在我们初始项目中似乎不存在。此文件是从 style.styl 代码生成的，使用我们从 app.js 中设置的 Stylus 中间件。

您看！我们如何从 app.js 到定义响应的路由，再到最终定义响应外观的视图。如果您选择在本地运行 Web 应用，只需单击调试按钮（您可以通过单击右侧的下拉按钮选择不同的浏览器）。

按下此按钮将启动一个 Node.js 服务器并在 Internet Explorer 中打开根 URL。

发布到 Azure（适用于使用 Visual Studio 的用户）

现在我们已经有了一个基于 Express 的 Node.js 应用在运行，让我们在几秒钟内将其部署到云端。您可以将应用程序部署到任何支持 Node.js 的云，例如 Nodejitsu、Heroku 和 Engine Yard。我将使用 Microsoft Azure，因为我可以在那里免费运行一个 Node.js 网站。

您可以在此处注册 Microsoft Azure 的免费试用。您将获得 220 美元用于所有 Azure 服务。对于我们使用的Azure Websites 服务，您实际上可以运行 10 个网站而无需花费一分钱。