nest: Multiple @WebSocketGateway ends up with `Error during WebSocket handshake`

I’m submitting a…


[ ] Regression 
[ x ] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead post your question on Stack Overflow.

Current behavior

Within my app, I was initially managing socket connection from only one file. Everything was working great.

Then, I decided to start some code refactoring and split this file in 2: One for users, one for orders.

@WebSocketGateway({ namespace: 'users' })
export class UsersService implements OnGatewayDisconnect {
  ...
}

and

@WebSocketGateway({ namespace: 'orders' })
export class OrdersService implements OnGatewayConnection {
  ...
}

As soon as I do that, I end up with an error displayed in the frontend: WebSocket connection to 'ws://localhost:3000/socket.io/?EIO=3&transport=websocket&sid=some-sid' failed: Error during WebSocket handshake: Unexpected response code: 400

I can start my app with just the user part, and when I comment everything related to websockets within orders, it’s working.

Expected behavior

I’d like to be able to use multiple @WebSocketGateway for code organisation.

Minimal reproduction of the problem with instructions

Unfortunately I don’t have time to create a repro right now. So in order to reproduce, create a project with 2 @WebSocketGateway and see what’s happening in frontend side.

Just let me know if a repro would be super useful and I’ll do my best to help.

What is the motivation / use case for changing the behavior?

I think it’s a bug, but maybe it’s just something I haven’t understand with websockets? Also, I’ve been putting here some example with a namespace but it wasn’t working either without namespace.

Environment


Nest version: 4.2.2
 
For Tooling issues:
- Node version: 8.6.0
- Platform: Ubuntu 17.10, 64 bits

Others:

Yes! It’s my first project with Nest and also my first issue.
So I’m taking few lines to say thank you for this amazing project, I do feel very productive with it 😄

Congrats and keep up the good work 👏 👏 👏

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 17 (5 by maintainers)

Most upvoted comments

Hi guys, Thanks for your patience! It’s a bug, I have found a reason already. It’ll be fixed in the nearest update 🎉

@maxime1992 thank you for your watchfulness! it’s fixed in 4.5.1 (quick fix heh)

Please update your packages into 4.5.0 and let me know whether it fixes your issue or not 🙂

Same! Even if it’s fixed before the release I’ll just build Nest locally 😅 It’s the last thing I’m waiting for before release the huge update of Pizza-Sync with a full rewrite of the backend, using Nest 🎉 😄

Waiting for this too, can’t wait ❤️

Ran into the same issue today as well. I have two WebSocketGateway’s and both of them are working fine individually. As soon as I add them both to the module, one stops working and I am seeing the Unexpected response code: 400 Error.

@kamilmysliwiec I managed to make a repro of the bug on a minimal project.

Here it is: https://github.com/maxime1992/nestjs-repro-bug-multiple-websocketgateway/commits/master

Take a look to 2 latest commits:

How to repro:
git clone https://github.com/maxime1992/nestjs-repro-bug-multiple-websocketgateway.git
cd nestjs-repro-bug-multiple-websocketgateway

First terminal:

yarn
nodemon index.js

Second terminal:

cd frontend
yarn
http-server

(if you don’t have http-server: yarn global add http-server) Go to http://127.0.0.1:8080 and take a look to your console + the code.