/Knowledge/sources/honojs__hono/llms-full/websocket-helper-examples-bun-with-jsx--e33f2e85aa3e.md
WebSocket Helper: Examples > Bun with JSX - hono-docs
WebSocket Helper: Examples Bun with JSX Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt bun with jsx S...
WebSocket Helper: Examples > Bun with JSX
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#bun-with-jsx
Summary
```tsx import { Hono } from 'hono' import { upgradeWebSocket, websocket } from 'hono/bun' import { html } from 'hono/html' const app = new Hono() app.get('/', (c) => { return c.html( {html` const ws = new WebSocket('ws://localhost:3000/w...
Content
import { Hono } from 'hono'
import { upgradeWebSocket, websocket } from 'hono/bun'
import { html } from 'hono/html'
const app = new Hono()
app.get('/', (c) => {
return c.html(
<html>
<head>
<meta charset='UTF-8' />
</head>
<body>
<div id='now-time'></div>
{html`
<script>
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,
}
Metadata
{
"chunk_index": 0,
"citation": "https://hono.dev/llms-full.txt#bun-with-jsx",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / WebSocket Helper > Examples > Bun with JSX",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 712,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "WebSocket Helper: Examples > Bun with JSX",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki