Node Web Sockets in Hono

Kazz · 2025-04-15T21:52:52.846Z

Hello all, I'm fairly new to Hono and I've recently picked it up for some of my projects and enjoyed it very much. Im currently facing problems with one of my projects that uses WebSockets to communicate with Hardware boxes. And I will need another WebSocket as well to communicate with my frontend and mobile application. I've searched for many solutions online but it looks like Hono with Node WebSockets is rarely talked about. After a lot of trial and error I finally reached this code to let my socket run with Hono [1/3]

K

KazzOP•4/15/25, 9:54 PM

const httpServer = createServer(async (req, res) => {
    try {
        // Handle WebSocket upgrade requests separately
        if (req.headers.upgrade && req.headers.upgrade.toLowerCase() === 'websocket') return

        // Convert Node.js request to Web standard Request
        const url = new URL(req.url || '/', `http://${req.headers.host || 'localhost'}`)
        const headers = new Headers()
        Object.entries(req.headers).forEach(([key, value]) => {
            if (value) headers.set(key, Array.isArray(value) ? value.join(', ') : value)
        })

        const body = req.method !== 'GET' && req.method !== 'HEAD' ? req : null
        // Create readable stream from request body
        let bodyStream = null
        if (body) {
            bodyStream = new ReadableStream({
                start(controller) {
                    body.on('data', chunk => controller.enqueue(chunk))
                    body.on('message', chunk => controller.enqueue(chunk))
                    body.on('end', () => controller.close())
                    body.on('error', err => controller.error(err))
                },
            })
        }

        const request = new Request(url.toString(), { method: req.method, headers, body: bodyStream })

        const response = await app.fetch(request)

        // Write the response back to the Node.js response object
        res.writeHead(response.status, Object.fromEntries(response.headers.entries()))

        const responseBody = await response.arrayBuffer()
        res.end(Buffer.from(responseBody))
    } catch (err) {
        console.error('Error handling request:', err)
        res.writeHead(500)
        res.end('Internal Server Error')
    }
})
const wss = new WebSocketServer({ server: httpServer, path: '/ws' })

serve({ fetch:app.fetch, port:config.PORT, createServer:()=>httpServer }, info => console.log(`💨 API server is running on Port ${info.port}`))

const httpServer = createServer(async (req, res) => {
    try {
        // Handle WebSocket upgrade requests separately
        if (req.headers.upgrade && req.headers.upgrade.toLowerCase() === 'websocket') return

        // Convert Node.js request to Web standard Request
        const url = new URL(req.url || '/', `http://${req.headers.host || 'localhost'}`)
        const headers = new Headers()
        Object.entries(req.headers).forEach(([key, value]) => {
            if (value) headers.set(key, Array.isArray(value) ? value.join(', ') : value)
        })

        const body = req.method !== 'GET' && req.method !== 'HEAD' ? req : null
        // Create readable stream from request body
        let bodyStream = null
        if (body) {
            bodyStream = new ReadableStream({
                start(controller) {
                    body.on('data', chunk => controller.enqueue(chunk))
                    body.on('message', chunk => controller.enqueue(chunk))
                    body.on('end', () => controller.close())
                    body.on('error', err => controller.error(err))
                },
            })
        }

        const request = new Request(url.toString(), { method: req.method, headers, body: bodyStream })

        const response = await app.fetch(request)

        // Write the response back to the Node.js response object
        res.writeHead(response.status, Object.fromEntries(response.headers.entries()))

        const responseBody = await response.arrayBuffer()
        res.end(Buffer.from(responseBody))
    } catch (err) {
        console.error('Error handling request:', err)
        res.writeHead(500)
        res.end('Internal Server Error')
    }
})
const wss = new WebSocketServer({ server: httpServer, path: '/ws' })

serve({ fetch:app.fetch, port:config.PORT, createServer:()=>httpServer }, info => console.log(`💨 API server is running on Port ${info.port}`))

