从 chrome 到 node-http2 服务器使用 HTTP/2 时查看多个 TCP 连接

Posted 2023-03-10

【中文标题】从 chrome 到 node-http2 服务器使用 HTTP/2 时查看多个 TCP 连接

【英文标题】：See multiple TCP connections when using HTTP/2 from chrome to node-http2 server

【发布时间】：2015-07-05 07:46:00

【问题描述】：

更新（对于任何对结果感兴趣的人:)

我无法弄清楚为什么 chrome 和 node-http2 服务器之间的下一个协议协商会失败。我怀疑是自签名证书或 ALPN/NPN 支持问题。所以我搬到了golang HTTP/2 implementation。相同的设置完美运行，我看到单个多路 TCP 连接（chrome --> golang）

---

我一直在阅读有关 HTTP/2 以及它如何解决 HTTP/1.1 的延迟问题以及每个主机的单个多路 TCP 连接，因此我决定尝试一下。

实验

创建了一个简单的 html 文件，其中引用了一个 css、一个 js 和几张图片。 Node.js 中一个简单的 http 服务器，为所有这些文件提供服务 使用 chrome 发出 http 请求 在 Ubuntu (tcptrack) 上使用 tcptrack 来跟踪与 http 服务器建立的 TCP 连接。

tcptrack 窗口显示已建立 4 个连接。所以浏览器正在为图像和 css/js 请求打开不同的连接。

我使用 tcpdump 得到了类似的输出。 参考使用的 tcptrack 命令是

tcptrack -d -i eth0 -r 3600 8989端口

和 tcpdump 也显示类似的输出

tcpdump -i eth0 -nns 0 "dst 端口 8989 和 tcp[tcpflags] == tcp-syn"

提供这些文件的简单的多合一 http 服务器如下所示（相关代码）

(function()
  ...........
  var server = http.createServer(function(request, response) 
      ..........
      fs.readFile(filetoRet, function (err,data) 
      if(filePath.indexOf(".jpg") >-1)
        response.writeHead(200, "Content-Type": "image/jpg");
      .....
      
      response.write(data);
      response.end();
      );

   
  );
   

  server.listen(8989);  
)()

之后我尝试使用 http/2。

启用 chrome 标志以发送 http/2 请求 使用node-http2 创建了一个 http/2 服务器 简单的 http 服务器与 http/1.1 的代码相同，只是它使用步骤 2 中安装的 http2 服务器模块。 使用 chrome 发出请求（它必须是符合 HTTP/2 规范的 https 请求） 捕获的 tcptrack/tcpdump 输出

所以，这仍然显示正在建立多个 TCP 连接。此外，如果我增加 html 中的图像数量，连接数也会增加。

所以我不确定如何阅读。这是 HTTP/2 的行为方式（或者这是一个 chrome 错误）？ 有没有更好的方法来使用简单的 http/2 客户端服务器来可视化 HTTP/2 的收益？

注意：我正在为 HTTP/2 服务器使用自签名证书，因此 chrome 在进入页面之前会发出警告，并且可能那些关闭的连接代表它，但我认为它不会影响页面及其组件的方式协议要求

感谢大家耐心阅读本文并感谢任何建议。

灵光

P.S : Wireshark TCP 捕获也不例外。只是我发现在 Wireshark 中隔离流量更难，所以使用了 tcpdump 和 tcptrack。

更新： 更新：查看 chrome://net-internals/ HTTP/2 请求协商失败，它回退到使用 HTTP/1.1。还不明白原因。

chrome内部工具事件展示

t=879052 [st= 0] +HTTP_STREAM_JOB  [dt=19]
                  --> original_url = "https://msinghlinux.ads.com:8900/"
                  --> priority = "HIGHEST"
                  --> url = "https://msinghlinux.ads.com:8900/"
t=879052 [st= 0]   +PROXY_SERVICE  [dt=0]
t=879052 [st= 0]      PROXY_SERVICE_RESOLVED_PROXY_LIST
                      --> pac_string = "DIRECT"
t=879052 [st= 0]   -PROXY_SERVICE
t=879052 [st= 0]   +HOST_RESOLVER_IMPL_REQUEST  [dt=0]
                    --> address_family = 0
                    --> allow_cached_response = true
                    --> host = "msinghlinux.ads.com:8900"
                    --> is_speculative = false
t=879052 [st= 0]      HOST_RESOLVER_IMPL_CACHE_HIT
t=879052 [st= 0]   -HOST_RESOLVER_IMPL_REQUEST
t=879052 [st= 0]   +SOCKET_POOL  [dt=19]
t=879071 [st=19]      SOCKET_POOL_BOUND_TO_CONNECT_JOB
                      --> source_dependency = 26961 (CONNECT_JOB)
t=879071 [st=19]      SOCKET_POOL_BOUND_TO_SOCKET
                      --> source_dependency = 26967 (SOCKET)
t=879071 [st=19]   -SOCKET_POOL
t=879071 [st=19]    HTTP_STREAM_REQUEST_PROTO
                    --> next_proto_status = "negotiated"
                    --> proto = "http/1.1"
t=879071 [st=19]    HTTP_STREAM_JOB_BOUND_TO_REQUEST
                    --> source_dependency = 26910 (URL_REQUEST)
t=879071 [st=19] -HTTP_STREAM_JOB

next协议的值为http/1.1（next_proto_status和proto）。但它没有说明导致这种倒退的谈判失败的原因是什么？ 自签名证书可以是原因吗？

HTTP/2 服务器代码

var options = 
  key: fs.readFileSync('./server.key'),
  cert: fs.readFileSync('./server.crt')
;

options.log = bunyan.createLogger(...);
require('http2').createServer(options,function(request, response) 
      .... same code as http/1.1 server


).listen(8900);

【参考方案1】：

我怀疑您实际上并没有使用 HTTP/2。有一个 FF 插件，我认为 Chrome 有一些选项可以显示地址栏中使用的协议。

请注意，HTTP2 将通过多种方法降低延迟。

最初，单个连接本身不会给您带来太多延迟，至少在流量控制窗口增加之前不会。单一连接的关键在于它可以将其窗口扩大到最佳大小，并且您不会因为每个创建的新连接而出现缓慢的启动延迟。

但 HTTP/2 也有推送机制，服务器可以知道 CSS、JS 和图像与页面相关联，并主动将它们与获取 html 的请求一起推送到客户端。这节省了解析 HTML 然后发送新请求的往返时间。如果资源数量超过 6 个（HTTP1 事实上的连接限制），则可以节省更多的往返行程。

我们在我们的网站上运行 Jetty HTTP2，并且我们有一个演示页面，在 https://webtide.com/http2-tests/push/ 处推送

该图像由许多小图像组成，您往往会看到使用 HTTP/1 单独加载这些图像，但如果使用 HTTP/2，它们会作为一个块加载