Hono•2y ago

websocket issue

import { Hono } from 'hono';
import { createBunWebSocket } from 'hono/bun';

import type { WSContext, WSEvents, WSMessageReceive } from "hono/ws";
const { upgradeWebSocket, websocket } = createBunWebSocket();
const app = new Hono();

type Message = {
  room: string;
  user: string;
  text: string;
  timestamp: string;
};

const chatClients: { [room: string]: { clients: WSContext[], messages: Message[] } } = {};

app.get(
  '/ws',
  upgradeWebSocket((c) => {
    let room: string;
    let clients: WSContext[] = [];
    let messages: Message[] = [];

    return {
      onOpen(event, ws) {
        room = c.req.query('room');
        if (!room) {
          ws.close();
          return;
        }

        if (!chatClients[room]) {
          chatClients[room] = { clients: [], messages: [] };
        }
        ({ clients, messages } = chatClients[room]);

        clients.push(ws);
      },
      onMessage(event) {
        const msg: Message = JSON.parse(${event.data});
        msg.timestamp = new Date().toISOString();

        messages.push(msg);

        clients.forEach(client => {
          client.send(JSON.stringify(msg));
        });
      },
      onClose(event, ws) {
        const index = clients.indexOf(ws);
        if (index !== -1) {
          clients.splice(index, 1);
        }
      },
    };
  })
);

app.get('/api/messages/:room', (c) => {
  const room = c.req.param('room');
  const messages = chatClients[room]?.messages || [];
  return c.json(messages);
});

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

import { Hono } from 'hono';
import { createBunWebSocket } from 'hono/bun';

import type { WSContext, WSEvents, WSMessageReceive } from "hono/ws";
const { upgradeWebSocket, websocket } = createBunWebSocket();
const app = new Hono();

type Message = {
  room: string;
  user: string;
  text: string;
  timestamp: string;
};

const chatClients: { [room: string]: { clients: WSContext[], messages: Message[] } } = {};

app.get(
  '/ws',
  upgradeWebSocket((c) => {
    let room: string;
    let clients: WSContext[] = [];
    let messages: Message[] = [];

    return {
      onOpen(event, ws) {
        room = c.req.query('room');
        if (!room) {
          ws.close();
          return;
        }

        if (!chatClients[room]) {
          chatClients[room] = { clients: [], messages: [] };
        }
        ({ clients, messages } = chatClients[room]);

        clients.push(ws);
      },
      onMessage(event) {
        const msg: Message = JSON.parse(${event.data});
        msg.timestamp = new Date().toISOString();

        messages.push(msg);

        clients.forEach(client => {
          client.send(JSON.stringify(msg));
        });
      },
      onClose(event, ws) {
        const index = clients.indexOf(ws);
        if (index !== -1) {
          clients.splice(index, 1);
        }
      },
    };
  })
);

app.get('/api/messages/:room', (c) => {
  const room = c.req.param('room');
  const messages = chatClients[room]?.messages || [];
  return c.json(messages);
});

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

import { Hono } from 'hono';
import { createBunWebSocket } from 'hono/bun';

import type { WSContext, WSEvents, WSMessageReceive } from "hono/ws";
const { upgradeWebSocket, websocket } = createBunWebSocket();
const app = new Hono();

type Message = {
  room: string;
  user: string;
  text: string;
  timestamp: string;
};

const chatClients: { [room: string]: { clients: WSContext[], messages: Message[] } } = {};

app.get(
  '/ws',
  upgradeWebSocket((c) => {
    let room: string;
    let clients: WSContext[] = [];
    let messages: Message[] = [];

    return {
      onOpen(event, ws) {
        room = c.req.query('room');
        if (!room) {
          ws.close();
          return;
        }

        if (!chatClients[room]) {
          chatClients[room] = { clients: [], messages: [] };
        }
        ({ clients, messages } = chatClients[room]);

        clients.push(ws);
      },
      onMessage(event) {
        const msg: Message = JSON.parse(${event.data});
        msg.timestamp = new Date().toISOString();

        messages.push(msg);

        clients.forEach(client => {
          client.send(JSON.stringify(msg));
        });
      },
      onClose(event, ws) {
        const index = clients.indexOf(ws);
        if (index !== -1) {
          clients.splice(index, 1);
        }
      },
    };
  })
);

app.get('/api/messages/:room', (c) => {
  const room = c.req.param('room');
  const messages = chatClients[room]?.messages || [];
  return c.json(messages);
});

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

import { Hono } from 'hono';
import { createBunWebSocket } from 'hono/bun';

