單向與雙向流:靈活的數據調度
在 WebTransport 之前,連線通常是「一把抓」的。但 WebTransport 引進了 多流 (Multiplexed Streams) 的概念,讓你可以開啟多條獨立的數據通道。
一、 單向流 (Unidirectional Streams)
數據只能在一個方向上傳輸,非常適合「推播」場景。
實戰:開啟單向發送流
javascript
async function sendLog(transport, logMessage) {
const stream = await transport.createUnidirectionalStream();
const writer = stream.getWriter();
await writer.write(new TextEncoder().encode(logMessage));
await writer.close();
}二、 雙向流 (Bidirectional Streams)
雙向流類似於一個微型的 WebSocket 連線。它是全雙工的,非常適合「請求-響應」式的任務。
實戰:建立請求流
javascript
async function requestData(transport, requestId) {
const stream = await transport.createBidirectionalStream();
const writer = stream.writable.getWriter();
const reader = stream.readable.getReader();
await writer.write(new TextEncoder().encode(requestId));
const { value } = await reader.read();
console.log('收到回應:', new TextDecoder().decode(value));
}三、 工程設計:隔離控制與數據
在成熟架構中,我們會利用多流進行交通管制:
- 控制流 (Bidirectional):負責發送指令(如:切換頻道)。
- 數據流 (Unidirectional):負責大量影音或背景數據下載。
核心優勢:不同流之間完全獨立,互不阻塞。
總結
WebTransport 的多流架構讓數據調度變得前所未有的靈活,徹底解決了應用層的隊頭阻塞問題。
下一章,我們將攻克開發中最麻煩的一環:安全與證書指紋。
️ 進階挑戰
相比於「一個 WebSocket 同時傳輸所有內容並在應用層做分發 (Dispatching)」,WebTransport 的「原生多流」在效能上有什麼本質提升?
延伸閱讀與資源
- MDN:createUnidirectionalStream()
- WebTransport Frameworks:Google's quiche