回顾http请求

普通模式

a048868ef352ca1b998ad6392b2dc9bf8605ede4d035ff6e3d7c0e79df5ad231.png
注: 图中应该是四次挥手

长连接模式

762e93c9d52c7fa2640e037c6a14a4af8550513c2cbf2ebd3a9d1ca7d80f9526.png
注: 图中应该是四次挥手
长连接模式就是客户端与服务器之间的持续数据传输,普通模式会在服务器做出响应后进行四次挥手
而长连接就像是,客户端给服务打电话,告诉服务器你先别挂,我还有话没说,服务器也告诉客户端我不会挂电话,我等你但是过啦一会客户端还是没有回信息就会挂掉也有可能客户端等啦会服务器没有回话也会挂掉,或者客户端或服务端没有啥话可说啦就吧电话挂断啦, 如下图红框中的keep-alive 就是长连接模式
image.png
补充:http请求是建立在tcp/ip协议上的 三次握手与四次握手是tcp/ic协议, http是如何发送请求,请求的格式又是什么

net模块能干什么

net模块是一个通信模块

利用它可是实现

  • 进程间的通讯 IPC
  • 网络通信 TCP/IP

    创建客户端

    net.createConnection(options[, connectListener])

    官网上的解释

    image.png
    它的返回值是个 net.Socket在文档中搜索net.Socket,我发现它是一个类 如下图
    image.png
    从部分事件可以看出,这是一个流啊这说明客户端与服务之间交流数据是通过流式操作的,这不就和上节课写的文件流联系起来啦
    image.png

    连接服务器

    ```javascript const net = require(‘net’); const socket = net.createConnection( { host: ‘duyi.ke.qq.com’, port: 80, }, () => { console.log(‘连接成功’); } );

socket.on(‘data’, (chunk) => { console.log(chunk) });

  1. 但是运行结果是 并没有接受到数据<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1376603/1627988994038-7d71dd1f-61b9-4d55-a1bc-534f6b5f3456.png#align=left&display=inline&height=170&margin=%5Bobject%20Object%5D&name=image.png&originHeight=170&originWidth=1118&size=52974&status=done&style=stroke&width=1118)
  2. <a name="tgQye"></a>
  3. ### 为何接收不到数据
  4. http协议,客户端需要给服务器发送请求,服务器才会响应, 而我们刚好就是卡在这一步,为啥呢明明我创建啦客户端并设置服务器的域名与端口号不连接呢,之前我是用的ajax那些封装好的,而net模块偏向于底层,<br />当我尝试随意往流里写入数据
  5. ```javascript
  6. socket.write('hello !!!')
  7. socket.on('data', (chunk) => {
  8. console.log(chunk.toString('utf-8'))
  9. });

image.png
虽然返回啦数据http状态码却是400 而且这又啥,这是http协议规定的返回信息的格式,我们之间用ajax请求到的数据都是经过处理过后的
响应行:

  1. HTTP/1.1 400 Bad Request

响应头

  1. Server: stgw/1.3.12.3_1.13.5
  2. Date: Tue, 03 Aug 2021 11:15:05 GMT
  3. Content-Type: text/html
  4. Content-Length: 181
  5. Connection: close

响应体

  1. <html>
  2. <head><title>400 Bad Request</title></head>
  3. <body bgcolor="white">
  4. <center><h1>400 Bad Request</h1></center>
  5. <hr><center>stgw/1.3.12.3_1.13.5</center>
  6. </body>
  7. </html>

为哈服务器会响应400呢你看服务器响应信息都是有格式,按发送请求也是格式的

发送请求的格式

格式为:

  1. socket.write(`请求行
  2. 请求头
  3. 请求体`);
  4. //注意这里都是换行,没有空格,空格是识别不了的

而上面给服务发送请求是个这个格式吗,而是直接发送一段文本,服务肯定不认识,那不就返回400啦
这里的服务器只认http协议
如何在tcp/ip 协议书写http的get请求呢

  1. socket.write(`GET / HTTP/1.1
  2. Host: duyi.ke.qq.com
  3. Connection: keep-alive
  4. `); // get 请求的请求体是空的 但是请求头到请求体的之间的两个换行是必须要有的,不然服务器以为你还信息没传过来会一直等着客户端将请求体传过来

