什麼是 WebTransport？
WebTransport 是一種基於 HTTP/3 和 QUIC 協議的新型網路傳輸協議，旨在提供更高效、更安全的數據傳輸方式。它支援可靠和不可靠的數據流傳輸，並且可以在同一連線中處理多個數據流，從而避免了隊頭阻塞問題。WebTransport 的主要優勢包括：
低延遲和高吞吐量：WebTransport 使用 QUIC 協議，相較於傳統的 TCP 協議，它減少了連線建立的時間，提高了數據傳輸的效率和速度。
雙向通訊：WebTransport 支援伺服器與應用之間的雙向通訊，使得實時應用如實時聊天、流媒體傳輸等更加高效。
靈活的數據傳輸方式：WebTransport 支援可靠和不可靠的數據傳輸，可以根據具體需求選擇適合的傳輸方式。例如，在需要高可靠性的場景下可以選擇可靠傳輸，在對延遲敏感但可以容忍少量資料丟失的場景下可以選擇不可靠傳輸。
多流複用：WebTransport 允許在同一連線上覆用多個數據流，這不僅提高了資源利用率，還減少了因多次建立連線而導致的開銷。
廣泛的應用場景：WebTransport 適用於多種應用場景，包括實時網頁應用、流媒體傳輸、物聯網數據通信等
與 WebSocket 不同，WebTransport 支援多路複用、流控制，並提供了端到端的加密。
使用案例
1. 雲遊戲
案例：雲遊戲需要快速傳輸遊戲指令和影片流，以確保遊戲的流暢性和響應性。
程式碼：
// 假設伺服器支援 WebTransport
const transport = new WebTransport('wss://example.com/game');
// 開啟一個雙向流
const stream = await transport.createBidirectionalStream();
// 傳送遊戲指令
const writer = stream.writable.getWriter();
await writer.write(new TextEncoder().encode('Game command'));
// 接收遊戲狀態更新
const reader = stream.readable.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
const message = new TextDecoder().decode(value);
console.log('Game state update:', message);
}
2. 低延遲實時直播
案例：實時直播需要低延遲的影片流傳輸。
程式碼：
// 連線到直播伺服器
const transport = new WebTransport('wss://example.com/live');
// 建立一個單向流用於接收影片流
const stream = await transport.createUnidirectionalStream();
// 接收影片資料
const reader = stream.readable.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
// 處理影片資料，例如解碼並顯示
handleVideoData(value);
}
作者：朦朧之
連結：https://juejin.cn/post/7435221192476770367
