websocket

Nitro 原生支持跨平台的 WebSocket API。

Nitro 使用 CrossWS 和 H3 WebSocket 原生支持运行时无关的 WebSocket API。

Read more in 更多信息请参阅 MDN 中的 WebSocket.

Read more in 更多信息请参阅 CrossWS.

启用实验性功能

WebSocket 支持目前处于实验阶段。 请参阅 nitrojs/nitro#2171 了解平台支持状态。

要启用 WebSocket 支持，您需要启用实验性的 websocket 功能标志。

export default defineNitroConfig({
  experimental: {
    websocket: true
  }
})

export default defineNuxtConfig({
  nitro: {
    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-sent events)。

示例

在 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)
}