前端学习 node 快速入门 系列 —— 初步认识 node

其他章节请看：

前端学习 node 快速入门 系列

初步认识 node

node 是什么

node（或者称node.js）是 javaScript（以下简称js） 运行时的一个环境。不是一门语言。

以前 js 只能运行在浏览器中，浏览器中的 js 包含：bom（例如 window）、dom（例如 document）、ecmascript、js 引擎；现在 js 也可以运行在 node 中，node 中的 js 包含：ecmascript（服务端不操作页面，所以不需要 bom 和 dom）和 js 引擎。

我们编写的 js 只是一些字符串文本，只有 js 引擎才能识别和处理它们；js 引擎有很多种，chrome v8引擎是目前最好的，而且开源；node 的作者就是基于 chrome v8开发了一个 js 运行时环境。

node 能做什么

• 写 web 服务器后台（java，php 能做的，node也能做）
• 做项目构建工具，例如 webpack、vue-cli 都是用 node 写的
• 做命令行工具，例如 hexo（一款快速、简洁且高效的博客框架）就是用 node 写的
• 用于桌面开发

安装 node

进入 node 官网，来到下载页面，下载对应平台的 node 即可。我的是 windows 平台，下载后傻瓜式（一路 next）安装即可。安装成功后配置一下环境变量（将 nodejs 的安装目录配置到 path 中），接着打开命令行工具，输入 node --version，如果能输出 node 的版本说明安装成功。

node 有当前发布版本和长期支持版。前者包含最新特性，可用于学习，后者更稳定。下载页面也有node 以往的版本的入口，可以从中下载特定版本的 node。

hello-world

创建一个 js 文件，内容输入 console.log('hello world')，保存文件后，在命令行中输入 node file-name 就运行了我们的第一个程序。

$ node 1.js
hello world

我们在浏览器中，通常会通过 F12 打开开发者工具，输入一些测试语句，例如 Array.isArray(1)，node 也有类似的环境。在命令行中输入 node 回车，即可进入。请看示例（我的终端是Git Bash）：

$ node
Welcome to Node.js v12.18.1.
Type ".help" for more information.
> console.log(1+1)
2
undefined
> Math.max(1,3,5,7,-1)
7
> Array.isArray(1)
false
> window
Uncaught ReferenceError: window is not defined
> document
Uncaught ReferenceError: document is not defined
> typeof fs
'object'
> typeof http
'object'
>

如果需要退出控制台，按 Ctrl + c 即可。

最简单的读写文件

需求：读取某个文件的内容并输出到控制台；将一段代码写入某文件

这里我们只需要使用 node 的内置模块 fs（文件系统）中的两个方法 readFile() 和 writeFile() 方法。

先实现读取文件。打开 readFile() 的 api，复制里面的代码，微调，保存在 2.js 中：

// 导入内置模块 fs
const fs = require('fs')
// 读取 1.js
// 1.js 中的内容是：console.log('hello world')
fs.readFile('1.js', (err, data) => {
    if (err) throw err;
    console.log(data.toString()); // {1}
});

在命令行中运行该文件：

$ node 2
console.log('hello world')

如果不调用 toString() 方法（行{1}），则输出的是十六进制 <Buffer 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 27 68 65 6c 6c 6f 20 77 6f 72 6c 64 27 29>。

也可以指定编码来让它正常输出，就像这样：

...
fs.readFile('1.js', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
});
// 输出：console.log('hello world')

写文件就很简单了，找到 writeFile() 对应的api，微调，代码如下：

const fs = require('fs')
const data = 'console.log(1+2)'
fs.writeFile('1.js', data, (err) => {
  if (err) throw err;
  console.log('The file has been saved!');
});

再次运行 $ node 2，然后验证 1.js 文件的内容是否已改成 console.log(1+2)

注：本系列教程只讲大概5个内置核心模块，不会详细讲解 node 的 API，API 是讲不完的。在node 以往的版本中有每个版本对应的API文档。本系列教程选用的API文档是node 12.18.1。

最简单的服务器

需求：启动一个服务器，通过浏览器访问能显示 Hello-World

将以下代码保存在一个 js 文件中，用 node 运行后会启动一个服务器。

const http = require('http')
const listenCallback = () => {
    console.log('服务启动成功')
}
const requestCallback = () => {
    console.log('已接到您的请求...')
}

const server = http.createServer() // {1}
server.listen('3000', listenCallback) // {2}
server.on('request', requestCallback) // {3}

浏览器输入 http://localhost:3000/ 即可访问这个服务器。服务器接收到请求，会触发 requestCallback 回调，这个简单的服务器由于没有实现响应请求的功能，所以我们会看到浏览器会一直转圈圈，等待服务器的返回。

$ node 3.js
服务启动成功
// 浏览器访问服务器后输出
已接到您的请求...

Tip:服务器就是一台 24 小时不断电的电脑，服务器上可能有多个应用，所以需要端口号来定位具体的应用；我们的浏览器与服务器通信时，浏览器也会开启一个端口；我们测试可以使用 3000、5000 这些没被占用的端口号。

首先通过 http.createServer（行{1}）创建一个服务器，接着通过行 server.listen（行{2}）启动 HTTP 服务器以侦听连接，最后通过 server.on（行{3}）给服务器注册 request 事件的回调。