const httpServer = createServer(async (req, res) => {
    try {
        // Handle WebSocket upgrade requests separately
        if (req.headers.upgrade && req.headers.upgrade.toLowerCase() === 'websocket') return

        // Convert Node.js request to Web standard Request
        const url = new URL(req.url || '/', `http://${req.headers.host || 'localhost'}`)
        const headers = new Headers()
        Object.entries(req.headers).forEach(([key, value]) => {
            if (value) headers.set(key, Array.isArray(value) ? value.join(', ') : value)
        })

        const body = req.method !== 'GET' && req.method !== 'HEAD' ? req : null
        // Create readable stream from request body
        let bodyStream = null
        if (body) {
            bodyStream = new ReadableStream({
                start(controller) {
                    body.on('data', chunk => controller.enqueue(chunk))
                    body.on('message', chunk => controller.enqueue(chunk))
                    body.on('end', () => controller.close())
                    body.on('error', err => controller.error(err))
                },
            })
        }

        const request = new Request(url.toString(), { method: req.method, headers, body: bodyStream })

        const response = await app.fetch(request)

        // Write the response back to the Node.js response object
        res.writeHead(response.status, Object.fromEntries(response.headers.entries()))

        const responseBody = await response.arrayBuffer()
        res.end(Buffer.from(responseBody))
    } catch (err) {
        console.error('Error handling request:', err)
        res.writeHead(500)
        res.end('Internal Server Error')
    }
})
const wss = new WebSocketServer({ server: httpServer, path: '/ws' })

serve({ fetch:app.fetch, port:config.PORT, createServer:()=>httpServer }, info => console.log(`💨 API server is running on Port ${info.port}`))

const httpServer = createServer(async (req, res) => {
    try {
        // Handle WebSocket upgrade requests separately
        if (req.headers.upgrade && req.headers.upgrade.toLowerCase() === 'websocket') return

        // Convert Node.js request to Web standard Request
        const url = new URL(req.url || '/', `http://${req.headers.host || 'localhost'}`)
        const headers = new Headers()
        Object.entries(req.headers).forEach(([key, value]) => {
            if (value) headers.set(key, Array.isArray(value) ? value.join(', ') : value)
        })

        const body = req.method !== 'GET' && req.method !== 'HEAD' ? req : null
        // Create readable stream from request body
        let bodyStream = null
        if (body) {
            bodyStream = new ReadableStream({
                start(controller) {
                    body.on('data', chunk => controller.enqueue(chunk))
                    body.on('message', chunk => controller.enqueue(chunk))
                    body.on('end', () => controller.close())
                    body.on('error', err => controller.error(err))
                },
            })
        }

        const request = new Request(url.toString(), { method: req.method, headers, body: bodyStream })

        const response = await app.fetch(request)

        // Write the response back to the Node.js response object
        res.writeHead(response.status, Object.fromEntries(response.headers.entries()))

        const responseBody = await response.arrayBuffer()
        res.end(Buffer.from(responseBody))
    } catch (err) {
        console.error('Error handling request:', err)
        res.writeHead(500)
        res.end('Internal Server Error')
    }
})
const wss = new WebSocketServer({ server: httpServer, path: '/ws' })

serve({ fetch:app.fetch, port:config.PORT, createServer:()=>httpServer }, info => console.log(`💨 API server is running on Port ${info.port}`))

[2/3]

K

KazzOP•4/15/25, 9:56 PM

However this doesn't look like good code at all and I was expecting it to give me errors in the future. Which it did.

I used

Better-Auth

Better-Auth

Better-Auth

Better-Auth with Hono and here is were my problems started showing. A lot of better auth functionalities got limited and some break because of this code. And I'm pretty sure later on other things will break because of this

[3/3]

K

KazzOP•4/15/25, 9:56 PM

Is there a better way to allow Web socket to run with Hono without creating a server?

A

Arjix•4/15/25, 9:56 PM

I like the fake parts,

[1/?]

[1/?]

[1/?]

[1/?]

K

KazzOP•4/15/25, 9:57 PM

Lol i had no idea how many posts i will do xD

KKazz Is there a better way to allow Web socket to run with Hono without creating a se...

A

Arjix•4/15/25, 9:57 PM

I am pretty sure the docs show exactly that?

KKazz Lol i had no idea how many posts i will do xD

A

Arjix•4/15/25, 9:57 PM

all parts are

part = 1

part = 1

part = 1

part = 1

A

Arjix•4/15/25, 9:57 PM

that's what I meant

AArjix I am pretty sure the docs show exactly that?

K

KazzOP•4/15/25, 9:58 PM

I looked for it, they only show for Deno and Bun and Cloudflare workers
https://hono.dev/docs/helpers/websocket

WebSocket Helper - Hono

Web framework built on Web Standards for Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Node.js, and others. Fast, but not only fast.

A

Arjix•4/15/25, 9:58 PM

K

KazzOP•4/15/25, 9:58 PM

