0 准备工作

1 ts-node-dev

  • 当文件更新时自动重启node
  • 避免每次改完代码都要重新运行的麻烦
  • 可以用TS开发Node.js程序，且会自动重启
  • 不宜在生产环境使用，但非常适合用来学习

安装

1

npm -g i ts-node-dev

要用npm安装 ，用yarn安装的话使用时会报错。。无法识别“ts-node-dev”命令，不知道为什么。

2 VSCode配置

配置自动保存与保存后自动格式化：

ctrl shift p打开首选项：打开设置(ui)，AutoSave修改为onFocusChange，搜索format，勾选Format On Save开启保存后自动格式化。

3 curl

  • GET请求：curl -v url
  • POST请求：curl -v -d “name=gsq" url
  • 设置请求头：-H 'Content-Type:application/json'
  • 设置动词：-X PUT
  • JSON请求：curl -d '{"name":"bob"}' -H 'Content-Type:application/json' url
  • 后面会用到curl来构造请求

1 创建项目

  • 初始化项目：
1

yarn init -y
  • 安装@types/node声明文件
1

yarn add --dev @types/node
  • 新建index.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 引入http模块
import * as http from 'http'
// 用http创建server
const server = http.createServer()
// 监听server的request事件
server.on('request', (request, response) => {
	console.log('有人请求了')
	response.end('hi')// 服务器返回data，并终止服务器
})
// 开始监听8888端口
server.listen(8888)
  • 控制台ts-node-dev index.ts启动服务器
  • 使用curl -v http://localhost:8888 发送请求

2 request对象

http.createServer()创建的server是http.Server和net.Server类的实例，可以创建后端环境（静态服务器）。

首先控制台打出request.contructor，发现request对象的构造函数是IncomingMessage，因此利用ts语法，在传参中直接定义request:IncomingMessage，告诉TypeScript request不是任意对象，而是IncomingMessage对象。

获取请求信息（请求头、路径、请求消息体等）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import * as http from 'http'
// 引入IncomingMessage模块
import { IncomingMessage } from 'http'

const server = http.createServer()

server.on('request', (request: IncomingMessage, response) => {
    console.log(request.httpVersion)// 获取http版本号
    console.log(request.url)// 获取请求路径
    console.log(request.headers)// 获取请求头
	// 获取请求消息体
    const arr = []
    // 监听data事件
    // 用户每上传一个字节或一段内容就会触发data事件，由于每次上传报文的大小是固定的，所以在用户上传过程中会不停地触发data事件。
    // 因此需要监听每一次的data事件，把每一次上传的数据放到一个数组中
    request.on('data', (chunk) => {
        arr.push(chunk)
    })
    // 监听上传结束事件，end事件只有在数据被完全消费掉后再触发
    request.on('end', () => {
        // 将数据中的每一段chunk连接起来
        const body = Buffer.concat(arr).toString()
        console.log(body)
        // 请求处理完成后响应
        response.end('hi')
    })
})

server.listen(8888)

开启服务器后，利用curl构造请求：

1

curl -V -d "name=gsq" http://localhost:8888/api/message

控制台将打印如下信息：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

1.1
/api/message
{
  host: 'localhost:8888',
  'user-agent': 'curl/7.55.1',
  accept: '*/*',
  'content-length': '8',
  'content-type': 'application/x-www-form-urlencoded'
}
name=gsq

总结：

  • 拥有headers、method、url等属性
  • 从stream.Readable类继承了data、end、error事件
  • 不能直接拿到请求的消息体：原因与TCP有关

3 response对象

同样的方式发现response对象是ServerResponse的实例对象

  • 拥有getHeader、setHeader、end、write等方法，可以控制响应的每一部分
  • 拥有statusCode属性，默认为200，可读可写
  • 继承了Stream，也属于Stream类的实例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

response.setHeader('NAME', 'gsq')
response.statusCode = 404
response.write('1')
response.write('2')
response.end()
// 响应的消息体
< HTTP/1.1 404 Not Found
< NAME: gsq
< Date: Wed, 30 Jun 2021 05:56:08 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
< Transfer-Encoding: chunked
<
12

4 根据url返回不同的文件

思路：通过request获取到用户请求的url，利用switch进行判断，根据请求不同，应用fs.readFile读取页面数据并返回给请求端。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import * as fs from 'fs'
import * as http from 'http'
import * as p from 'path'
import { IncomingMessage, ServerResponse } from 'http'

const server = http.createServer()
// 获取当前目录下的public路径，利用resolve方法进行拼接并解析为绝对路径
const publicDir = p.relative(__dirname, 'public')

