如何查看EJS/HTML表单发往Express后端的帧/数据包并可视化数据传输？

一、通过Express中间件捕获请求数据（应用层） #

• 自定义中间件，在请求到达路由前拦截，打印请求的分块传输信息、协议头：

  app.use((req, res, next) => {
    // 记录请求协议和传输编码
    console.log(`请求协议: ${req.protocol}`);
    console.log(`传输编码: ${req.headers['transfer-encoding'] || '无分块'}`);
    
    // 监听数据分块
    let chunkCount = 0;
    req.on('data', (chunk) => {
      chunkCount++;
      console.log(`收到第${chunkCount}个数据块，大小: ${chunk.length}字节`);
    });
    
    req.on('end', () => {
      console.log(`数据传输完成，共${chunkCount}个数据块`);
    });
    next();
  });
  

• 该方法可直接在后端日志中查看数据分块的数量和大小，对应HTTP协议的分块传输（Transfer-Encoding: chunked）情况。

二、利用Node.js底层HTTP模块监听（传输层/应用层边界） #

• Express基于Node.js的http模块，可直接在创建服务器时监听更底层的请求事件：

  const http = require('http');
  const express = require('express');
  const app = express();
  
  const server = http.createServer(app);
  server.on('request', (req, res) => {
    // 打印TCP连接相关信息和请求行
    console.log(`新TCP连接，客户端地址: ${req.socket.remoteAddress}`);
    console.log(`请求行: ${req.method} ${req.url} HTTP/${req.httpVersion}`);
    
    // 监听数据分块
    let chunkCount = 0;
    req.on('data', (chunk) => {
      chunkCount++;
      console.log(`分块${chunkCount}: ${chunk.length}字节`);
    });
  });
  
  server.listen(3000);
  

• 这里可查看TCP连接的客户端地址，以及HTTP请求的版本和方法，帮助理解从TCP到HTTP的传输路径。

三、可视化传输过程的简单实现 #

• 若需做可视化展示（如作业演示），可将中间件捕获到的分块数据、协议信息存储，再通过EJS渲染成页面：
  1. 中间件中收集传输日志：

     const transferLogs = [];
     app.use((req, res, next) => {
       const log = {
         timestamp: new Date().toISOString(),
         protocol: req.protocol,
         method: req.method,
         chunkCount: 0,
         chunks: []
       };
       req.on('data', (chunk) => {
         log.chunkCount++;
         log.chunks.push({ size: chunk.length });
       });
       req.on('end', () => {
         transferLogs.push(log);
       });
       next();
     });
     

  2. 创建可视化路由：

     app.get('/transfer-log', (req, res) => {
       res.render('transfer-log', { logs: transferLogs });
     });
     

  3. 在transfer-log.ejs模板中渲染成直观展示：

     <h1>前端-后端数据传输日志</h1>
     <% logs.forEach(log => { %>
       <div class="log-item">
         <p>时间: <%= log.timestamp %></p>
         <p>协议: <%= log.protocol %> | 请求方法: <%= log.method %></p>
         <p>数据分块数: <%= log.chunkCount %></p>
         <ul>
           <% log.chunks.forEach((chunk, index) => { %>
             <li>第<%= index+1 %>块: <%= chunk.size %>字节</li>
           <% }) %>
         </ul>
       </div>
     <% }) %>
     

• 此方式可在浏览器中直观查看每次请求的分块情况和协议信息。

四、系统级抓包工具查看帧/数据包（网络层） #

• 若需查看更底层的TCP/IP帧或数据包，可使用系统自带工具：
  • Windows：命令提示符运行tcpdump（需安装）或netsh trace start capture=yes，完成后导出分析。
  • macOS/Linux：终端运行tcpdump port 3000（替换为你的Express服务端口），可查看该端口下所有数据包的源地址、目的地址、协议类型和数据大小。
• 该方法能帮助理解数据从前端通过TCP/IP协议传输到后端的完整路径。

内容的提问来源于stack exchange，提问作者user18198641