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

关键词：

【中文标题】如何在浏览器中实现 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>

【讨论】：

如何在 Node.js 中实现和使用 HTTP/2

】如何在Node.js中实现和使用HTTP/2【英文标题】：HowtoimplementanduseHTTP/2inNode.js【发布时间】：2020-03-0803:22:33【问题描述】：我有一个node.js应用程序。我使用http来创建服务器，如下所示：...varhttp=require(\'http\');varserver=http.createServer(a... 查看详情

如何在 Chromecast 中实现 Ustream HLS 流？

】如何在Chromecast中实现UstreamHLS流？【英文标题】：HowcanIimplementanUstreamHLSstreaminChromecast?【发布时间】：2015-03-0619:50:55【问题描述】：我一直在尝试在Chromecast中实现直播。使用Ustreamapi，我可以获得HLS流链接。在GoogleCast文档中，... 查看详情

如何在社交网络中实现活动流

】如何在社交网络中实现活动流【英文标题】：Howtoimplementtheactivitystreaminasocialnetwork【发布时间】：2010-11-2911:03:24【问题描述】：我正在开发自己的社交网络，但我在网络上没有找到用户操作流的实现示例...例如，如何过滤每个... 查看详情

如何在张量流中实现提前停止

】如何在张量流中实现提前停止【英文标题】：howtoimplementearlystoppingintensorflow【发布时间】：2018-03-0719:18:08【问题描述】：deftrain():#Modelmodel=Model()#Loss,Optimizerglobal_step=tf.Variable(1,dtype=tf.int32,trainable=False,name=\'global_step\')loss_ 查看详情

如何在 Apache 2.4.18 Server 中实现没有 ssl 的 http2

】如何在Apache2.4.18Server中实现没有ssl的http2【英文标题】：Howtoimplementhttp2withoutsslinApache2.4.18Server【发布时间】：2016-06-3012:07:34【问题描述】：我创建了一个使用HTTP/2协议的网站，该网站在Apache2.4.18HTTP服务器上运行。目前我已经... 查看详情

如何在 Flutter 中实现音频流应用和安全存储

】如何在Flutter中实现音频流应用和安全存储【英文标题】：Howtoimplementaudiostreamingappandsecurestorageinflutter【发布时间】：2019-11-0603:57:38【问题描述】：我现在要使用颤振https://play.google.com/store/apps/details?id=deezer.android.app构建像deezer... 查看详情

如何在 Java Web 应用程序中实现复杂的页面流

】如何在JavaWeb应用程序中实现复杂的页面流【英文标题】：HowtoimplementacomplexpageflowinaJavaWebapplication【发布时间】：2012-11-0404:10:51【问题描述】：我正在尝试将一个相当复杂的页面流（100多个页面）实现为传统的Web应用程序。我... 查看详情

如何在 C++ 中实现观察者设计模式流数据？

】如何在C++中实现观察者设计模式流数据？【英文标题】：HowcanIimplementtheobserverdesignpatternstreamingdatainC++?【发布时间】：2011-07-3013:46:26【问题描述】：我想将数据从服务器连续（流式传输）发送到客户端，而不需要客户端不断循... 查看详情

如何在 Spark 中实现“交叉连接”？

】如何在Spark中实现“交叉连接”？【英文标题】：Howtoimplement"CrossJoin"inSpark?【发布时间】：2014-09-1113:38:22【问题描述】：我们计划将ApachePig代码迁移到新的Spark平台。Pig具有“Bag/Tuple/Field”概念，其行为类似于关系数据... 查看详情

如何从流数据中实现 AudioQueue

】如何从流数据中实现AudioQueue【英文标题】：HowtoimplementAudioQueuefromstreameddata【发布时间】：2018-08-1520:06:27【问题描述】：我正在尝试设置一个音频队列来播放流式音频数据。到目前为止，这就是我所拥有的：varaudioStream=AudioStrea... 查看详情

如何在 Sails.js 中实现连接多方

】如何在Sails.js中实现连接多方【英文标题】：Howtoimplementconnect-multipartyinSails.js【发布时间】：2017-07-2619:01:31【问题描述】：我看过这个使用Node.js(Express.js)的例子：https://github.com/danialfarid/ng-file-upload/wiki/Node-example我的问题是：如... 查看详情

如何在两个表之间的组中实现递归连接？

】如何在两个表之间的组中实现递归连接？【英文标题】：HowcanIimplementthisarecursivejoininagroupbetweentwotables?【发布时间】：2013-02-1814:52:27【问题描述】：我在一个名为AVAILABLE_TEMPLATES的表中有一些杂乱的数据。这是一个简单的例子：... 查看详情

如何在 Laravel 中实现 GoogleOR-Tool？特别是对于“作为最小成本流算法的分配”（Java）

】如何在Laravel中实现GoogleOR-Tool？特别是对于“作为最小成本流算法的分配”（Java）【英文标题】：HowtoimplementGoogleOR-ToolinLaravel?especiallyforthe"AssignmentasaMinCostFlowAlgorithm"(Java)【发布时间】：2019-07-2721:09:22【问题描述】：我... 查看详情

如何在 C#/Silverlight 中实现带通滤波器

】如何在C#/Silverlight中实现带通滤波器【英文标题】：Howtoimplementaband-passfilterinc#/Silverlight【发布时间】：2009-11-0314:37:56【问题描述】：如何在C#中实现带通滤波器？我在Silverlight中使用自定义MediaStreamSource并使用加法合成来产生声... 查看详情

如何在 QML 中实现对象之间的单一连接？

】如何在QML中实现对象之间的单一连接？【英文标题】：HowtoimplementsingleconnectionbetweenobjectsinQML?【发布时间】：2018-12-0615:07:21【问题描述】：在我的Qt应用程序中，我有很多窗口，有时它们需要一个“返回”按钮。此按钮位于Appli... 查看详情

如何在elasticsearch中实现两种类型之间的交叉连接？

】如何在elasticsearch中实现两种类型之间的交叉连接？【英文标题】：Howdoiachievecrossjoinbetweentwotypesinelasticsearch?【发布时间】：2016-03-2319:02:55【问题描述】：SELECTu.Address,c.locality,jaccard_similarity(u.Address,c.locality)asscoreFROMusersuleftjoincomm 查看详情

如何使用 C# 在 access 数据库中实现“右外连接”查询？

】如何使用C#在access数据库中实现“右外连接”查询？【英文标题】：Howtoimplement"RightOuterJoin"queryinaccessdatabaseusingC#?【发布时间】：2012-07-2305:12:46【问题描述】：我想编写RightOuterJoin查询以从access数据库中检索数据。如何... 查看详情

如何在 java jdbc 中实现 sql server 连接池？

】如何在javajdbc中实现sqlserver连接池？【英文标题】：howtoimplementsqlserverconnectionpoolinginjavajdbc?【发布时间】：2017-03-0901:01:02【问题描述】：我试图搜索这个，但现在看来答案可能不再正确了。java-如何使用sqlserver在java中进行连接... 查看详情