http的使用

Web服务器

• 什么是Web服务器？
  • 当应用程序（客户端）需要某一个资源时，可以向一个台服务器，通过Http请求获取到这个资源；提供资源的这个服务器，就是一个Web服务器；
    
• 目前有很多开源的Web服务器：Nginx、Apache（静态）、Apache Tomcat（静态、动态）、Node.js

创建Web服务器

const http = require("http");	// 导入 http 模块
const server = http.createServer((request, response) => {
	response.end("Hello World");	// 相同于两步操作	response.write()	response.close();
});

// 其实 底层原理是 通过 New Server 出的服务器
function createServer((opts, requestListener) => {
	return new Server(opts, requestListener);
});

`request: 请求对象，包含请求相关信息`
`response: 响应对象，包含我们要发送给客户端的信息`

// 设置端口号和 主机地址
server.listen(8888, '0.0.0.0', () => {
	console.log("服务器启动成功");
});

监听端口号和主机

• Server通过listen方法来开启服务器，并且在某一个主机和端口上监听网络请求
  • 也就是当我们通过 ip:port的方式发送到我们监听的Web服务器上时；
  • 我们就可以对其进行相关的处理；
• listen函数有三个参数:
• 端口port: 可以不传, 系统会默认分配端, 后续项目中我们会写入到环境变量中；
• 主机host: 通常可以传入localhost、ip地址127.0.0.1、或者ip地址0.0.0.0，默认是0.0.0.0；
  • localhost：本质上是一个域名，通常情况下会被解析成127.0.0.1；
  • 127.0.0.1：回环地址（Loop Back Address），表达的意思其实是我们主机自己发出去的包，直接被自己接收；
    • 正常的数据库包经常 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层 ；
    • 而回环地址，是在网络层直接就被获取到了，是不会经常数据链路层和物理层的；
    • 比如我们监听 127.0.0.1时，在同一个网段下的主机中，通过ip地址是不能访问的；
  • 0.0.0.0：
    • 监听IPV4上所有的地址，再根据端口找到不同的应用程序；
    • 比如我们监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的；
• 回调函数：服务器启动成功时的回调函数；

request 对象

• 在向服务器发送请求时，我们会携带很多信息，比如：
  • 本次请求的URL，服务器需要根据不同的URL进行不同的处理；
  • 本次请求的请求方式，比如GET、POST请求传入的参数和处理的方式是不同的；
  • 本次请求的headers中也会携带一些信息，比如客户端信息、接受数据的格式、支持的编码格式等；
  • 等等…
