本篇內(nèi)容介紹了“WebTransport的傳輸模式是什么”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

我們提供的服務(wù)有：網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、鶴慶ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的鶴慶網(wǎng)站制作公司

1.什么是WebTransport？

WebTransport是使用 HTTP3 從服務(wù)器發(fā)送和接收數(shù)據(jù)的協(xié)議框架。 類似于 WebSockets，但支持多流、單向流、無序傳輸，支持可靠和不可靠的數(shù)據(jù)傳輸方式。

WebTransport能否替代WebSockets？

WebTransport 是一個 Web API，底層使用 HTTP/3 協(xié)議實現(xiàn)雙向傳輸。它用于客戶端和 HTTP/3 服務(wù)器之間的雙向通信機制。支持通過數(shù)據(jù)報 API實現(xiàn)不可靠數(shù)據(jù)傳輸方式，支持流式 API 實現(xiàn)可靠數(shù)據(jù)傳輸。同時在客戶端、服務(wù)端不需要連接的場景下關(guān)閉已有連接。

2.WebTransport的兩種傳輸模式

2.1 數(shù)據(jù)報方式

數(shù)據(jù)報方式適合發(fā)送、接收不需要嚴(yán)格保證交付的數(shù)據(jù)。單個數(shù)據(jù)包的大小受到底層連接的最大傳輸單元限制，從而無法保證傳輸成功，如果成功傳輸，也可能以任意順序抵達(dá)。這些特性使數(shù)據(jù)報 API 成為低延遲、盡全力傳輸?shù)睦硐脒x擇?？梢詫?shù)據(jù)傳輸方式視為用戶數(shù)據(jù)報協(xié)議 (UDP) 消息，但經(jīng)過加密和擁塞控制。

// 發(fā)送數(shù)據(jù)報
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);
// 從服務(wù)器讀取數(shù)據(jù)報
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 提供可靠、有序的數(shù)據(jù)傳輸，非常適合需要發(fā)送或接收一個或多個有序數(shù)據(jù)流的場景。使用多個 WebTransport 流類似于建立多個 TCP 連接，但由于 HTTP/3 在底層使用了輕量級的 QUIC 協(xié)議，因此新建、關(guān)閉連接的成本較低。

發(fā)送流

// 發(fā)送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();
  // 所有數(shù)據(jù)已經(jīng)傳輸
  // await writer.abort();
  // 如果調(diào)用abort并非所有數(shù)據(jù)都寫入
} 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
// 用于讀取服務(wù)器發(fā)送的 Uint8Array 實例
const reader = rs.getReader();
while (true) {
  const {done, value} = await reader.read();
  if (done) {
    break;
  }
  // 值為 ReceiveStream 的一個實例
  await readFrom(value);
}

雙向流

雙向流可由服務(wù)器或客戶端創(chuàng)建：

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() 方法偵聽服務(wù)器創(chuàng)建的 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發(fā)展與瀏覽器支持

3.1 WebTransport發(fā)展歷程

WebTransport發(fā)展歷程

WebTransport在2019年5月左右首次被提出，最新一次更新是在2023年1月24號，因此從更新時間、更新頻率來看，目前該協(xié)議還處于變更期和快速發(fā)展期，但是值得開發(fā)者持續(xù)關(guān)注。

3.2 瀏覽器支持

目前WebTransport的整體瀏覽器支持率達(dá)到了70.29%左右，Chrome>=97、Edge>=98、Opera>=83等主流瀏覽器都已經(jīng)支持，除了Firefox，最新的111版本還沒有支持。

WebTransport的整體瀏覽器支持率達(dá)到了70.29%左右

4.WebSockets謝幕？

WebSockets 圍繞單一、可靠、有序的消息流建模，有很多的應(yīng)用場景。當(dāng)然，這些特性 WebTransport 的流式 API 也可以提供。相比之下，WebTransport 的數(shù)據(jù)報 API 提供低延遲交付，但無法保證可靠性、傳輸順序，因此還不能直接替代 WebSocket。

但是，通過數(shù)據(jù)報 API 或多個并發(fā) Streams API 實例使用 WebTransport，不必?fù)?dān)心隊列阻塞等WebSockets經(jīng)常遇到的問題。此外，在建立WebTransport新連接時還有性能優(yōu)勢，因為底層 QUIC 握手比通過 TLS 啟動 TCP 更快。

但是，由于WebTransport技術(shù)尚未完全敲定，開發(fā)工具較少，生態(tài)不完善，可能還會持續(xù)一段時間。 現(xiàn)在預(yù)測 WebTransport 是否會替代 Websockets 還為時過早，但第一批使用它的團隊完全有機會構(gòu)建一些開創(chuàng)性的東西。雖然沒有迫切需要切換，但開發(fā)人員應(yīng)該為未來的項目密切關(guān)注它，并準(zhǔn)備好在最合適的情況下使用它。

“WebTransport的傳輸模式是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！