WebSocket doesn't work

[Migawk]

What version of Hono are you using?

4.12.23

What runtime/platform is your app running on? (with version if possible)

Bun

What steps can reproduce the bug?

Prereq: WSL Ubuntu 24.04, Bun 1.3.14
Init basic Hono project with cors ( * everywhere ) and simplest websocket gateway taken from docs.

import { Hono } from "hono";
import { upgradeWebSocket, websocket } from "hono/bun";
import { cors } from "hono/cors";

const app = new Hono();

app.use(
  "*",
  cors({
    origin: "*",
    allowHeaders: ["*"],
    allowMethods: ["POST", "GET", "OPTIONS"],
    exposeHeaders: ["Content-Length", "X-Kuma-Revision"],
    maxAge: 600,
    credentials: true,
  }),
);

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");
      },
    };
  }),
);

export default {
  fetch: app.fetch,
  websocket,
};

What is the expected behavior?

Working Websocket gateway.

What do you see instead?

Not working gateway

Additional information

I've set console.log into helper/websocket/index.js and it works when a user makes GET request, but still getting 404 on my client.

Tested with Express.js. Everything working as awaited

[xu91102]

I took a look at the Bun WebSocket adapter path on current main.

The route snippet looks close to the documented Bun shape because it exports both fetch and websocket. The missing part that would help narrow this down is the exact client/request side. In hono/bun, upgradeWebSocket() gets the Bun server from the fetch context and calls server.upgrade(c.req.raw, ...); if that upgrade does not succeed, the middleware path can continue without producing a WebSocket response.

Could you share a minimal runnable repro with these details?

• The exact Bun command or dev server command being used.
• The exact WebSocket client code or browser URL, including the scheme (ws:// vs http://), host, and path.
• Whether a direct new WebSocket("ws://localhost:<port>/ws") connection has the same result.
• Whether removing cors() changes the result.

That should make it easier to tell whether this is an adapter bug, a failed server.upgrade() path, or a client/request setup issue.

[Migawk]

I took a look at the Bun WebSocket adapter path on current main.

The route snippet looks close to the documented Bun shape because it exports both fetch and websocket. The missing part that would help narrow this down is the exact client/request side. In hono/bun, upgradeWebSocket() gets the Bun server from the fetch context and calls server.upgrade(c.req.raw, ...); if that upgrade does not succeed, the middleware path can continue without producing a WebSocket response.

Could you share a minimal runnable repro with these details?

• The exact Bun command or dev server command being used.
• The exact WebSocket client code or browser URL, including the scheme (ws:// vs http://), host, and path.
• Whether a direct new WebSocket("ws://localhost:<port>/ws") connection has the same result.
• Whether removing cors() changes the result.

That should make it easier to tell whether this is an adapter bug, a failed server.upgrade() path, or a client/request setup issue.

commands both for server and frontend is
bun run dev

cors doesn't affect anything

server

{
  "name": "server",
  "scripts": {
    "dev": "bun run --hot src/index.ts"
  },
  "dependencies": {
    "@hono/node-server": "^2.0.4",
    "hono": "^4.12.23",
    "socket.io": "^4.8.3"
  },
  "devDependencies": {
    "@types/bun": "latest"
  }
}

const app = new Hono();

app.use(
  "*",
  cors({
    origin: "*",
    allowHeaders: ["*"],
    allowMethods: ["POST", "GET", "OPTIONS"],
    exposeHeaders: ["Content-Length", "X-Kuma-Revision"],
    maxAge: 600,
    credentials: true,
  }),
);

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");
      },
    };
  }),
);

export default {
  fetch: app.fetch,
  websocket,
};

Vue Frontend

import { reactive } from 'vue'
import { io } from 'socket.io-client'

export const state = reactive({
  connected: false,
  fooEvents: [],
  barEvents: [],
})

const URL = 'http://localhost:3000/ws'

export const socket = io(URL)

socket.on('connect', () => {
  state.connected = true
})

socket.on('disconnect', () => {
  state.connected = false
})

socket.on('foo', (...args) => {
  state.fooEvents.push(args)
})

socket.on('bar', (...args) => {
  state.barEvents.push(args)
})

[mina58]

I believe the issue here is that you're using socket.io which uses a different incompatible protocol. try using websocket instead