server.on('request', (request: IncomingMessage, response: ServerResponse) => {
    // 获取到请求路径
    const { url } = request
    // 判断请求路径
    switch (url) {
        case '/index.html':
            // 读取index.html文件
            fs.readFile(p.resolve(publicDir, 'index.html'), (error, data) => {
                if (error) throw error
                response.end(data.toString())
            })
            break;
        case '/main.js':
            // 在响应的头部声明文件类型
            response.setHeader('Content-Type','text/javascript; charset=utf-8')
            fs.readFile(p.resolve(publicDir, 'main.js'), (error, data) => {
                if (error) throw error
                response.end(data.toString())
            })
            break;
        case '/index.css':
            // 在响应的头部声明文件类型
            response.setHeader('Content-Type','text/css; charset=utf-8')
            fs.readFile(p.resolve(publicDir, 'index.css'), (error, data) => {
                if (error) throw error
                response.end(data.toString())
            })
            break;
    }
})

server.listen(8888)

在浏览器中访问http://localhost:8888/index.html

5 处理查询参数

当请求的路径带有参数时（…/index.html?q=1），会影响到switch对路径的判断，从而找不到对应访问的文件，因此需要url模块来处理查询的参数。

引入url模块时，模块名与request中取到的url同名，所以需要修改url为path：

1
2

const { url:path } = request
// 在request中取到url字段，重命名为path变量

url.parse(path)返回一个URL对象，包含如下字段：

1
2
3
4
5
6

Url {
  protocol: null, slashes: null, auth: null, host: null,
  port: null,  hostname: null,  hash: null,  search: '?q=2',
  query: 'q=2', pathname: '/index.html', path: '/index.html?q=2',
  href: '/index.html?q=2'
}

switch只需读取URL对象中的pathname字段来进行判断即可。

**注：**但是目前node版本中，url.parse已被弃用，所以我们直接实例化一个URL对象。URL对象接受两个参数，分别为请求路径与根路径。

1
2

const url = new URL(path, 'http://localhost:8888');
const { pathname } = new URL(path, 'http://localhost:8888')

新的URL对象包含如下字段：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

URL {
  href: 'http://localhost:8888/index.html?q=1',
  origin: 'http://localhost:8888',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost:8888',
  hostname: 'localhost',
  port: '8888',
  pathname: '/index.html',
  search: '?q=1',
  searchParams: URLSearchParams { 'q' => '1' },
  hash: ''
}

同样拥有pathname字段，之后的switch判断与之前保持一致即可。

6 匹配任意文件

目前为止我们只能访问三个路径，其他路径均视为404，如果每多一个页面就多写一个case来判断并响应的话，工作量非常大且代码冗余，重复代码很多，因此需要抽取出关键代码，使其能够自动匹配任意访问的文件。

思路：还是从路径入手，URL对象中的pathname字段的字符串，经过一些字符处理，便可以作为fs读取文件的路径名。例如访问路径为/aa/index.html，则读取路径中需要的字段是aa/index.html，只需将前面的'/'去掉即可。

修改后代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import * as fs from 'fs'
import * as http from 'http'
import * as p from 'path'
import { IncomingMessage, ServerResponse } from 'http'

const server = http.createServer()
const publicDir = p.relative(__dirname, 'public')

server.on('request', (request: IncomingMessage, response: ServerResponse) => {
    const { url: path } = request
    // 在URL对象中获取pathname字段
    const { pathname } = new URL(path, 'http://localhost:8888')
    // 基于访问路径处理文件名
    const fileName = pathname.substring(1)
    fs.readFile(p.resolve(publicDir, fileName), (error, data) => {
        // 如果读不到文件，则返回404
        if (error) {
            response.statusCode = 404
            response.end()
        }
        // 如果成功读取到文件，则返回读取到的数据
        response.end(data.toString())
    })
})

server.listen(8888)

7 处理不存在的文件

对访问文件时出现的错误类型进行判断

1 文件不存在的情况

1
2
3
4
5
6
7

if (error.errno === -4058) {
	response.statusCode = 404 //找不到文件
    fs.readFile(p.resolve(publicDir, '404.html'), (error, data) => {
        response.end(data)
        // data无需toString()，浏览器自动解析data
	})
}

2 当访问路径为根路径http://localhost:8888时，默认访问index.html

1
2
3
4

let fileName = pathname.substring(1)
if (fileName === '') {
    fileName = 'index.html'
}

3.当访问路径不是文件而是目录时

1
2
3
4

else if (error.errno === -4068) {
	response.statusCode = 403 //没有权限访问
	response.end('无权查看目录内容')
}

4.其他错误一律归为服务器内部错误

1
2
3
4

else {
	response.statusCode = 500 //服务器内部错误
	response.end('服务器繁忙，请稍后再试')
}

8 处理非GET请求

静态服务器不会接受非get请求，对Method进行过滤：

1
2
3
4
5
6

const { method } = request
if (method !== 'GET') {
	response.statusCode = 405// Method Not Allowed
	response.end();
	return;
}

9 添加缓存选项

再次刷新页面时，css、js和图片等静态数据会缓存至内存中，提升网页访问性能。

成功返回数据前，在响应头添加缓存字段：

1

response.setHeader('Cache-Control','public max-age=3600')

10 发布(未完成)

将ts变成js，需全局安装TypeScript，使用tsc命令进行转换：

1

tsc index.ts

把js作为package.json中的main字段

1

"main": "index.js"

发布

1
2

yarn login/npm adduser
yarn publish/npm publish