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

Question

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

我无法弄清楚为什么 chrome 和 node-http2 服务器之间的下一个协议(protocol)协商失败。我怀疑是自签名证书或 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 port 8989

tcpdump 也有类似的输出

tcpdump -i eth0 -nns 0 "dst port 8989 and 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 yield ？

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

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

辛格

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 protocol 的值为http/1.1 (next_proto_status and 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);

Answer 1

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

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

单一连接本身最初不会给您带来太多的延迟改善，至少在它的流量控制窗口增加之前不会。单一连接的要点是它可以将窗口增大到最佳大小，并且您不再为每个新连接创建缓慢的启动延迟。

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

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

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