如何在浏览器中实现 HTTP/2 流连接?
Posted
技术标签:
【中文标题】如何在浏览器中实现 HTTP/2 流连接?【英文标题】:How to implement HTTP/2 stream connection in browser? 【发布时间】: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 请求提供的文件(用于确定每个服务器推送状态的事件、每个服务器推送的响应等) 【参考方案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,后者有更多开销:***.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>
【讨论】:
以上是关于如何在浏览器中实现 HTTP/2 流连接?的主要内容,如果未能解决你的问题,请参考以下文章