注：初次接触 Node 的 api 可能会不太适应。笔者就有这种感受，首先 http.createServer() 方法没有示例，只说返回的是 http.Server 的实例；其次 server.listen() 的语法是从 http.Server 的父类 net.Server 中才找到 server.listen([port[, host[, backlog]]][, callback])；最后 .on() 到底是谁的方法？最初只在 http.Server 中找到 Event: 'request'，是告诉我 server 这个对象支持哪些事件吗，最终在源码（我用的编辑器是vscode，直接点进去，就可以看到对应的源码，源码是用 typescript 写的）中发现了下面的线索：

// createServer() 方法返回 Server
function createServer(requestListener?: RequestListener): Server; // {1}

// Server 中有 addListener() 和 on()
class Server extends events.EventEmitter {
    ...
    addListener(event: string, listener: (...args: any[]) => void): this; // {2}
    ...
    on(event: string, listener: (...args: any[]) => void): this; // {3}
    ...
}

createServer() 方法返回 Server，在 class Server 中 定义了 on() 方法。

此外，addListener()（行{2}）和 on()（行{3}）好像只是方法名不同，用 node 的控制台做如下测试，发现 on() 应该是 addListener() 的别名。

D:\>node
Welcome to Node.js v12.18.1.
> http.createServer().on === http.createServer().addListener
true
>

现在只差最后一步：给浏览器返回数据。需要用到下面两个方法：

response.write(chunk[, encoding][, callback])

• 这发送了响应主体的一部分。可以多次调用此方法以提供身体的连续部分

response.end([data[, encoding]][, callback])

• 此方法向服务器发出信号，指示所有响应头和主体已发送。该服务器应认为此消息已完成。必须在每个响应上调用方法response.end（）

接着添加服务器响应功能，将 Hello World 输出到浏览器页面。需要改动的代码只有 requestCallback() 方法，请看示例：

...
const requestCallback = (req, res) => {
    res.write('Hello World')
    res.end()
}
...

到此，这个需求就做完了。

我们在此基础上稍微扩展一下。

后端传给前端的通常是 json 数据，模拟如下：

...
const requestCallback = (req, res) => {
    const data = {
        status: 200,
        message: '成功',
        data: {}
    }
    res.write(data)
    res.end()
}
...

浏览器访问后，发现 node 控制台报错，提示只能传 String 或 Buffer 类型的数据，再次修改为 res.write(JSON.stringify(data))，重启 node（每次修改完 node 代码都需要重新重启 node，后续不在重复说明），浏览器访问页面显示 {"status":200,"message":"鎴愬姛","data":{}}，中文乱码了。

虽然 write() 方法中默认编码是 utf8，但浏览器的编码默认是根据操作系统来，在中文操作系统中浏览器的编码是 gbk，服务器和客户端编码格式不同，于是乱码了。

既然浏览器的编码是 gbk，那我将服务器这边编码指定为 gbk 是否就不会乱码？修改代码为 res.write(JSON.stringify(data), 'gbk')，结果浏览器页面出不来了，浏览器控制台输出了一个错误信息：net::ERR_INVALID_CHUNKED_ENCODING。

网上说 node 不支持 gbk，再次修改代码为 res.write(JSON.stringify(data), 'base64')，访问页面，没有了错误信息，直接触发了一个下载。

node 到底支持哪些编码，又在哪里声明的？

突然想到文档中说 write() 方法只支持 String 和 Buffer两种数据，于是在 Buffer 中看到 Buffer.isEncoding() 方法，作用是：如果 encoding 是支持的字符编码的名称，则返回true；否则返回false。

$ Buffer.isEncoding('utf-8')
true
$ Buffer.isEncoding('gbk')
false
$ Buffer.isEncoding('base64')
true
$

在 Buffer 源码中找到了支持的字符编码，请看：

// Buffer class
type BufferEncoding = "ascii" | "utf8" | "utf-8" | "utf16le" | "ucs2" | "ucs-2" | "base64" | "latin1" | "binary" | "hex";

既然不能把 node 的编码改为 gbk，那么我们就把浏览器的编码改成 node 的编码 utf8，请看代码：

...
const requestCallback = (req, res) => {
    ...
    /*
    Content-type，决定浏览器以什么形式，什么编码读取这个文件

    格式：Content-Type：type/subtype;parameter
        type：主类型，任意的字符串，如text，如果是*号代表所有；
        subtype：子类型，任意的字符串，如html，如果是*号代表所有，用“/”与主类型隔开；
        parameter：可选参数，如charset，boundary等。

    文件扩展名与 Content-type 对应关系可以在 w3school 中查阅
    */
    res.setHeader('Content-type', 'text/html;charset=utf8') // {1}
    res.write(data)
    ...
}
...

新增 res.setHeader()（行{1}），通过设置 Content-type 决定浏览器用什么编码读取这个文件。若只输入 charset=utf8，经测试，仍旧乱码。

如果给浏览器返回一段 html 字符串，浏览器会有什么表现？请看下面测试：

// 提示：end() 如果指定了data，则等效于调用 write(data)，然后调用 end()

// test1：浏览器输出：hello world 浣犲ソ
res.end('<h1>hello world 你好</h1>') 

// test2：浏览器输出：hello world 你好
res.setHeader('Content-type', 'text/html;charset=utf8')
res.end('<h1>hello world 你好</h1>')

// test3：浏览器输出：<h1>hello world 你好</h1>
res.setHeader('Content-type', 'text/plain;charset=utf8')
res.end('<h1>hello world 你好</h1>')

test1 表明，node 不显式声明 Content-type，如果给浏览器返回 html 字符串，浏览器也能自动识别并渲染出来，效果与 test2 相同。

其他章节请看：

前端学习 node 快速入门 系列