Guide

WebSockets

H3 内置支持跨平台的 WebSocket 和服务器发送事件。

H3 使用 🔌 CrossWS 提供内置的、运行时无关的 WebSocket 支持。

Read more in CrossWS.
h3 v2 对 WebSockets 的内置支持仍在开发中。

使用方法

websocket.mjs
import { H3, serve, proxy, defineWebSocketHandler } from "h3";

export const app = new H3();

const websocketDemoURL =
  "https://raw.githubusercontent.com/unjs/crossws/main/examples/h3/public/index.html";

app.get("/", (event) =>
  proxy(event, websocketDemoURL, { headers: { "Content-Type": "text/html" } }),
);

app.use(
  "/_ws",
  defineWebSocketHandler({
    open(peer) {
      console.log("[ws] open", peer);
    },

    message(peer, message) {
      console.log("[ws] message", peer, message);
      if (message.text().includes("ping")) {
        peer.send("pong");
      }
    },

    close(peer, event) {
      console.log("[ws] close", peer, event);
    },

    error(peer, error) {
      console.log("[ws] error", peer, error);
    },
  }),
);

serve(app);

服务器发送事件(SSE)

作为 WebSockets 的替代方案,您可以使用服务器发送事件

H3 提供内置 API,可使用 createEventStream(event) 工具创建服务器发送事件。

示例

server-sent-events.mjs
import { H3, serve, createEventStream } from "h3";

export const app = new H3();

app.get("/", (event) => {
  const eventStream = createEventStream(event);

  // Send a message every second
  const interval = setInterval(async () => {
    await eventStream.push("Hello world");
  }, 1000);

  // cleanup the interval when the connection is terminated or the writer is closed
  eventStream.onClosed(() => {
    console.log("Connection closed");
    clearInterval(interval);
  });

  return eventStream.send();
});

serve(app);