WebSocket 助手
WebSocket 助手是用于 Hono 应用中服务端 WebSockets 的助手。 目前支持 Cloudflare Workers / Pages、Deno 和 Bun 适配器。
导入
ts
import { Hono } from 'hono'
import { upgradeWebSocket } from 'hono/cloudflare-workers'ts
import { Hono } from 'hono'
import { upgradeWebSocket } from 'hono/deno'ts
import { Hono } from 'hono'
import { createBunWebSocket } from 'hono/bun'
import type { ServerWebSocket } from 'bun'
const { upgradeWebSocket, websocket } =
createBunWebSocket<ServerWebSocket>()
// ...
export default {
fetch: app.fetch,
websocket,
}如果您使用 Node.js，可以使用 @hono/node-ws。
upgradeWebSocket()
upgradeWebSocket() 返回一个用于处理 WebSocket 的处理器（handler）。
ts
const app = new Hono()
app.get(
'/ws',
upgradeWebSocket((c) => {
return {
onMessage(event, ws) {
console.log(`Message from client: ${event.data}`)
ws.send('Hello from server!')
},
onClose: () => {
console.log('Connection closed')
},
}
})
)可用事件：
onOpen- 目前，Cloudflare Workers 不支持此事件。onMessageonCloseonError
WARNING
如果您在使用了 WebSocket Helper 的路由上使用了修改标头（headers）的中间件（middleware）（例如，应用 CORS），您可能会遇到错误，提示您无法修改不可变的标头（immutable headers）。这是因为 upgradeWebSocket() 内部也会更改标头。
因此，如果您同时使用 WebSocket Helper 和中间件，请务必小心。
RPC 模式
使用 WebSocket Helper 定义的处理器（handlers）支持 RPC 模式。
ts
// server.ts
const wsApp = app.get(
'/ws',
upgradeWebSocket((c) => {
//...
})
)
export type WebSocketApp = typeof wsApp
// client.ts
const client = hc<WebSocketApp>('http://localhost:8787')
const socket = client.ws.$ws() // 客户端的 WebSocket 对象示例
查看使用 WebSocket Helper 的示例。
服务端和客户端
ts
// server.ts
import { Hono } from 'hono'
import { upgradeWebSocket } from 'hono/cloudflare-workers'
const app = new Hono().get(
'/ws',
upgradeWebSocket(() => {
return {
onMessage: (event) => {
console.log(event.data)
},
}
})
)
export default appts
// client.ts
import { hc } from 'hono/client'
import type app from './server'
const client = hc<typeof app>('http://localhost:8787')
const ws = client.ws.$ws(0)
ws.addEventListener('open', () => {
setInterval(() => {
ws.send(new Date().toString())
}, 1000)
})Bun 中使用 JSX
tsx
import { Hono } from 'hono'
import { createBunWebSocket } from 'hono/bun'
const { upgradeWebSocket, websocket } = createBunWebSocket()
const app = new Hono()
app.get('/', (c) => {
return c.html(
<html>
<head>
<meta charset='UTF-8' />
</head>
<body>
<div id='now-time'></div>
<script
dangerouslySetInnerHTML={{
__html: `
const ws = new WebSocket('ws://localhost:3000/ws')
const $nowTime = document.getElementById('now-time')
ws.onmessage = (event) => {
$nowTime.textContent = event.data
}
`,
}}
></script>
</body>
</html>
)
})
const ws = app.get(
'/ws',
upgradeWebSocket((c) => {
let intervalId
return {
onOpen(_event, ws) {
intervalId = setInterval(() => {
ws.send(new Date().toString())
}, 200)
},
onClose() {
clearInterval(intervalId)
},
}
})
)
export default {
fetch: app.fetch,
websocket,
}