请求结果

  1. 连接成功
  2. HTTP/1.1 302 Moved Temporarily
  3. Date: Tue, 03 Aug 2021 11:41:28 GMT
  4. Content-Type: text/html
  5. Content-Length: 138
  6. Connection: keep-alive
  7. Server: nginx
  8. Location: https://duyi.ke.qq.com/
  9. X-Request-Id: 2ba8fab7-2444-44da-bd75-2d55b859909c
  10. <html>
  11. <head><title>302 Found</title></head>
  12. <body>
  13. <center><h1>302 Found</h1></center>
  14. <hr><center>nginx</center>
  15. </body>
  16. </html>
  1. 请求行:
  2. HTTP/1.1 302 Moved Temporarily
  3. 请求头// 请求头与请求体相差两行
  4. Date: Tue, 03 Aug 2021 11:41:28 GMT
  5. Content-Type: text/html
  6. Content-Length: 138
  7. Connection: keep-alive
  8. Server: nginx
  9. Location: https://duyi.ke.qq.com/
  10. X-Request-Id: 2ba8fab7-2444-44da-bd75-2d55b859909c
  11. 请求体:
  12. <html>
  13. <head><title>302 Found</title></head>
  14. <body>
  15. <center><h1>302 Found</h1></center>
  16. <hr><center>nginx</center>
  17. </body>
  18. </html>

注意:请求头中Content-Length: 138 会告诉我们请求体会有多少行

完整代码

  1. const net = require('net');
  2. const socket = net.createConnection(
  3. {
  4. host: 'duyi.ke.qq.com',
  5. port: '80',
  6. },
  7. () => {
  8. console.log('连接成功');
  9. }
  10. );
  11. /**
  12. * 格式化response
  13. * 将response-header 与 response-body
  14. * {
  15. * header: response-header
  16. * body: response-body
  17. * }
  18. * header 与 body 都会间隔一个\r\n\r\n
  19. */
  20. function formatResponse(response) {
  21. // console.log(response, 'response')
  22. const index = response.indexOf('\r\n\r\n'); // 请求头与请求体相差两行
  23. const head = response.substring(0, index);
  24. const body = response.substring(index + 2);
  25. /**格式化header */
  26. const headerParts = head.split('\r\n');
  27. const headerArr = headerParts.slice(1).map((ele) => {
  28. return ele.split(':').map((str) => str.trim());
  29. });
  30. const header = headerArr.reduce((acc, cur) => {
  31. acc[cur[0]] = cur[1];
  32. return acc;
  33. }, {});
  34. return {
  35. header,
  36. body: body.trimStart(),
  37. };
  38. }
  39. /**
  40. * 是否结束
  41. */
  42. function isOver() {
  43. const contentLength = +receive.header['Content-Length']; //Content-Length 该属性显示请求体有多少行
  44. const curReceivedLength = Buffer.from(receive.body, 'utf-8').byteLength;
  45. return contentLength < curReceivedLength;
  46. }
  47. let receive = null;
  48. /**
  49. * 监听数据流
  50. */
  51. socket.on('data', (chunk) => {
  52. const response = chunk.toString('utf-8');
  53. if (!receive) {
  54. receive = formatResponse(response);
  55. if (isOver()) {
  56. socket.end();
  57. }
  58. return;
  59. }
  60. receive += response.body;
  61. if (isOver) {
  62. socket.end();
  63. return;
  64. }
  65. });
  66. /**
  67. * 写入header
  68. */
  69. socket.write(`GET / HTTP/1.1
  70. Host: duyi.ke.qq.com
  71. Connection: keep-alive
  72. `);
  73. /** */
  74. socket.on('close', () => {
  75. console.log('结束啦')
  76. console.log(receive.header, 'header')
  77. console.log(receive.body, 'body')
  78. })

创建服务器

net.createServer()

官网上的解释

image.png
他的返回值为net.server
image.png

完整代码

示意图

image.png

socket是啥

当客户端连接服务器,它们之间是需要交流的,服务器使用socket去和客户端交流,来一个客服端服务器会生成一个新的socket去和客户端对接。
socket就像是客服,来一个客户就会有一个客服来对接

代码

  1. const net = require('net');
  2. const path = require('path');
  3. const fs = require('fs');
  4. /**
  5. * 创建服务器
  6. */
  7. const server = net.createServer();
  8. /**
  9. * 监听端口
  10. */
  11. server.listen('9527');
  12. /**
  13. * 开始监听端口后触发的事件
  14. */
  15. server.on('listening', () => {
  16. console.log('server listen 9527');
  17. });
  18. /**
  19. * 当某个连接到来时,触发该事件
  20. * 来个一个客户端便会产生一个新的socket
  21. * socket就像是客服,来一个客户就会有一个客服进行对接
  22. */
  23. server.on('connection', (socket) => {
  24. console.log('有客户端连接服务器');
  25. socket.on('data', async (chunk) => {
  26. const imgPath = path.resolve(__dirname, './1.jpg');
  27. const imgBuffer = await fs.promises.readFile(imgPath);
  28. const headBuffer = Buffer.from(`HTTP/1.1 200 OK
  29. Content-Type: image/jpeg
  30. `,
  31. 'utf-8'
  32. );
  33. const sendBuffer = Buffer.concat([headBuffer, imgBuffer]);
  34. socket.write(sendBuffer)
  35. socket.end();
  36. });
  37. });
  38. server.on('end', () => {
  39. console.log('连接结束')
  40. })