WebSocketStream

實驗性: 這是一項實驗性技術
在生產中使用此技術之前,請仔細檢查瀏覽器相容性表格

注意:此功能在 Web Workers 中可用。

WebSocketStream 介面是 WebSockets API 的一部分,這是一個用於連線 WebSocket 伺服器的基於 Promise 的 API。它使用 Streams API 在連線上傳送和接收資料,因此可以自動利用 Streams API 的 反壓(backpressure) 功能,從而調節讀寫速度,避免應用程式中的瓶頸。

建構函式

WebSocketStream() 實驗性

建立一個新的 WebSocketStream 物件例項。

例項屬性

url 只讀 實驗性

返回建立 WebSocketStream 例項時使用的 WebSocket 伺服器的 URL。

closed 只讀 實驗性

返回一個 Promise,該 Promise 在套接字連線關閉時解析為一個物件。該物件包含伺服器傳送的關閉程式碼和原因。

opened 只讀 實驗性

返回一個 Promise,該 Promise 在套接字連線成功開啟時解析為一個物件。除其他功能外,該物件還包含一個用於在連線上接收和傳送資料的 ReadableStream 例項和一個 WritableStream 例項。

例項方法

close() 實驗性

關閉 WebSocket 連線。

示例

js
const output = document.querySelector("#output");

function writeToScreen(message) {
  const pElem = document.createElement("p");
  pElem.textContent = message;
  output.appendChild(pElem);
}

if (!("WebSocketStream" in self)) {
  writeToScreen("Your browser does not support WebSocketStream");
} else {
  const wsURL = "ws://127.0.0.1/";
  const wss = new WebSocketStream(wsURL);

  console.log(wss.url);

  async function start() {
    const { readable, writable, extensions, protocol } = await wss.opened;
    writeToScreen("CONNECTED");
    closeBtn.disabled = false;
    const reader = readable.getReader();
    const writer = writable.getWriter();

    writer.write("ping");
    writeToScreen("SENT: ping");

    while (true) {
      const { value, done } = await reader.read();
      writeToScreen(`RECEIVED: ${value}`);
      if (done) {
        break;
      }

      setTimeout(() => {
        writer.write("ping");
        writeToScreen("SENT: ping");
      }, 5000);
    }
  }

  start();
}

有關完整示例和詳細說明,請參閱 使用 WebSocketStream 編寫客戶端

規範

目前不是任何規範的一部分。有關標準化進展,請參閱 https://github.com/whatwg/websockets/pull/48

瀏覽器相容性

另見