import type { WSContext, WSEvents, WSMessageReceive } from "hono/ws";
const { upgradeWebSocket, websocket } = createBunWebSocket();
const app = new Hono();

type Message = {
  room: string;
  user: string;
  text: string;
  timestamp: string;
};

const chatClients: { [room: string]: { clients: WSContext[], messages: Message[] } } = {};

app.get(
  '/ws',
  upgradeWebSocket((c) => {
    let room: string;
    let clients: WSContext[] = [];
    let messages: Message[] = [];

    return {
      onOpen(event, ws) {
        room = c.req.query('room');
        if (!room) {
          ws.close();
          return;
        }

        if (!chatClients[room]) {
          chatClients[room] = { clients: [], messages: [] };
        }
        ({ clients, messages } = chatClients[room]);

        clients.push(ws);
      },
      onMessage(event) {
        const msg: Message = JSON.parse(${event.data});
        msg.timestamp = new Date().toISOString();

        messages.push(msg);

        clients.forEach(client => {
          client.send(JSON.stringify(msg));
        });
      },
      onClose(event, ws) {
        const index = clients.indexOf(ws);
        if (index !== -1) {
          clients.splice(index, 1);
        }
      },
    };
  })
);

app.get('/api/messages/:room', (c) => {
  const room = c.req.param('room');
  const messages = chatClients[room]?.messages || [];
  return c.json(messages);
});

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

in this example, the onClose wont work, because the ws isnt the same object as in the array, how do i even identify the the websocket to remove from the array

! blurskye 🇵🇸🍉OP•6/7/24, 6:16 AM

@Micha also needs help with this

Micha•6/7/24, 7:23 AM

@blurSkye

I guess, I found a workaround.

I tried to store the wsws object in a local variable _ws_ws to create a closure like behavior. _ws_ws can then be used later on in every other event like onMessageonMessage or onCloseonClose.

It doesn't seem like a general good solution, because we just omit the provided wsws object in the other events.
But as a workaround, it works

Micha•6/7/24, 7:23 AM

Micha•6/7/24, 7:23 AM

import { Hono } from 'hono';
import { createBunWebSocket } from 'hono/bun';
import { WSContext } from 'hono/dist/types/helper/websocket';

const { upgradeWebSocket, websocket } = createBunWebSocket();

const app = new Hono();
const webSocketClients: WSContext[] = [];

app.get('/', upgradeWebSocket(() => {
  let _ws: WSContext;
  
  return {
    onOpen(_, ws: WSContext) {
      _ws = ws;
      webSocketClients.push(ws);
    },
    onMessage(event) {
      webSocketClients.forEach(webSocketClient => { // broadcast
        if (webSocketClient === _ws) { return; } // possible to check, if current `webSocketClient` is sender
        webSocketClient.send(`${event.data}`);
      });
    },
    onClose() {
      const disconnectedWebSocketClientIndex = webSocketClients.indexOf(_ws);
      if (disconnectedWebSocketClientIndex === -1) { return; }
      
      webSocketClients.splice(disconnectedWebSocketClientIndex, 1);
    }
  };
}));

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

import { Hono } from 'hono';
import { createBunWebSocket } from 'hono/bun';
import { WSContext } from 'hono/dist/types/helper/websocket';

const { upgradeWebSocket, websocket } = createBunWebSocket();

const app = new Hono();
const webSocketClients: WSContext[] = [];

app.get('/', upgradeWebSocket(() => {
  let _ws: WSContext;
  
  return {
    onOpen(_, ws: WSContext) {
      _ws = ws;
      webSocketClients.push(ws);
    },
    onMessage(event) {
      webSocketClients.forEach(webSocketClient => { // broadcast
        if (webSocketClient === _ws) { return; } // possible to check, if current `webSocketClient` is sender
        webSocketClient.send(`${event.data}`);
      });
    },
    onClose() {
      const disconnectedWebSocketClientIndex = webSocketClients.indexOf(_ws);
      if (disconnectedWebSocketClientIndex === -1) { return; }
      
      webSocketClients.splice(disconnectedWebSocketClientIndex, 1);
    }
  };
}));

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

Micha•6/7/24, 7:28 AM

Will the local _ws_ws object be garbage collected, when it's removed from the webSocketClientswebSocketClients array?

Artifex•6/7/24, 2:29 PM

If you are doing it in bun maybe it's better to use the pubsub? Here is simple example.

