Guide
WebSocket
Nitro 原生支持跨平台的 WebSocket API
Nitro 原生支持使用 CrossWS 和 H3 WebSocket 的与运行时无关的 WebSocket API。
选择实验性功能
WebSocket 支持目前为实验性功能。请查看 nitrojs/nitro#2171 以获取平台支持状态。
为了启用 WebSocket 支持,您需要启用实验性的 websocket
特性标志。
export default defineNitroConfig({
experimental: {
websocket: true
}
})
使用方式
在 server/routes/_ws.ts
中创建 WebSocket 处理器。
您可以使用任何路由,例如
server/routes/chatroom.ts
,在 /chatroom
上注册升级处理器。server/routes/_ws.ts
export default 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);
},
});
Nitro 允许您使用相同的事件处理程序路由定义多个 WebSocket 处理器。
使用客户端连接到服务器。示例:(server/routes/websocket.ts
)
index.ts
export default defineEventHandler(() => {
return $fetch(
"https://raw.githubusercontent.com/unjs/crossws/main/examples/h3/public/index.html"
);
});
现在您可以在 /websocket
路由上试试!
查看我们的 聊天演示 使用 Nitro WebSocket API。
服务器发送事件 (SSE)
作为 WebSocket 的替代方案,您可以使用 服务器发送事件
示例
在 server/routes/sse.ts
中创建一个 SSE 处理程序。
server/routes/sse.ts
export default defineEventHandler(async (event) => {
const eventStream = createEventStream(event)
const interval = setInterval(async () => {
await eventStream.push(`Message @ ${new Date().toLocaleTimeString()}`)
}, 1000)
eventStream.onClosed(async () => {
clearInterval(interval)
await eventStream.close()
})
return eventStream.send()
})
然后从客户端连接到此 SSE 终端
const eventSource = new EventSource('http://localhost:3000/sse')
eventSource.onmessage = (event) => {
console.log(event.data)
}