Hono•7mo ago

Websocket with Bun

I've tried everything but I can't get WebSockets to work with Bun, also the git issues were not helpful, does anyone have an idea ?

import { createBunWebSocket } from "hono/bun";
import wsApp from "./routes/websocket";

const { websocket } = createBunWebSocket();

type Bindings = {
  ip: SocketAddress;
};

const app = new Hono<{ Bindings: Bindings }>().basePath("/v1");

app.route("/", wsApp);

const server = Bun.serve({
  fetch(req, server) {
    return app.fetch(req, { ip: server.requestIP(req) });
  },
  websocket,
});`

import { createBunWebSocket } from "hono/bun";
import wsApp from "./routes/websocket";

const { websocket } = createBunWebSocket();

type Bindings = {
  ip: SocketAddress;
};

const app = new Hono<{ Bindings: Bindings }>().basePath("/v1");

app.route("/", wsApp);

const server = Bun.serve({
  fetch(req, server) {
    return app.fetch(req, { ip: server.requestIP(req) });
  },
  websocket,
});`

import { Hono } from "hono";
import { createBunWebSocket } from "hono/bun";
import { WSContext } from "hono/ws";

const { upgradeWebSocket, websocket } = createBunWebSocket();

const wsApp = new Hono();

const userSockets = new Map<string, WSContext>();

wsApp.get(
  "/ws/:userId",
  upgradeWebSocket((c) => {
    const userId = c.req.param("userId");
    return {
      onOpen(event, ws) {
        userSockets.set(userId, ws);
        console.log(`WebSocket connection opened for user ${userId}`);
      },
      onMessage(event, ws) {
        const message = JSON.parse(event.data.toString());
        if (message.type === "checkEmailVerified") {
          // ---
        }
        console.log(message);
        ws.send("hi");
      },
      onClose: () => {
        userSockets.delete(userId);
        console.log(`WebSocket connection closed for user ${userId}`);
      },
    };
  })
);

export default wsApp;

import { Hono } from "hono";
import { createBunWebSocket } from "hono/bun";
import { WSContext } from "hono/ws";

const { upgradeWebSocket, websocket } = createBunWebSocket();

const wsApp = new Hono();

const userSockets = new Map<string, WSContext>();

wsApp.get(
  "/ws/:userId",
  upgradeWebSocket((c) => {
    const userId = c.req.param("userId");
    return {
      onOpen(event, ws) {
        userSockets.set(userId, ws);
        console.log(`WebSocket connection opened for user ${userId}`);
      },
      onMessage(event, ws) {
        const message = JSON.parse(event.data.toString());
        if (message.type === "checkEmailVerified") {
          // ---
        }
        console.log(message);
        ws.send("hi");
      },
      onClose: () => {
        userSockets.delete(userId);
        console.log(`WebSocket connection closed for user ${userId}`);
      },
    };
  })
);

export default wsApp;

2 Replies

Nico•7mo ago

There is a bug in this if you are returning the fetch it does not allow Bun to switch protocols. If you don't get the ip and do:

Bun.serve({
  fetch: app.fetch,
  websocket
});

Bun.serve({
  fetch: app.fetch,
  websocket
});

It will work. When the IP trick was added to the docs, web sockets we're not considered. You should be able to follow what is on Bun documentation to make this work https://bun.sh/guides/websocket/simple I can't seem to find any workaround than making breaking changes to WebSocket. I will open an issue on this

Bun

Build a simple WebSocket server | Bun Examples

Nico•6mo ago

@Abanob Boles this has been fixed in the latest version, there is now a helper for getting the client ip

Gaming

Programming

Websocket with Bun