Guide

WebSockets

H3 内置支持跨平台的 WebSocket 和 SSE。

H3 原生支持与运行时无关的 WebSocket API,使用 CrossWS

您可以在现有的 事件处理程序 中定义 WebSocket 处理程序,以定义多个 WebSocket 处理程序,并与您的相同路由定义动态匹配!
Read more in MDN 中的 WebSocket.
Read more in CrossWS.
WebSockets 的支持目前处于实验阶段,可在 nightly channel 中使用。

用法

示例

您可以使用 npx listhen --ws -w websocket.ts 来运行此示例。
websocket.ts
import { createApp, defineWebSocketHandler } from "h3";

export const app = createApp();

app.use(() =>
  fetch(
    "https://raw.githubusercontent.com/unjs/crossws/main/examples/h3/public/index.html",
  ).then((r) => r.text()),
);

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);
    },
  }),
);

服务器推送事件 (SSE)

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

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

SSE 的支持目前处于实验阶段,可在 nightly channel 中使用。

示例

server-sent-events.ts
import { createApp, createRouter, eventHandler, createEventStream } from "h3";

export const app = createApp();

const router = createRouter();
app.use(router);

router.get(
  "/",
  eventHandler((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(() => {
      clearInterval(interval);
    });

    return eventStream.send();
  }),
);