如何在浏览器中实现 HTTP/2 流连接？答案

【问题标题】：How to implement HTTP/2 stream connection in browser?如何在浏览器中实现 HTTP/2 流连接？
【发布时间】：2019-02-15 19:06:35
【问题描述】：

如今，HTTP/2 的性能正在上升。

Node.js 的最新版本很好地支持了 HTTP/2。

https://nodejs.org/api/http2.html

但我不知道如何在浏览器环境中实现 HTTP/2 客户端。

https://nodejs.org/api/http2.html#http2_client_side_example

上面的链接显示了如何在 Node.js 客户端中使用它。

如何在浏览器中实现同一个客户端？

【问题讨论】：

我认为 http2 客户端在浏览器上不可用。
如果服务器支持 http/2，浏览器将使用 http/2 - 不需要“实现客户端”.. 例如，您只需使用 XHR 或 fetch
@JaromandaX fetch 或 XHR 无法控制从服务器发送的推送承诺。我认为在浏览器上提供 http2 客户端仍然有意义。
或者你可以在这种情况下使用 websockets @Lewis（什么是推送承诺？）
@JaromandaX 我的意思是如果没有 http2 客户端，您将无法控制通过 http2 请求提供的文件（用于确定每个服务器推送状态的事件、每个服务器推送的响应等）

标签： javascript node.js http2

【解决方案1】：

您目前无法执行此操作。一般来说，HTTP/2 对网页和 Web 应用程序的使用应该是透明的，因此不需要实现低级别的 HTTP/2 流和连接细节。这是其实现方式之美的一部分 - 浏览器负责所有这些，而网页和 Web 应用程序无需知道使用的是 HTTP/1.1 还是 HTTP/2。

一个可能的例外是 HTTP/2 推送，作为 Web 超文本应用程序技术工作组 (WHATWG) 的一部分，有人提议以编程方式公开 HTTP/2 推送：https://github.com/whatwg/fetch/issues/51。尽管这方面的活动似乎已经完全下降。因为实现推送通知 API 有一些复杂性。总而言之HTTP/2 push is complicated, especially because of different browser implementations and bugs，因此尝试向 Web 应用程序公开推送消息将会很复杂。也有很多人认为 HTTP/2 推送的用途有限，并且对于大多数用例来说有更好的技术，例如 resource hints（用于请求 HTTP 资源）或 Web 套接字（用于双向通信）。 Chrome are even experimenting with switching it off completely.

除了推送之外，优先级可能是向 Web 应用程序公开低级别 HTTP/2 详细信息的另一个用例，也许 priority hints 最终会为此提供一个映射，而不会将其绑定到 HTTP/2（因此它可以被使用在 HTTP/1.1、QUIC 或将来出现的任何东西下）。

所以恕我直言，我不认为迫切需要允许从 Web 应用程序创建或管理 HTTP/2 连接，就像没有简单的方法 (AFAIK) 创建 TCP 或 UDP 连接一样来自 JavaScript。虽然情况仍然如此，但我认为我们不会看到太多努力来创建这样的实现。即使您链接到的 HTTP/2 客户端也是非常基本的，并且只是发出 HTTP 请求 - 浏览器已经允许您这样做（尽管我很欣赏如果您想要低于此级别而浏览器不这样做，节点会公开更多细节）。在大多数情况下，HTTP/2 流处理和协议的其他低级细节可能最好由浏览器本身透明地处理 - 就像现在一样。

【讨论】：

在浏览器中需要像 HTTP/2 这样的双向流可能是因为想要重新创建 websocket 功能 - 目前使用 HTTP/2 是不可能的 - （真正的双向交换二进制数据）。
WebSockets 现在可以通过 HTTP/2 (tools.ietf.org/html/rfc8441) 实现，尽管目前还没有浏览器实现它们（Firefox 显然已经在 v65 中推出 - bugzilla.mozilla.org/show_bug.cgi?id=1434137 而 Chrome 似乎已经停滞不前@ 987654328@)。无论如何，Websockets 可能是更好的选择，而不是使用 HTTP，后者有更多开销：stackoverflow.com/questions/50956757/…
很高兴知道这一点，感谢您的提示 - 我希望 Chrome 在基于 HTTP/2 的 websockets 方面会赶上 Firefox。好消息！
我的用例是一个基于 wasm 的 webapp，我想在其中使用 gRPC 与服务进行通信。

【解决方案2】：

在客户端：

您无需在浏览器中进行任何操作，只需使用已经支持 HTTP 2.0 协议的浏览器https://caniuse.com/#search=http2

在服务器端：

取决于你使用的服务器，你需要激活一些模块和配置一些文件，这里你可以看到一些服务器配置的链接：https://github.com/http2/http2-spec/wiki/Implementations

关于服务器推送功能：

同样，这取决于服务器，但需要注意的是，您可以配置：手动推送或自动推送（Auto Push）

例子：

手动推送

server {    
    # whenever a client requests demo.html, also push
    # /style.css, /image1.jpg and /image2.jpg
    location = /demo.html {
        http2_push /style.css;
        http2_push /image1.jpg;
        http2_push /image2.jpg;
    }
}

自动推送

server { 
    # Intercept Link header and initiate requested Pushes
    location = /myapp {
        proxy_pass http://upstream;
        http2_push_preload on;
    }
}

//httpd.conf or .htaccess (cuando se cargue un html)
<FilesMatch "\.html$">
    Header set Link "</css/styles.css>; rel=preload; as=style"
<FilesMatch>

【讨论】：