Guide
WebSockets
H3 has built-in support for cross platform WebSocket and Server-Sent Events.
H3 has built-in, runtime agnostic WebSocket support using 🔌 CrossWS.
Built-in support of WebSockets in h3 v2 is WIP.
Usage
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);
},
}),
);
await serve(app)
.ready()
.then((s) => console.log(`Server running at ${s.url}`));
Server-Sent Events (SSE)
As an alternative to WebSockets, you can use Server-sent events.
H3 has a built-in API to create server-sent events using createEventStream(event) utility.
Example
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();
});
await serve(app)
.ready()
.then((s) => console.log(`Server running at ${s.url}`));