Guide
WebSockets
H3 内置支持跨平台的 WebSocket 和 SSE。
H3 原生支持与运行时无关的 WebSocket API,使用 CrossWS 。
您可以在现有的 事件处理程序 中定义 WebSocket 处理程序,以定义多个 WebSocket 处理程序,并与您的相同路由定义动态匹配!
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();
}),
);