Unable to establish WebSocket connection with separated code

[farhantallei]

I am experiencing an issue when trying to separate my WebSocket code into different parts.

The initial code, where everything is in a single block, works fine.

import { Elysia, t } from "elysia"

const app = new Elysia()
  .group("inbox", (app) =>
    app.ws("join", {
      body: t.Object({
        inboxId: t.String(),
      }),
      message(ws, { inboxId }) {
        ws.send(inboxId)
      },
    })
  )
  .listen(3000)

However, when I split the code into separate parts, the WebSocket connection to ws://localhost:3000/inbox/join fails with the error message: WebSocket connection to 'ws://localhost:3000/inbox/join' failed.

const ws = new Elysia().group("inbox", (app) =>
  app.ws("join", {
    body: t.Object({
      inboxId: t.String(),
    }),
    message(ws, { inboxId }) {
      ws.send(inboxId)
    },
  })
)

const app = new Elysia().use(ws).listen(3000)

Elysia Version: 0.7.29 Bun Version: 1.0.13

Thank you for your assistance, and I apologize if I am using the framework incorrectly. Your guidance is highly appreciated.

[WIGGLES-dev]

I ran into this issue too, I think currently websocket connections only work with one segment at the root of your application. This probably needs to go into a feature request (and should really be documented on the website).

[Mudbill]

I've been encountering this issue as well, and came to report it after testing. It seems like WebSocket connections don't work as intended when behind a .group that comes off another instance of Elysia than the root instance.

Testing this URI: ws://localhost:3000/group/ws

Works:

const websocketApp = new Elysia().ws("/ws", {});
const app = new Elysia().group("/group", app => app.use(websocketApp)).listen(3000);

Doesn't work:

const websocketApp = new Elysia().group("/group", (app) => app.ws("/ws", {}));
const app = new Elysia().use(websocketApp).listen(3000);

Notice how the .group is simply moved to the other instance.

The server ends up responding with a 400 Bad Request.

Bun: 1.1.0 Elysia: 1.0.13

[chefnaphtha]

this still happens, related issue https://github.com/elysiajs/elysia/issues/553

it's really confusing too since the client console just logs this:

[SaltyAom]

This issue have been fixed by previous subsequent patches of Elysia as it's now unable to reproduce the bug in the latest version of Elysia (1.1.9 by the time of writing) with the following code:

import { Elysia, t } from '../src'

const ws = new Elysia().group('inbox', (app) =>
	app.ws('join', {
		body: t.Object({
			inboxId: t.String()
		}),
		message(ws, { inboxId }) {
			ws.send(inboxId)
		}
	})
)

const app = new Elysia().use(ws).listen(3000)

Feel free to reopen the issue if the bug still persist, thanks