65.9K
CodeProject 正在变化。 阅读更多。
Home

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

starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2015 年 5 月 11 日

CPOL

8分钟阅读

viewsIcon

8741

Node.js 入门

在本系列文章中,您将学习如何在 Windows 机器上设置 Node.js(如果您使用的是 Mac,则可以学习相关概念),如何使用 Express 开发 Web 前端,如何将 Node Express 应用部署到 Azure,如何使用 Socket.IO 添加实时层,以及如何将所有内容部署在一起。本教程将使用可选的 Visual StudioNode.js Tools for Visual Studio 插件 作为开发环境 — 我已提供这两个工具的免费下载链接。

级别:初学者到中级 — 您应了解 HTML5 和 JavaScript。

第一部分 - Node.js 入门

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

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

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

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

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

第一部分 - Node.js 入门

欢迎来到 Node.js 实践教程系列的第一部分:构建一个 Node.js 驱动的聊天室 Web 应用。在本期中,我将解释 Node.js 是什么,为什么您应该关注 Node.js,以及如何设置您的机器。

什么是 Node.js……以及为什么使用它?

Node.js 是一个用于在浏览器外部运行 JavaScript 应用程序的运行时环境和库。Node.js 主要用于运行实时服务器应用程序,其在非阻塞 I/O 和异步事件方面的性能表现出色。围绕 Node.js 构建了一个完整的 Web 生态系统,拥有多种 Web 应用框架和可供使用的协议实现。它无疑是当今开发 Web 实时应用程序最简单、最快捷的方式之一。

为什么使用 Node.js?一个词的答案:JavaScript。JavaScript 是一种非常流行的语言,被认为是将 Web 转变为如今充满活力的奇迹的驱动力之一。您如今在浏览器中所能做的事情,可以与任何其他语言相媲美!

JavaScript 最初出现在前端,但 — 感谢 V8 JavaScript 引擎和 Ryan Dahl 的工作 — 您现在可以在浏览器外部运行网络化的 JavaScript 应用程序,专门用于构建 Web 应用。Node.js 让您能够统一应用程序所使用的编程语言。您不再需要为后端使用不同的语言 — 您可以全程使用 JavaScript。如果您的背景是使用 HTML、CSS 和 JavaScript 构建和设计网站及 Web 应用前端,那么您无需再学习一种新语言来为您的应用程序开发复杂的数据驱动后端。

Node.js 在 WebSockets 作为前后端实时通信方法的发展中起着关键作用。WebSockets 的使用以及在此协议基础上构建的库(如 Socket.IO)已真正推动了 Web 应用程序的期望,并让我们开发者能够探索新的方式来创建 Web。

在 Windows 8 上设置 Node.js

要开始,您需要一台相对较新的机器。我将向您展示如何在 Windows 8.1 上安装 Node.js。

1. 安装 Node.js

首先,下载并安装 Node.js 运行时。选择 Windows 安装程序是入门最简单的方法之一。

或者,如果您是 Windows 包管理器 Chocolatey 的粉丝,您可以通过运行以下命令来安装 Node.js:

choco install nodejs.install

2. 确认设置

您应该仔细检查 Node.js 可执行文件是否已添加到您的 PATH 系统环境变量中。观看此视频,了解如何在 Windows 8 和 Windows 8.1 上更改环境变量。您需要确保以下文件夹已添加到 PATH 变量中:

C:\Program Files (x86)\nodejs\

如果您打开命令提示符并输入 node –h,您应该会看到 node.js 可执行文件的帮助文档显示出来。

与 Node.js 一起,用于管理 node.js 包的系统 NPM 也应该已安装并在命令提示符中可用。只需键入 npm –h,您应该会看到 NPM 的帮助文档显示出来。

如果出现错误……

如果您遇到类似这样的错误……

Error: ENOENT, stat 'C:\Users\someuser\AppData\Roaming\npm'

……解决方案是在上述路径中创建一个文件夹,如这个 StackOverflow 问题中所述。这仅是最新 Node.js 安装程序中的一个问题,应该会在下一个版本中得到解决。您可以像这样创建文件夹:

mkdir -r C:\Users\someuser\AppData\Roaming\npm

选择一个开发工具

Node.js 安装完成后,就该选择一个开发工具了。您可以随意使用任何您想要的编辑工具。在本教程系列中,我将使用 Visual Studio 来开发、调试和部署聊天引擎;以及 Node.js Tools for Visual Studio (NTVS) — 一个免费的开源插件,支持开发 Node.js 应用程序。