app.get(
        'pubsub',
        upgradeWebSocket((c) => {
            return {
                onOpen(evt, ws) {
                    const raw = ws.raw as ServerWebSocket;
                    raw.subscribe('pubsub');
                },
                onMessage(evt, ws) {
                    const raw = ws.raw as ServerWebSocket;
                    console.log(raw.isSubscribed('pubsub'));
                    server.publish('pubsub', `Subscriber ${evt.data}`);
                }
            };
        })
    );

const server = serve({
    port: process.env.PORT || 3000,
    hostname: '0.0.0.0',
    fetch: hono.fetch,
    websocket
});

console.log(`Listening on ${server.hostname}:${server.port} 🔥`);

app.get(
        'pubsub',
        upgradeWebSocket((c) => {
            return {
                onOpen(evt, ws) {
                    const raw = ws.raw as ServerWebSocket;
                    raw.subscribe('pubsub');
                },
                onMessage(evt, ws) {
                    const raw = ws.raw as ServerWebSocket;
                    console.log(raw.isSubscribed('pubsub'));
                    server.publish('pubsub', `Subscriber ${evt.data}`);
                }
            };
        })
    );

const server = serve({
    port: process.env.PORT || 3000,
    hostname: '0.0.0.0',
    fetch: hono.fetch,
    websocket
});

console.log(`Listening on ${server.hostname}:${server.port} 🔥`);

Artifex•6/7/24, 2:30 PM

for reference
https://bun.sh/docs/api/websockets#pub-sub

Bun

WebSockets – API | Bun Docs

Bun supports server-side WebSockets with on-the-fly compression, TLS support, and a Bun-native pubsub API.

MMicha Will the local `_ws` object be garbage collected, when it's removed from the `we...

! blurskye 🇵🇸🍉OP•6/7/24, 4:01 PM

probably considering it is orphaned

AArtifex If you are doing it in bun maybe it's better to use the pubsub? Here is simple e...

Micha•6/13/24, 9:14 PM

That's exactly what I need.
Thank you very much!

! blurskye 🇵🇸🍉OP•6/29/24, 11:24 AM

@Michashiii, cant split app routes that use websocket into a different file

! blurskye 🇵🇸🍉OP•6/29/24, 11:24 AM

