upgradeWebSocket import per runtime
upgradeWebSocket is imported from different modules depending on the runtime: 'hono/cloudflare-workers' for Cloudflare Workers, 'hono/deno' for Deno, 'hono/bun' for Bun, and '@hono/node-server' for Node.js.
helpers/websocket
11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Bun WebSocket export requirement
When using WebSocket on Bun, the default export must include both fetch and websocket properties: export default { fetch: app.fetch, websocket }.
Node.js WebSocket setup requirements
On Node.js, WebSocket support requires installing the 'ws' package and '@types/ws' for TypeScript. A WebSocketServer must be created with { noServer: true } and passed to serve() via the websocket option. The deprecated package '@hono/node-ws' should no longer be used.
upgradeWebSocket handler structure
upgradeWebSocket() accepts a callback function that receives the context and returns an object with event handlers. The return object can have the properties onOpen, onMessage, onClose, and onError, each receiving event and ws parameters.
WebSocket events available
WebSocket event handlers supported are: onOpen (not supported in Cloudflare Workers), onMessage, onClose, and onError.
WebSocket with header-modifying middleware pitfall
Using middleware that modifies headers (such as CORS) on a WebSocket route can cause errors because upgradeWebSocket() internally modifies headers. Caution is required when combining WebSocket Helper with header-modifying middleware.
WebSocket RPC mode client usage
WebSocket routes support RPC mode. A WebSocket client can be obtained using hc<WebSocketApp>('url').ws.$ws(), which returns a native WebSocket object for the client.
WebSocket server and client example
Server example using Cloudflare Workers: const app = new Hono().get('/ws', upgradeWebSocket(() => { return { onMessage: (event) => { console.log(event.data) } } })). Client example: const client = hc<typeof app>('http://localhost:8787'); const ws = client.ws.$ws(0); ws.addEventListener('open', () => { setInterval(() => { ws.send(new Date().toString()) }, 1000) }).
WebSocket with Bun and JSX example
A complete Bun example showing an HTML page with JSX that connects to a WebSocket endpoint and receives server-sent timestamps. The server uses upgradeWebSocket with onOpen and onClose handlers to manage an interval, and the export includes both fetch and websocket properties: export default { fetch: app.fetch, websocket }.
WebSocket on Node.js example
Node.js example: import { serve, upgradeWebSocket } from '@hono/node-server'; import { WebSocketServer } from 'ws'; const app = new Hono(); app.get('/ws', upgradeWebSocket(() => ({ onMessage(event, ws) { ws.send(event.data) } }))); const wss = new WebSocketServer({ noServer: true }); serve({ fetch: app.fetch, websocket: { server: wss } }).
WebSocket runtime support
WebSocket Helper is available for Cloudflare Workers, Cloudflare Pages, Deno, Bun, and Node.js adapters.