• 这些信息，Node会帮助我们封装到一个request的对象中，我们可以直接来处理这个request对象：

    const server = http.createServer((request, response) => {
		// request 对象
		console.log(request.url);
		console.log(request.method);
		console.log(request.headers);
		// 输出结果
		response.end("Hello World);
	})

request对象中的 Url

• 客户端在发送请求时，会请求不同的数据，那么会传入不同的请求地址：
  • 比如 http://localhost:8000/login；
  • 比如 http://localhost:8000/products;
• 服务器端需要根据不同的请求地址，作出不同的响应：

const serevr = http.createServer((request, response) => {
	const url = request.url;
	console.log(url);

	// 判断 url 内容是否一致
	if (url === '/login') {
		response.end("在 login 页面");
	} else if (url === '/user') {
		response.end("在 user 页面");
	} else {
		response.end("在其他页面");
	}
});

解析 Url

• 那么如果用户发送的地址中还携带一些额外的参数呢？
  • http://localhost:8000/login?name=why&password=123;
  • 这个时候，url的值是 /login?name=why&password=123;
• 我们如何对它进行解析呢？使用内置模块url：

	const parseInfo = url.parse(req.url);
	console.log(parseInfo);

• 获取 query 信息

	// 将 query 参数 转换为 对象
	const request = require("querystring");
	const { pathname, query} = url.parse(req.url);
	`pathname: 获取的是 页面地址`
	`query: 获取参数`

method 的处理

• 在Restful规范（设计风格）中，我们对于数据的增删改查应该通过不同的请求方式：
  • GET：查询数据；
  • POST：新建数据；
  • PATCH：更新数据；
  • DELETE：删除数据；
• 所以，我们可以通过判断不同的请求方式进行不同的处理。
  • 比如创建一个用户：
  • 请求接口为 /users；
  • 请求方式为 POST请求；
  • 携带数据 username和password；

创建用户接口

• 在我们程序中如何进行判断以及获取对应的数据呢？
  • 这里我们需要判断接口是 /users，并且请求方式是POST方法去获取传入的数据；
  • 获取这种body携带的数据，我们需要通过监听req的 data事件来获取；

	const server = http.createServer((req, res) => {
		// 设置 码
		req.setEncoding('utf-8');

		// 监听 req 的 data 事件来获取数据
		req.on('data', data => {
			console.log(data);
			// 这里获取的数据是 字符串类型	通过JSON.parse() 将字符串转换为 JSON 对象
			const {user, password} = JSON.parse(data);
		});
	})

• 将JSON字符串格式转成对象类型，通过JSON.parse方法即可。

Headers属性

• 在request对象的header中也包含很多有用的信息，客户端会默认传递过来一些信息：
  
• content-type 是这次请求携带的数据的类型：
  • application/json 表示的是一个 json 类型
  • text/plain 表示是一个文本类型
  • application/xml 表示的是一个 xml 类型
  • multipart/form-data 表示是上传文件
• content-length 文件的大小和长度
• keep-alive
  • http是基于TCP协议的，但是通常在进行一次请求和响应结束后会立刻中断；
  • 在http1.0中，如果想要继续保持连接：
    • 浏览器需要在请求头中添加 connection: keep-alive；
    • 服务器需要在响应头中添加 connection:keey-alive；
    • 当客户端再次放请求时，就会使用同一个连接，直接一方中断连接；
  • 在http1.1中，所有连接默认是 connection: keep-alive的；
    • 不同的Web服务器会有不同的保持 keep-alive的时间；
    • Node中默认是5s中；
• accept-encoding：告知服务器，客户端支持的文件压缩格式，比如js文件可以使用gzip编码，对应 .gz文件；
• accept：告知服务器，客户端可接受文件的格式类型；
• user-agent：客户端相关的信息；

修改 Header 的内容

res.writeHead(200, () => {
	"Content-Type": 'text/html;charset=utf-8'
})

返回响应结果

• 如果我们希望给客户端响应的结果数据，可以通过两种方式：
  • Write方法：这种方式是直接写出数据，但是并没有关闭流；
  • end方法：这种方式是写出最后的数据，并且写出后会关闭流；

  // 响应数据的方式有两种
  res.write("Hello World");
  res.end("Hello End");
  

• 如果我们没有调用 end和close，客户端将会一直等待结果：
  • 所以客户端在发送网络请求时，都会设置超时时间

返回状态码

• Http状态码（Http Status Code）是用来表示Http响应状态的数字代码：
  • Http状态码非常多，可以根据不同的情况，给客户端返回不同的状态码；
  • 常见的状态码是下面这些（后续项目中，也会用到其中的状态码）；

状态代码	状态描述	说明
200	OK	客户端请求成功
400	Bad Request	由于客户端请求语法有误，不能被服务器理解
401	Unauthorized	请求未经授权。这个状态代码必须和WWW-Authenticate报头域一起使用。
403	Forbidden	服务器收到请求，但是拒绝提供服务。服务器通常会在响应正文中给出不提供服务的原因。
404	Not Found	请求的资源不存在，例如，输入了错误的URL。
500	Internal Server Error	服务器发生不可预期的错误，导致无法完成客户端的请求。
503	Service Unavailable	服务器当前不能够处理客户端的请求，在一段时间之后，服务器可能会恢复正常。

• 设置状态码常见的两种方式
  • res.statusCode = 400
  • res.writeHead(200)

响应文件

• 返回头部信息，主要有两种方式：
  • res.setHeader：一次写入一个头部信息；
  • res.writeHead：同时写入header和status；

	res.setHeader("Content-Type", "application/json;charset=utf-8");
	
	res.writeHead(200, {
		"content-type": "application/json;charset=utf-8"
	})

• Header设置 Content-Type有什么作用呢？
  • 默认客户端接收到的是字符串，客户端会按照自己默认的方式进行处理；
    

http请求

	// get 请求方式
	http.get("http://localhost:8000", res => {
		res.on('data', data => {
			console.log(data);
		});
		res.on('end', () => {
			console.log("获取到结果");
		})
	})
	// post 请求方式
	const req = http.request({
		method: "post",
		hostname: 'localhost',
		port: 8888
	}, res => {
		res.on('data', data => {
			console.log(data);
		})
	});

end("服务器启动成功");

http文件上传

// 错误的，直接将其所有的 Buffer 写入到文件
const fileWriter = fs.createWriteStream("./foo.png", {flags: 'a+'})
req.on('data', data => {
	fileWriter.write(data);
})

// 正确的方式
const querystring = require("querystring");
const server = http.createServer(req, res) => {
	// 判断路径
	if (req.url === '/upload') {
		// 判断请求方式
		if (req.method === 'POST') {
			let body = '';
			// 截取 headers 请求头 = 后面的字符
			const totalBoundary = req.headers['content-Type'].split(';')[1];
			const boundary = totalBoundary.split('=')[1];
			
			// 获取图片的 Buffer 数据
			req.on('data', data => {
				// 将其追加到 body 里面去
				body += data;
			});
			// 结束
			req.on('end', () => {
				// 获取到 image/png 的 Buffer 地方
				const payload = querystring.decode('body', '\r\n', ': ');
				const type = payload["Content-Type"];
				// 在开始 image/png 的位置截取
				const typeIndex = body.indexOf(type);
				const typeLength = type.length;
				let imageData = body.substring(typeIndex + typeLength);
				// 去除前后空格
				imageData = imageData.replace(/^\s\s*/, '');
				// 将 bounday 截取掉
				imageData = imageData.substring(0, imageData.indexOf(`--${bounday}--`));
				// 上传文件
				fs.writeFile('./03_http/foo.png", imageData, 'binary', err => {
					res.end("上传成功");
				})
			})
		}
	}
})