iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >浏览器支持WebTransport?它能替代WebSockets?
  • 270
分享到

浏览器支持WebTransport?它能替代WebSockets?

websocket浏览器 2023-05-14 22:05:38 270人浏览 八月长安
摘要

WEBTransport 协议为此提供了一个单一的传输对象,该对象抽象出具有一组灵活功能的特定底层协议,包括可靠的单向、双向流,以及不可靠的数据报能力。1.什么是WebTransport?WebTransport是使用 Http3 从服务器

WEBTransport 协议为此提供了一个单一的传输对象,该对象抽象出具有一组灵活功能的特定底层协议,包括可靠的单向、双向流,以及不可靠的数据报能力。

1.什么是WebTransport?

WebTransport是使用 Http3 从服务器发送和接收数据的协议框架。 类似于 websockets,但支持多流、单向流、无序传输,支持可靠和不可靠的数据传输方式。

5ca64f6f72db1c596795c72e090f92d.jpg

WebTransport能否替代WebSockets?

WebTransport 是一个 Web api,底层使用 HTTP/3 协议实现双向传输。它用于客户端和 HTTP/3 服务器之间的双向通信机制。支持通过数据报 API实现不可靠数据传输方式,支持流式 API 实现可靠数据传输。同时在客户端、服务端不需要连接的场景下关闭已有连接。

2.WebTransport的两种传输模式

2.1 数据报方式

数据报方式适合发送、接收不需要严格保证交付的数据。单个数据包的大小受到底层连接的最大传输单元限制,从而无法保证传输成功,如果成功传输,也可能以任意顺序抵达。这些特性使数据报 API 成为低延迟、尽全力传输的理想选择。可以将数据传输方式视为用户数据报协议 (UDP) 消息,但经过加密和拥塞控制。

// 发送数据报
const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
const data2 = new Uint8Array([68, 69, 70]);
// Uint8Array
writer.write(data1);
writer.write(data2);
// 从服务器读取数据报
const reader = transport.datagrams.readable.getReader();
while (true) {
  const {value, done} = await reader.read();
  // done则退出
  if (done) {
    break;
  }
  // 值为 Uint8Array。
  console.log(value);
}

2.2 流式API方式

流式 API 提供可靠、有序的数据传输,非常适合需要发送或接收一个或多个有序数据流的场景。使用多个 WebTransport 流类似于建立多个 tcp 连接,但由于 HTTP/3 在底层使用了轻量级的 QUIC 协议,因此新建、关闭连接的成本较低。

发送流

// 发送Uint8Array
const stream = await transport.createSendStream();
const writer = stream.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
const data2 = new Uint8Array([68, 69, 70]);
// 实例化Uint8Array
writer.write(data1);
writer.write(data2);
try {
  await writer.close();
  // 所有数据已经传输
  // await writer.abort();
  // 如果调用abort并非所有数据都写入
} catch (error) {
  console.error(`An error occurred: ${error}`);
}

读取流

async function readFrom(receiveStream) {
  const reader = receiveStream.readable.getReader();
  while (true) {
    const {done, value} = await reader.read();
    if (done) {
      break;
    }
    // 值为 Uint8Array
    console.log(value);
  }
}

const rs = transport.receiveStreams();
// 返回一个 ReadableStream,ReadableStream 的每个块又是一个 ReceiveStream
// 用于读取服务器发送的 Uint8Array 实例
const reader = rs.getReader();
while (true) {
  const {done, value} = await reader.read();
  if (done) {
    break;
  }
  // 值为 ReceiveStream 的一个实例
  await readFrom(value);
}

双向流

双向流可由服务器或客户端创建:

async function setUpBidirectional() {  const stream = await transport.createBidirectionalStream();  // stream 是 WebTransportBidirectionalStream
  // stream.readable是ReadableStream
  const readable = stream.readable;  // stream.writable是WritableStream
  const writable = stream.writable;
}

