从零实现 HTTP 客户端协议解析器：逐字符解析响应头与 Chunked Body

引言：为什么要手写 HTTP 协议解析器？

• 了解 Node.js 的 http 模块封装的细节
• 通过手写客户端解析器深入理解 HTTP 报文结构（状态行、响应头、响应体等）
• 学习 chunked 传输编码的原理（Transfer-Encoding: chunked）

最终目标

实现这样一段功能

const response = await request.send();
/*
response:
{
  statusCode: 200,
  statusText: "OK",
  headers: { ... },
  body: "Data received\n"
}
*/

更进一步，我们还希望支持解析成结构化 JSON：

{
  message: "OK",
  data: {
    name: "zhangsan",
    age: 18
  }
}

实现步骤

1. 创建服务端

// server.js

const http = require("http");

http
  .createServer((req, res) => {
    const body = [];

    req
      .on("data", (chunk) => {
        body.push(chunk);
      })
      .on("end", () => {
        const data = Buffer.concat(body).toString();
        console.log(`Received data: ${data}`);

        res.writeHead(200, { "Content-Type": "text/html" });
        res.end("Data received\n");
      })
      .on("error", (err) => {
        console.error(`Error: ${err}`);
        res.writeHead(500, { "Content-Type": "text/html" });
        res.end("Internal Server Error\n");
      });
  })
  .listen(8080);

console.log("Server is running on http://localhost:8080");

2. 创建一个客户端

// client.js

 const { Request } = require('./request')
 async function mock() {
  const request = new Request({
    method: 'POST',
    host: 'localhost',
    port: 8080,
    path: '/',
    headers: {

    },
    body: {
      name: 'zhangfan'
    }
  })

  const response = await request.send()
  //  console.log(response, 'response')
 
}

mock()

3. 构造基础的HTTP

net模块相关内容 参考

这里我们不关心内容， 直接返回结果

// request.js
const net = require('net');

