Nitro 原生支持使用 CrossWS 和 H3 WebSocket 的与运行时无关的 WebSocket API。
相关阅读：WebSocket in MDN
相关阅读：CrossWS
Opt-in to the experimental feature
WebSockets 支持目前处于实验阶段。请参阅 unjs/nitro#2171 了解平台支持状态。
为了启用 websocket 支持，您需要启用实验性的websocket功能标志。
ts
nitro.config.ts
ts
export default defineNitroConfig({
experimental: {
websocket: true
}
})
Usage
在 routes/_ws.ts（或 Nuxt 的 server/routes/_ws.ts）中创建一个 websocket 处理程序。
您可以使用任何路线（例如“routes/chatroom.ts”）在“/chatroom”上注册升级处理程序。
_ws.ts
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 处理程序。
使用客户端连接到服务器。示例：（Nuxt 的routes/websocket.ts或server/routes/websocket.ts）
index.ts
ts
export default defineEventHandler(() => {
return $fetch(
'https://raw.githubusercontent.com/unjs/crossws/main/examples/h3/public/index.html'
)
})
现在您可以在 /websocket 路线上尝试它！
使用 Nitro Websocket API 查看我们的聊天演示。
Server Sent Events (SSE)
作为 WebSockets 的替代方案，你可以使用 服务器发送事件
Example
在routes/sse.ts（或 Nuxt 的server/routes/sse.ts）中创建一个 SSE 处理程序。
sse.ts
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 端点
ts
const eventSource = new EventSource('http://localhost:3000/sse')
eventSource.onmessage = (event) => {
console.log(event.data)
}
相关阅读：SSE guide in H3