WebSocketStream

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

メモ: この機能はウェブワーカー内で利用可能です。

WebSocketStream は WebSockets API のインターフェイスで、WebSocket サーバーに接続するためのプロミスベースの API です。接続上でデータを送信および受信するためにストリームを使用するため、自動的にストリームの[背圧]backpressureを活用し、読み取りや書き込みの速度を調整することでアプリケーションのボトルネックを避けることができます。

コンストラクター

WebSocketStream(): 新しい WebSocketStream オブジェクトインスタンスを生成します。

インスタンスプロパティ

url 読取専用: WebSocketStream インスタンスが作成された WebSocket サーバーの URL を返します。
closed 読取専用: ソケット接続が閉じられた際に、オブジェクトで解決される Promise を返します。このオブジェクトには、サーバーから送信された接続終了コードと理由が含まれています。
opened 読取専用: ソケット接続が正常に開かれた時点で、オブジェクトを返す Promise が履行されます。このオブジェクトには、接続上でデータを受信・送信するための ReadableStream と WritableStream のインスタンスが含まれています。

インスタンスメソッド

close(): WebSocket 接続を閉じます。

例

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

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

if (!("WebSocketStream" in self)) {
  writeToScreen("このブラウザーは 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 でクライアントを書くを参照してください。