class Request {
  constructor(options) {
    this.method = options.method || 'GET';
    this.host = options.host;
    this.port = options.port || 80;
    this.path = options.path || '/';
    this.headers = options.headers || {};
    this.body = options.body || {};

    // 设置默认的 Content-Type
    if (!this.headers['Content-Type']) {
      this.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    }

    // 根据 Content-Type 处理请求体
    if (this.headers['Content-Type'] === 'application/json') {
      this.bodyText = JSON.stringify(this.body);
    } else if (this.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
      this.bodyText = Object.keys(this.body)
        .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(this.body[key])}`)
        .join('&');
    }

    // 设置 Content-Length
    this.headers['Content-Length'] = Buffer.byteLength(this.bodyText);
  }

  toString() {
    // 构造 HTTP 请求字符串
    return (
      `${this.method} ${this.path} HTTP/1.1\r\n` +
      `Host: ${this.host}\r\n` +
      Object.entries(this.headers)
        .map(([key, value]) => `${key}: ${value}`)
        .join('\r\n') +
      `\r\n\r\n` +
      this.bodyText
    );
  }

  send() {
    return new Promise((resolve, reject) => {
      const client = net.createConnection({ host: this.host, port: this.port }, () => {
        client.write(this.toString());
      });

      let responseData = '';

      client.on('data', chunk => {
        responseData += chunk.toString();
      });

      client.on('end', () => {
     
        resolve(responseData); // 暂时直接返回完整响应字符串
      });

      client.on('error', err => {
        reject(err);
        client.end();
      });
    });
  }
}

module.exports = { Request };

console.log(response, ‘response’) 此时会返回 Received data: name=zhangfan
接下来我们开始构造 ResponseParser 来处理返回的数据

4. ResponseParser

class ResponseParser {
  constructor() {
    this.response = {
      statusLine: "",
      statusCode: 0,
      statusText: "",
      headers: {},
      body: "",
    };
    this.state = "statusLine";
    this.raw = "";
  }

  receive(string) {
    /**
     * string
     * 'HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nDate: Mon, 26 May 2025 06:18:23 GMT\r\nConnection: 
     *  keep-alive\r\nTransfer-Encoding: chunked\r\n\r\ne\r\nData received\n\r\n0\r\n\r\n'
     * */
    this.raw += string;
    const [headerPart, bodyPart] = this.raw.split("\r\n\r\n");

    const headerLines = headerPart.split("\r\n");
    this.response.statusLine = headerLines[0];

    const [_, statusCode, statusText] = headerLines[0].match(
      /HTTP\/1\.1\s(\d{3})\s(.*)/
    );
    this.response.statusCode = parseInt(statusCode);
    this.response.statusText = statusText;

    for (let i = 1; i < headerLines.length; i++) {
      const [key, value] = headerLines[i].split(": ");
      this.response.headers[key.toLowerCase()] = value;
    }

    this.response.body = bodyPart;
    return this.response;
  }
}

使用

// reqeuest.js
 let responseData = "";
  const parser = new ResponseParser();

  client.on("data", (chunk) => {
    responseData += chunk.toString();
  });
// 

// client.js
//  console.log(response, 'response')
// 
// {
//   statusLine: "HTTP/1.1 200 OK",
//   statusCode: 200,
//   statusText: "OK",
//   headers: {
//     "content-type": "text/html",
//     date: "Mon, 26 May 2025 06:18:23 GMT",
//     connection: "keep-alive",
//     "transfer-encoding": "chunked",
//   },
//   body: "e\r\nData received\n\r\n0",
// }

//

这是一个最简单的 ResponseParser 仅仅能用来处理 application/x-www-form-urlencoded 格式的数据，而且未做异常处理
body 返回也不是我们所需要的

由于HTTP/1.1 中允许服务端分块传输响应体，每个块以十六进制数字表示长度，后面跟该长度的数据块，再跟一个空行，最后一个块长度为 0 表示结束
这里 e 是十六进制的14，表示后面有14字节数据。

接下来我们来拆分头部和data的处理， 编写拆分函数

ChunkedBodyParser

我们需要处理 Transfer-Encoding: chunked 这种响应体

// ChunkedBodyParser.js
class ChunkedBodyParser {
  constructor() {
    this.WAITING_LENGTH = 0;   // 等待读取块长度
    this.WAITING_LENGTH_LINE_END = 1;
    this.READING_CHUNK = 2;    // 读取块数据
    this.WAITING_NEW_LINE = 3;
    this.WAITING_NEW_LINE_END = 4;
    this.length = 0;           // 当前块长度
    this.content = [];         // 存储数据块
    this.isFinished = false;
    this.current = this.WAITING_LENGTH;
  }

  receiveChar(char) {
    if (this.current === this.WAITING_LENGTH) {
      if (char === '\r') {
        if (this.length === 0) {
          this.isFinished = true;  // 读取结束
        }
        this.current = this.WAITING_LENGTH_LINE_END;
      } else {
        this.length *= 16;
        this.length += parseInt(char, 16);
      }
    } else if (this.current === this.WAITING_LENGTH_LINE_END) {
      if (char === '\n') {
        this.current = this.READING_CHUNK;
      }
    } else if (this.current === this.READING_CHUNK) {
      this.content.push(char);
      this.length--;
      if (this.length === 0) {
        this.current = this.WAITING_NEW_LINE;
      }
    } else if (this.current === this.WAITING_NEW_LINE) {
      if (char === '\r') {
        this.current = this.WAITING_NEW_LINE_END;
      }
    } else if (this.current === this.WAITING_NEW_LINE_END) {
      if (char === '\n') {
        this.current = this.WAITING_LENGTH;
      }
    }
  }

  getBody() {
    return this.content.join('');
  }
}


// request.js 只展示diff部分 其他和之前保持不变

class ResponseParser {
  ...
  constructor() {
    ...
    this.bodyParser = null;
    ...
  }

  recieve(string) {
    ...

    if (!bodyPart) return;

    ..

    // 修改body的处理方式
    if (this.response.headers["transfer-encoding"] === "chunked") {
      this.bodyParser = new ChunkedBodyParser();
      for (let char of bodyPart) {
        this.bodyParser.receiveChar(char);
      }
      this.response.body = this.bodyParser.getBody();
    } else {
      this.response.body = bodyPart;
    }
    ..
  }
  ...
  
  /**
   * console.log(response, "response");
   * 解析结果
   * {
  statusLine: 'HTTP/1.1 200 OK',
  statusCode: 200,
  statusText: 'OK',
  headers: {
    'content-type': 'text/html',
    date: 'Mon, 26 May 2025 07:20:51 GMT',
    connection: 'keep-alive',
    'transfer-encoding': 'chunked'
  },
  body: '{"message":"OK","data":{"name":"zhangsan"}}'
}
   * /
}

HeaderParser

// HeaderParser.js

const HeaderParserStates = {
  STATUS_LINE: 'STATUS_LINE',               // 解析状态行
  STATUS_LINE_END: 'STATUS_LINE_END',       // 状态行结束
  HEADER_NAME: 'HEADER_NAME',               // 字段名
  HEADER_SPACE: 'HEADER_SPACE',             // 冒号后的空格
  HEADER_VALUE: 'HEADER_VALUE',             // 字段值
  HEADER_LINE_END: 'HEADER_LINE_END',       // 单个头部字段结束
  HEADERS_END: 'HEADERS_END',               // 所有头部结束（空行）
};

class HeaderParser {
  constructor() {
    this.state = HeaderParserStates.STATUS_LINE;

    this.statusLine = '';
    this.statusCode = 0;
    this.statusText = '';
    this.headers = {};
    this.headerName = '';
    this.headerValue = '';
    this.isFinished = false;
  }

  receiveChar(char) {
    const states = HeaderParserStates;

    if (this.state === states.STATUS_LINE) {
      if (char === '\r') {
        this.state = states.STATUS_LINE_END;
      } else {
        this.statusLine += char;
      }

    } else if (this.state === states.STATUS_LINE_END) {
      if (char === '\n') {
        const match = this.statusLine.match(/HTTP\/1\.1\s(\d{3})\s(.*)/);
        if (match) {
          this.statusCode = parseInt(match[1]);
          this.statusText = match[2];
        }
        this.state = states.HEADER_NAME;
      }

    } else if (this.state === states.HEADER_NAME) {
      if (char === ':') {
        this.state = states.HEADER_SPACE;
      } else if (char === '\r') {
        this.state = states.HEADERS_END;
      } else {
        this.headerName += char;
      }

    } else if (this.state === states.HEADER_SPACE) {
      if (char === ' ') {
        this.state = states.HEADER_VALUE;
      }

    } else if (this.state === states.HEADER_VALUE) {
      if (char === '\r') {
        this.headers[this.headerName.toLowerCase()] = this.headerValue;
        this.headerName = '';
        this.headerValue = '';
        this.state = states.HEADER_LINE_END;
      } else {
        this.headerValue += char;
      }

    } else if (this.state === states.HEADER_LINE_END) {
      if (char === '\n') {
        this.state = states.HEADER_NAME;
      }

    } else if (this.state === states.HEADERS_END) {
      if (char === '\n') {
        this.isFinished = true;
      }
    }
  }

  getResult() {
    return {
      statusLine: this.statusLine,
      statusCode: this.statusCode,
      statusText: this.statusText,
      headers: this.headers,
    };
  }
}

module.exports = {
  HeaderParserStates,
  HeaderParser,
};

使用

class ResponseParser {
  recieve(string) {
    for(let char of string) {
      if (!this.headerParser.isFinished) {
        this.headerParser.receiveChar(char);
        continue;
      }
      


      if (this.isFinished && !this.response) {
      const headerResult = this.headerParser.getResult();
      this.response = {
        statusLine: headerResult.statusLine,
        statusCode: headerResult.statusCode,
        statusText: headerResult.statusText,
        headers: headerResult.headers,
       ...
      };
    }
    }
  }
}

总结

通过逐步构建一个简单的 HTTP 响应解析器，实现了以下目标

• 使用状态机处理响应头与 Chunked Body
• 理解 HTTP 响应数据结构
• 支持结构化输出，模拟真实服务返回格式

完整代码

相关资料

1. 入门 Node.js Net 模块构建 TCP 网络服务
2. Node.js Net 模块