46 |         websocketListeners.onOpen(new Event("open"), createWSContext(ws));
47 |       }
48 |     },
49 |     close(ws, code, reason) {
50 |       const websocketListeners = websocketConns[ws.data.connId];
51 |       if (websocketListeners.onClose) {
             ^
TypeError: undefined is not an object (evaluating 'websocketListeners.onClose')
      at close (/home/desync/projectx/discord-clone/backend/node_modules/hono/dist/adapter/bun/websocket.js:51:10)
      at /home/desync/projectx/discord-clone/backend/node_modules/hono/dist/adapter/bun/websocket.js:29:28
40 |     };
41 |   };
42 |   const websocket = {
43 |     open(ws) {
44 |       const websocketListeners = websocketConns[ws.data.connId];
45 |       if (websocketListeners.onOpen) {
             ^
TypeError: undefined is not an object (evaluating 'websocketListeners.onOpen')
      at open (/home/desync/projectx/discord-clone/backend/node_modules/hono/dist/adapter/bun/websocket.js:45:10)
      at /home/desync/projectx/discord-clone/backend/node_modules/hono/dist/adapter/bun/websocket.js:29:28

46 |         websocketListeners.onOpen(new Event("open"), createWSContext(ws));
47 |       }
48 |     },
49 |     close(ws, code, reason) {
50 |       const websocketListeners = websocketConns[ws.data.connId];
51 |       if (websocketListeners.onClose) {
             ^
TypeError: undefined is not an object (evaluating 'websocketListeners.onClose')
      at close (/home/desync/projectx/discord-clone/backend/node_modules/hono/dist/adapter/bun/websocket.js:51:10)
      at /home/desync/projectx/discord-clone/backend/node_modules/hono/dist/adapter/bun/websocket.js:29:28
40 |     };
41 |   };
42 |   const websocket = {
43 |     open(ws) {
44 |       const websocketListeners = websocketConns[ws.data.connId];
45 |       if (websocketListeners.onOpen) {
             ^
TypeError: undefined is not an object (evaluating 'websocketListeners.onOpen')
      at open (/home/desync/projectx/discord-clone/backend/node_modules/hono/dist/adapter/bun/websocket.js:45:10)
      at /home/desync/projectx/discord-clone/backend/node_modules/hono/dist/adapter/bun/websocket.js:29:28

! blurskye 🇵🇸🍉OP•6/29/24, 11:24 AM

you get this error,

! blurskye 🇵🇸🍉OP•6/29/24, 11:25 AM

imagineeeeeeeeeeeeeeeeeee
i had the backend entirely written, now i discovery this

!! blurskye 🇵🇸🍉@Michashiii, cant split app routes that use websocket into a different file

Micha•6/29/24, 11:28 AM

I also tried to put all websocket related stuff into its own file.
I exported websocketwebsocket and imported it in my main file where Bun.serve()Bun.serve() is located.
I don't know if you have the same problem, but that worked for me.

MMicha I also tried to put all websocket related stuff into its own file. I exported `w...

! blurskye 🇵🇸🍉OP•6/29/24, 11:29 AM

yes what if i have multiple modules using websockets

! blurskye 🇵🇸🍉OP•6/29/24, 11:29 AM

i do have that

!! blurskye 🇵🇸🍉yes what if i have multiple modules using websockets

Micha•6/29/24, 11:33 AM

Ah I see. In this case, in don't know how that would work.

! blurskye 🇵🇸🍉OP•6/29/24, 11:33 AM

here is a simple example(no need to do bun install, forgor to remove node modules

)

aFFJq8s.zip22.6MB

!! blurskye 🇵🇸🍉@Michashiii, cant split app routes that use websocket into a different file

! blurskye 🇵🇸🍉OP•6/29/24, 11:35 AM

@Nico sorry to mention you randomly, i think you are a hono js developer?

how does websocket module spliting work? it appears we cant split code that use websocket into a different file

!! blurskye 🇵🇸🍉@Nico sorry to mention you randomly, i think you are a hono js developer? how d...

Nico•6/29/24, 6:47 PM

You can always ping me. I’m not apart of the Hono team, I just moderate on here and help contribute. I’m not too familiar with websockets on Hono I’ve only used them once. But I can give it a try later today. Also try asking on GitHub discussions, the core team checks that more often

MMicha Ah I see. In this case, in don't know how that would work.

! blurskye 🇵🇸🍉OP•6/30/24, 3:08 AM

ok found a way, damn how did i not think of this

import { createBunWebSocket, } from 'hono/bun'
import type { UpgradeWebSocket } from './node_modules/hono/dist/types/helper/websocket';
interface BunServerWebSocket<T> {
  send(data: string | ArrayBufferLike, compress?: boolean): void;
  close(code?: number, reason?: string): void;
  data: T;
  readyState: 0 | 1 | 2 | 3;
}
interface BunWebSocketHandler<T> {
  open(ws: BunServerWebSocket<T>): void;
  close(ws: BunServerWebSocket<T>, code?: number, reason?: string): void;
  message(ws: BunServerWebSocket<T>, message: string | Uint8Array): void;
}

interface BunWebSocketData {
  connId: number;
  url: URL;
  protocol: string;
}

const { upgradeWebSocket, websocket }: { upgradeWebSocket: UpgradeWebSocket, websocket: BunWebSocketHandler<BunWebSocketData> } = createBunWebSocket();

export { upgradeWebSocket, websocket };

import { createBunWebSocket, } from 'hono/bun'
import type { UpgradeWebSocket } from './node_modules/hono/dist/types/helper/websocket';
interface BunServerWebSocket<T> {
  send(data: string | ArrayBufferLike, compress?: boolean): void;
  close(code?: number, reason?: string): void;
  data: T;
  readyState: 0 | 1 | 2 | 3;
}
interface BunWebSocketHandler<T> {
  open(ws: BunServerWebSocket<T>): void;
  close(ws: BunServerWebSocket<T>, code?: number, reason?: string): void;
  message(ws: BunServerWebSocket<T>, message: string | Uint8Array): void;
}

interface BunWebSocketData {
  connId: number;
  url: URL;
  protocol: string;
}

const { upgradeWebSocket, websocket }: { upgradeWebSocket: UpgradeWebSocket, websocket: BunWebSocketHandler<BunWebSocketData> } = createBunWebSocket();

export { upgradeWebSocket, websocket };

! blurskye 🇵🇸🍉OP•6/30/24, 3:09 AM

you need a file that defines websocket, and import upgradeWebSocket in the routes and import websocket to serve in the main.ts file

! blurskye 🇵🇸🍉OP•6/30/24, 3:11 AM

one of the interfaces needed for websocket wasnt exported sooo i copied all the interfaces needed

!! blurskye 🇵🇸🍉ok found a way, damn how did i not think of this 💀 ```ts import { createBunWeb...

Micha•6/30/24, 7:08 AM

Nice thanks

websocket issue

Similar Threads

Similar Threads

Similar Threads