WebSockets
H3 内置跨平台 WebSocket 和服务器发送事件的实用工具。
您可以使用 🔌 CrossWS 为 H3 服务器添加跨平台 WebSocket 支持。
h3 版本中内置的 WebSockets 支持仍在开发中。
用法
WebSocket 处理程序可以使用 defineWebSocketHandler() 工具定义，并像事件处理程序一样注册到任意路由。
您需要在 serve 函数中将 CrossWS 注册为服务器插件，并提供一个 resolve 函数以从路由中解析正确的钩子。
import { H3, serve, defineWebSocketHandler } from "h3";
import { plugin as ws } from "crossws/server";
const app = new H3();
app.get("/_ws", defineWebSocketHandler({ message: console.log }));
serve(app, {
plugins: [ws({ resolve: async (req) => (await app.fetch(req)).crossws })],
});
完整示例：
websocket.mjs
import { H3, serve, defineWebSocketHandler } from "h3";
import { plugin as ws } from "crossws/server";
export const app = new H3();
const demoURL =
"https://raw.githubusercontent.com/h3js/crossws/refs/heads/main/playground/public/index.html";
app.get("/", () =>
fetch(demoURL).then(
(res) => new Response(res.body, { headers: { "Content-Type": "text/html" } }),
),
);
app.get(
"/_ws",
defineWebSocketHandler({
// upgrade(req) {},
open(peer) {
console.log("[open]", peer);
// 向新客户端发送欢迎信息
peer.send("Welcome to the server!");
// 将新客户端加入“chat”频道
peer.subscribe("chat");
// 通知所有其他已连接客户端
peer.publish("chat", `[system] ${peer} joined!`);
},
message(peer, message) {
console.log("[message]", peer);
if (message.text() === "ping") {
// 向客户端回复 ping 响应
peer.send("pong");
return;
}
// 服务器将收到的消息重新广播给所有人
peer.publish("chat", `[${peer}] ${message}`);
// 将消息回显给发送者
peer.send(message);
},
close(peer) {
console.log("[close]", peer);
peer.publish("chat", `[system] ${peer} has left the chat!`);
peer.unsubscribe("chat");
},
}),
);
serve(app, {
plugins: [ws({ resolve: async (req) => (await app.fetch(req)).crossws })],
});
服务器发送事件（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);
// 每秒发送一条消息
const interval = setInterval(async () => {
await eventStream.push("Hello world");
}, 1000);
// 当连接关闭或写入器关闭时清理定时器
eventStream.onClosed(() => {
console.log("连接已关闭");
clearInterval(interval);
});
return eventStream.send();
});
serve(app);