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

浏览器兼容性

另见