Im blind

A

Arjix•4/15/25, 9:58 PM

we all are

A

Arjix•4/15/25, 9:59 PM

props to you for pushing through with that hacky way though!

A

Arjix•4/15/25, 9:59 PM

not giving up is an important skill

A

Arjix•4/15/25, 9:59 PM

~~but carefully reading the docs is another important skill~~

M

Memtooth•4/15/25, 10:00 PM

‘
import { Hono } from 'hono';
import { ws } from 'hono/ws';

const app = new Hono();

// Define a WebSocket route
app.get(
'/ws',
ws((ws) => {
console.log('WebSocket connection established.');

// Handle incoming messages
ws.onmessage = (event) => {
console.log('Received:', event.data);
ws.send(

Echo: ${event.data}

Echo: ${event.data}

Echo: ${event.data}

Echo: ${event.data});
};

// Handle connection close
ws.onclose = () => {
console.log('WebSocket connection closed.');
};
})
);

// Start the app
app.fire();
‘

A

Arjix•4/15/25, 10:00 PM

yeah I am sure they can read the docs, no need for snippets

M

Memtooth•4/15/25, 10:00 PM

I was wondering about that lol, here is an example by chatgpt

K

KazzOP•4/15/25, 10:01 PM

Thanks! Now I have to go rewrite most of my code

K

KazzOP•4/15/25, 10:01 PM

I'll mark this as solved for now

KKazz Thanks! Now I have to go rewrite most of my code 👍

A

Arjix•4/15/25, 10:01 PM

well, I hope it is a rewarding experience

M

Memtooth•4/15/25, 10:02 PM

The funny part is I went to GPT4o to ask for a hono node ws and it came up with something similar to OP

M

Memtooth•4/15/25, 10:02 PM

I had to also remind it of the middleware to get the above

A

Arjix•4/15/25, 10:02 PM

is GPT4 actually using the LLM.txt provided by the docs?

M

Memtooth•4/15/25, 10:02 PM

So dont feel bad even AI isnt aware lol

A

Arjix•4/15/25, 10:02 PM

if so, sweet

AArjix well, I hope it is a rewarding experience

K

KazzOP•4/15/25, 10:02 PM

Rewarding is one word for it

M

Memtooth•4/15/25, 10:02 PM

Not sure

AArjix is GPT4 actually using the LLM.txt provided by the docs?

K

KazzOP•4/15/25, 10:03 PM

I dont think so, i rarely use GPT4

K

KazzOP•4/15/25, 10:03 PM

But AI's in general are not up to date with the latest Hono tech thats for sure

A

Arjix•4/15/25, 10:04 PM

maybe you can directly tell it to search through the LLM.txt?
e.g.

how to do xyz in hono?

please first search through the docs before giving an answer
https://hono.dev/llms.txt

how to do xyz in hono?

please first search through the docs before giving an answer
https://hono.dev/llms.txt

how to do xyz in hono?

please first search through the docs before giving an answer
https://hono.dev/llms.txt

how to do xyz in hono?

please first search through the docs before giving an answer
https://hono.dev/llms.txt

A

Arjix•4/15/25, 10:05 PM

it actually worked

A

Arjix•4/15/25, 10:06 PM

https://chatgpt.com/share/67fed846-5bec-8013-9271-5df7e01ad4b6

ChatGPT

ChatGPT - WebSockets in Hono Node.js

Shared via ChatGPT

K

KazzOP•4/15/25, 10:06 PM

Interesting thet GPT could do it and not Claude

A

Arjix•4/15/25, 10:07 PM

I did have "Search" enabled as a tool

A

Arjix•4/15/25, 10:07 PM

does claude have smth similar?

A

Arjix•4/15/25, 10:07 PM

as an alternative, you can provide https://hono.dev/llms-full.txt as a resource instead

A

Arjix•4/15/25, 10:08 PM

iirc they call it "embedding"

A

Arjix•4/15/25, 10:08 PM

or smth

K

KazzOP•4/15/25, 10:09 PM

RIP my wallet. But yeah i guess Claude cant do this now, or at least on the free version. GPT did it without the "serach" enabled though it wasnt as accurate as the answer you got

A

Arjix•4/15/25, 10:11 PM

I can't get good results in https://duck.ai
I guess it doesn't enable tools like "Search"

DuckDuckGo AI Chat at DuckDuckGo

DuckDuckGo. Privacy, Simplified.