可以使用 WebTransport 实例的
receiveBidirectionalStreams() 方法侦听服务器创建的 BidirectionalStream,该方法返回 ReadableStream。该ReadableStream 的每个块又是一个 BidirectionalStream。

const rs = transport.receiveBidrectionalStreams();const reader = rs.getReader();while (true) {  const {done, value} = await reader.read();  if (done) {    break;
  }  // value 是 BidirectionalStream
  // value.readable 是 ReadableStream
  // value.writable 是 WritableStream}

3.WebTransport发展与浏览器支持

3.1 WebTransport发展历程

79465a6e644f3460d42646bf23f22f5.jpg

WebTransport发展历程

WebTransport在2019年5月左右首次被提出,最新一次更新是在2023年1月24号,因此从更新时间、更新频率来看,目前该协议还处于变更期和快速发展期,但是值得开发者持续关注。

3.2 浏览器支持

目前WebTransport的整体浏览器支持率达到了70.29%左右,Chrome>=97、Edge>=98、Opera>=83等主流浏览器都已经支持,除了Firefox,最新的111版本还没有支持。

aa1a588258987ea885f1dabe119685c.jpg

WebTransport的整体浏览器支持率达到了70.29%左右

4.WebSockets谢幕?

WebSockets 围绕单一、可靠、有序的消息流建模,有很多的应用场景。当然,这些特性 WebTransport 的流式 API 也可以提供。相比之下,WebTransport 的数据报 API 提供低延迟交付,但无法保证可靠性、传输顺序,因此还不能直接替代 WebSocket。

但是,通过数据报 API 或多个并发 Streams API 实例使用 WebTransport,不必担心队列阻塞等WebSockets经常遇到的问题。此外,在建立WebTransport新连接时还有性能优势,因为底层 QUIC 握手比通过 TLS 启动 TCP 更快。

但是,由于WebTransport技术尚未完全敲定,开发工具较少,生态不完善,可能还会持续一段时间。 现在预测 WebTransport 是否会替代 Websockets 还为时过早,但第一批使用它的团队完全有机会构建一些开创性的东西。虽然没有迫切需要切换,但开发人员应该为未来的项目密切关注它,并准备好在最合适的情况下使用它。

5.本文总结

本文主要和大家介绍一个全新的通讯协议WebTransport、如何使用、同时与Websockets做了一个对比。因为笔者并没有直接使用过WebTransport,所以只是做了一个基础介绍~

以上就是浏览器支持WebTransport?它能替代WebSockets?的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: 浏览器支持WebTransport?它能替代WebSockets?

本文链接: https://www.lsjlt.com/news/207053.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 浏览器支持WebTransport?它能替代WebSockets?
    WebTransport 协议为此提供了一个单一的传输对象,该对象抽象出具有一组灵活功能的特定底层协议,包括可靠的单向、双向流,以及不可靠的数据报能力。1.什么是WebTransport?WebTransport是使用 HTTP3 从服务器...
    99+
    2023-05-14
    websocket 浏览器
  • golang支持浏览器吗
    golang不支持浏览器,其本身并不支持直接在浏览器中运行,浏览器主要使用JavaScript作为客户端编程语言,golang可以与浏览器进行交互,并在Web开发中发挥重要作用。本文操作环境:Windows10系统、go1.20版本、DEL...
    99+
    2023-07-19
  • 哪些浏览器支持sessionstorage的功能?
    sessionStorage 是Web API 中的一项功能,用于在浏览器中存储和获取临时数据。它可以在当前会话期间保留数据,但是一旦会话结束,数据将被清除。 sessionStorage 的功能在各大主流浏览器中得到了广泛的支...
    99+
    2024-01-15
    浏览器支持
  • HTML5浏览器支持的方法
    这篇文章主要介绍了HTML5浏览器支持的方法的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML5浏览器支持的方法文章都会有所收获,下面我们一起来看看吧。   &...
    99+
    2024-04-02
  • 哪些浏览器支持sessionstorage功能的了解?
    了解哪些浏览器支持sessionstorage功能? 随着网络技术的快速发展,越来越多的网页应用程序需要在浏览器端存储数据,以提供更好的用户体验。其中,sessionstorage是一种在浏览器端存储数据的机制,它可以让开发者在...
    99+
    2024-01-15
    浏览器 功能
  • 浏览器不支持javascript怎么办
    随着互联网的发展,越来越多的网站开始使用JavaScript来增强用户体验和网站功能。然而,当我尝试浏览带有JavaScript内容的网站时,我发现我的浏览器不支持JavaScript,这给我的浏览体验带来了很大的困扰。首先,我想了解原因。...
    99+
    2023-05-14
  • 什么手机浏览器支持javascript
    在现代社会,也许我们无法离开智能手机与网络。作为人们经常使用的工具,我们可以通过手机浏览器浏览网站,阅读文章,听音乐,看电影等等。而JavaScript则是现代网页技术的灵魂,它使网站变得更加生动、交互性更强。因此,什么手机浏览器支持Jav...
    99+
    2023-05-14
  • 怎么让ie浏览器支持html5
    这篇文章主要介绍了怎么让ie浏览器支持html5的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么让ie浏览器支持html5文章都会有所收获,下面我们一起来看看吧。 代码如下...
    99+
    2024-04-02
  • HTML5浏览器支持实例分析
    本篇内容主要讲解“HTML5浏览器支持实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5浏览器支持实例分析”吧! HTML5 浏览器支持 所有...
    99+
    2024-04-02
  • 如何实现让ie浏览器成为支持html5的浏览器
    本篇内容主要讲解“如何实现让ie浏览器成为支持html5的浏览器”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何实现让ie浏览器成为支持html5的浏览器”吧...
    99+
    2024-04-02
  • 不支持css3的浏览器是什么
    小编给大家分享一下不支持css3的浏览器是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言...
    99+
    2023-06-14
  • 目前有哪些浏览器支持html5
    这篇文章将为大家详细讲解有关目前有哪些浏览器支持html5,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。支持Html5的浏览器:Firefox、IE9及其更高版本、Chrome、Safari、Opera、...
    99+
    2023-06-15
  • 如何打开浏览器的JavaScript支持
    随着互联网技术的不断发展,网站变得越来越复杂,JavaScript也成为现代网站开发的一个重要组成部分。但是,在浏览网站时,有些人可能会遇到浏览器不支持JavaScript的情况。那么,如何打开浏览器的JavaScript支持呢?检查浏览器...
    99+
    2023-05-14
  • 怎么检测浏览器是否支持WebWorker
    本篇内容介绍了“怎么检测浏览器是否支持WebWorker”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • 支持legend标签的浏览器有哪些
    本文小编为大家详细介绍“支持legend标签的浏览器有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“支持legend标签的浏览器有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新...
    99+
    2024-04-02
  • 浏览器不支持javascript的解决方法
    这篇文章主要介绍浏览器不支持javascript的解决方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!浏览器不支持javascript的解决办法:首先打开【Internet选项】对话框,选择【安全】选项卡;然后单击...
    99+
    2023-06-14
  • WordPress 5.8将不再支持IE11浏览器吗
    这篇文章主要介绍了WordPress 5.8将不再支持IE11浏览器吗,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。是的。IE11浏览器已发布7年多,目前只有不到1% 用户。...
    99+
    2023-06-15
  • 如何检测浏览器是否支持CSS3
    这篇文章主要介绍“如何检测浏览器是否支持CSS3”,在日常操作中,相信很多人在如何检测浏览器是否支持CSS3问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何检测浏览器是否支...
    99+
    2024-04-02
  • css3支持的浏览器内核是什么
    这篇文章主要介绍“css3支持的浏览器内核是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css3支持的浏览器内核是什么”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • HTML 5浏览器的支持情况有哪些
    本篇内容主要讲解“HTML 5浏览器的支持情况有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML 5浏览器的支持情况有哪些”吧!浏览器支持情况统计Wh...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作