WebTransport是为替代WebSockets而生？

　　大家好，很高兴又见面了，我是前端进阶，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
　　WebTransport能否替代WebSockets？前言
　　WebTransport是一种新规范，使用HTTP3从服务器发送和接收数据的协议框架。类似于WebSockets，但支持多流、单向流、无序传输以及可靠不可靠传输。目前Chrome、Edge、Opera浏览器已经支持WebTransport，火狐、Safari还未支持，具体如下图：
　　WebTransport的浏览器支持情况1。WebTransport成为WebSocket替代方案？
　　WebSockets是一种通过持久的单套接字socket在客户端和服务器之间实现全双工通信的技术，它允许低延迟、实时更新。
　　而较新的WebTransport有以下特性：可靠数据传输：发送方会收到数据传输成功或失败的通知，失败的传输通常会重新发送，直到成功为止，然后发送下一个数据包。不可靠传输：没有传输成功的确认，丢失数据包不会被重新传送。这在注重传输速度、而非传输完整性的场景下可用，比如视频聊天。一个连接创建多个流：WebSockets为每个连接创建一个流，而WebTransport可以在一个连接上创建多个流。它避免了WebSockets所遭受的队头阻塞延迟，并且在创建连接时占用的资源较少。
　　WebSockets以HTTP1。1协议开始，但WebTransport可在多种不同的协议之上工作，包括一些WebSockets不支持的协议。HTTP3：HTTP3是万维网使用的传输协议的新版本。HTTP3使用QUIC协议进行传输层数据交换，它有几个优点。QUIC可以防止队头阻塞延迟，在许多情况下提高网络性能。这是WebSockets的限制。异步WebWorkers多线程：通过WebTransport，编码人员还可以使用promises和异步函数的await关键字等功能，同时API也在WebWorkers中运行，支持多线程。
　　下面是WebTransport工作组文档中的异步函数示例。consturlhttps：example。com：4999wt；asyncfunctioninitTransport（url）｛实例化WebTransport连接consttransportnewWebTransport（url）；Theconnectioncanbeusedoncereadyfulfillsawaittransport。ready；｝asyncfunctioncloseTransport（transport）｛关闭连接try｛awaittransport。closed；console。log（TheHTTP3connectionto｛url｝closedgracefully。）；｝catch（error）｛console。error（TheHTTP3connectionto｛url｝closeddueto｛error｝。）；｝｝2。WebTransport使用场景？2。1加密流媒体
　　WebTransport的流API允许您创建连接以发送有序数据。由于WebTransport使用QUIC协议，与TCP相比，打开和关闭这些连接所需的资源更少。
　　您还可以做一些事情，例如更安全地提供流媒体。WebTransport有多种安全措施，例如要求使用Origin标头以及通过传输参数进行选择性加入。2。2多人游戏
　　WebTransport适用于HTTP2、HTTP3和QUIC协议。它可以通过HTTP乱序接收数据，并且可以自己请求数据或监听服务器推送的数据。它可以可靠地和不可靠地做到这一点。
　　通过WebTransport的双向流，服务器推送的数据延迟非常低，这对游戏开发来说是一个很大的优势。它还可以缩短云游戏服务的响应时间。2。3传感器数据
　　许多物联网（IOT）设备记录需要传输到服务器的数据，而WebTransport的潜在用途是使用低延迟方法来传输这些数据。物联网设备经常定期发送少量数据，消耗更少的资源对设备的电池寿命和网络拥塞都有好处。3。WebTransport特性？
　　一起看看WebTransport提供了哪些具体特性和功能。虽然该规范仍处于公开草案阶段，但已完全可用。除了QUIC协议之外，还有一个API可以让浏览器控制流和数据报。API仅支持HTTPS，以加强安全性。3。1QUIC
　　QUIC是QuickUDPInternetConnections的缩写，谷歌发明的新传输协议。与TCP相比，QUIC可以减少延迟。从表面上看，QUIC非常类似于在UDP上实现的TCPTLSHTTP2。由于TCP是在操作系统内核和中间件固件中实现的，因此对TCP进行重大更改几乎是不可能的。
　　但是，由于QUIC建立在UDP之上，因此没有这种限制。QUIC可以实现可靠传输，而且相比于TCP，它的流控功能在用户空间而不在内核空间，那么使用者就不受限于CUBIC或是BBR，而是可以自由选择，甚至根据应用场景自由调整优化。
　　QUIC与现有TCPTLSHTTP2方案相比，有以下几点特征：利用缓存，显著减少连接建立时间改善拥塞控制，拥塞控制从内核空间到用户空间没有headofline阻塞的多路复用前向纠错，减少重传连接平滑迁移，网络状态的变更不会影响连接断线
　　Chrome原生支持QUIC，并且启用QUIC的服务器会一直支持0RTT握手，在Chrome中可以通过如下命令打开QUIC配置：chrome：flags浏览器直接访问
　　WebTransport也可以在没有QUIC的情况下运行在HTTP2或HTTP3之上。它还可以使用HTTP2作为后备方案，让您可以利用WebTransport的优势，而无需考虑网络。3。2数据报
　　WebTransport主要处理数据报和流。数据报是一个独立的数据包，可以以任何特定顺序到达。数据报发送不可靠，如果某些数据丢失，连接也可以应付。WebTransport规范允许您使用maxDatagramSize属性限制数据报的大小。
　　maxDatagramSize的浏览器支持情况
　　WebTransport对象有一个数据报对象，可以通过其可读和可写属性访问该对象。数据报可以排队，您也可以创建promise等待数据报传输。
　　WebTransport对象还包括状态数据，指示它们是正在连接、已连接、已关闭还是已失败。3。3Stream
　　流允许您发送有序、可靠的数据。您可以建立流并让服务器将此内容推送到客户端。它允许低延迟、实时通信。
　　在API中，WebTransport对象具有用于表示不同类型流的其他对象的插槽。其中包括SendStream、ReceiveStream和BidirectionalStream对象，目前这些还只存在于草案中。比如下面的BidirectionalStream：asyncfunctionsetUpBidirectional（）｛conststreamawaittransport。createBidirectionalStream（）；streamisaWebTransportBidirectionalStreamstream。readableisaReadableStreamconstreadablestream。readable；stream。writableisaWritableStreamconstwritablestream。writable；｝
　　使用流，您还可以将接收到的数据通过管道传输到处理程序中，例如TextDecoderStream，它将数据转换为您的应用程序可以轻松使用的格式。3。4发送流
　　SendStream对象是一种用于传出数据的WritableStream。它们存储流对象，但SendStream对象还包含一个promise，它定义了它将采取的操作，例如关闭或中止。SendStream对象还包含一个插槽，用于将它们附加到HTTP3传输层。向服务器发送两个Uint8Arrayconststreamawaittransport。createSendStream（）；constwriterstream。writable。getWriter（）；constdata1newUint8Array（〔65，66，67〕）；constdata2newUint8Array（〔68，69，70〕）；writer。write（data1）；writer。write（data2）；try｛awaitwriter。close（）；console。log（Alldatahasbeensent。）；｝catch（error）｛console。error（Anerroroccurred：｛error｝）；｝3。5接收流
　　ReceiveStream对象是一种处理传入数据的ReadableStream。ReceiveStream对象的结构类似于SendStream对象，具有流槽和传输槽。但是，它不包括promise。asyncfunctionreadFrom（receiveStream）｛constreaderreceiveStream。readable。getReader（）；while（true）｛const｛done，value｝awaitreader。read（）；if（done）｛break；｝值为Uint8Arrayconsole。log（value）；｝｝constrstransport。receiveStreams（）；constreaderrs。getReader（）；while（true）｛const｛done，value｝awaitreader。read（）；if（done）｛break；｝值为ReceiveStream的一个实例awaitreadFrom（value）；｝3。6双向流
　　双向流将发送流和接收流组合到一个对象中，这使您可以在一个地方管理双向通信。对象具有可读和可写的属性，对应于上面讨论的ReceiveStream和SendStream对象。
　　这些属性使它们能够处理双向发送的数据。您读取传入流并写入传出流。3。7单向流
　　您还可以创建单向流。IncomingUnidirectionalStreams是由多个ReceiveStreams组成的ReadableStreams。您可以调用createUnidirectionalStream（）来创建传出等效项。asyncfunctionwriteData（）｛conststreamawaittransport。createUnidirectionalStream（）；constwriterstream。writable。getWriter（）；constdata1newUint8Array（〔65，66，67〕）；constdata2newUint8Array（〔68，69，70〕）；writer。write（data1）；writer。write（data2）；try｛awaitwriter。close（）；console。log（Alldatahasbeensent。）；｝catch（error）｛console。error（Anerroroccurred：｛error｝）；｝｝4。WebTransport可以取代WebSockets吗？
　　WebTransport已经是WebSockets的可行替代品，没有线头阻塞、延迟稍低以及多协议方法的多功能性在许多场景中都有好处。
　　但是，由于WebTransport技术尚未完全敲定，开发工具较少，并且会持续一段时间。现在预测WebTransport的用途还为时过早，但第一批使用它的团队完全有机会构建一些开创性的东西。
　　虽然没有迫切需要切换，但开发人员应该为未来的项目密切关注它，并准备好在最合适的情况下使用它。参考资料
　　https：ably。comblogcanwebtransportreplacewebsockets
　　https：blog。p2hp。comarchives10031
　　about：blank