NTVS 的优点在于它为 Visual Studio 增加了 Node.js 支持,包括编辑、Intellisense、性能分析、npm、TypeScript、本地和远程调试(包括 Windows/MacOS/Linux)。它还使创建网站并将其轻松部署到 Microsoft Azure Web Sites 或 Cloud Services 变得简单。

如果您没有 Visual Studio,可以下载免费的 Visual Studio 2013 Community Edition。然后,下载免费的 Node.js Tools for Visual Studio 插件。您也可以使用 Visual Studio 2012 Pro 或更高版本(需要 Update 4)或 Visual Studio 2013 或更高版本(需要 Update 2)。NTVS 插件与这两个版本兼容。

在 Visual Studio 中启动新的 Node.js 项目

注意:屏幕截图显示的是 Visual Studio 2013 Ultimate。

启动新的 Node.js 项目非常简单。

  1. 启动 Visual Studio。在“文件”菜单上,单击“新建”,然后单击“项目”。

  2. 在“新建项目”窗口中,展开“已安装”菜单选项,展开“模板”,然后单击“JavaScript”。在主窗口中,选择“空白 Node.js Web 应用程序”。选择项目的路径和名称,然后单击“确定”。

  3. 您将看到如下屏幕。此时可以随意探索 Visual Studio。您需要打开解决方案资源管理器中生成的 server.js 文件(通常在右侧,但可能位于屏幕的其他位置)。

  4. 现在您可以在您喜欢的浏览器中调试您的 node.js Web 应用程序了。

"Hello World" in Node.js

与其他语言的典型做法一样,生成的代码示例会显示如何在浏览器中输出“Hello World”。我将逐行解释 server.js 中的生成代码如何工作。*注意:如本教程系列描述中所述,我假定您了解 JavaScript、HTML5 以及 HTTP/Internet 的工作原理。

线 1

var http = require('http');

Node.js 拥有一个简单的模块和依赖项加载系统。您只需调用 `require` 函数,并提供要加载模块的文件或目录的路径,此时会返回一个变量,其中包含该模块的所有已导出函数。

线 2

var port = process.env.port || 1337;

在这一行,我们要确定用于提供 HTML 的 HTTP 服务器将在哪个端口上运行。如果环境变量中指定了端口号,我们就使用该端口,否则就简单地使用 1337。

第 3 行

http.createServer(function (req, res) {

我们要创建一个服务器来处理 HTTP 请求。我们还将向 `createServer` 函数传递一个函数回调,该回调包含两个参数,用于处理每个单独的请求并返回响应。如果您从未遇到过 JavaScript 中的回调函数,请参阅 Michael Vollmer 的文章。接收到的请求会传递到 `req` 参数,响应则期望写入到 `res` 参数中。

第 4 行 

res.writeHead(200, { 'Content-Type': 'text/plain' });

任何 HTTP 响应都需要一个状态行和标头,要了解更多关于 HTTP 标头及其工作原理的信息,请查看这篇文章。在这种情况下,我们希望返回 `200 OK` 作为状态响应,并指定内容类型为纯文本。我们通过在响应对象上调用 `writeHead` 函数来实现这一点。

第 5 行

res.end('Hello World\n');

一旦我们完成了响应的写入,就希望调用 `end` 函数。我们也可以通过 `end` 函数传递最终内容,在本例中,我们希望以纯文本形式发送字符串“Hello World”。

第 6 行

}).listen(port);

我们关闭回调,并调用 `listen` 函数在之前定义的端口上运行,这将启动服务器并开始接受发送到指定端口的请求。

要查看结果,您可以按上一个屏幕截图中显示的按钮开始调试。您将在浏览器中看到“Hello World”。

Voilà!您现在已经成功地在 Windows 8.1 上使用 Visual Studio 2013 运行了一个 Node.js 应用程序。

敬请期待第二部分!

第二部分 — 如何将您的“Hello World”部署到云 — 可以在我的博客这里找到。您可以通过关注我的 Twitter 账号 @ramisayar 来了解本篇文章和其他文章的最新动态。

更多关于 Azure 上的 Node 学习

要深入学习 Node.js,我的课程在此 Microsoft Virtual Academy 上提供。

或者一些关于类似 Node 主题的短视频

本文是 Microsoft Web 开发技术系列的一部分。我们很高兴与您分享 Microsoft Edge 及其新的渲染引擎。在 modern.IE 获取免费虚拟机或在 Mac、iOS、Android 或 Windows 设备上远程测试。

© . All rights reserved.