3

I have a split app using nestjs on the server and an Angular app as the client. Setting up websockets with socket.io seemed pretty easy using the @nestjs/websockets module and on the client I used ngx-socket-io. I used this repo as basis. Now when I update the project's @nestjs/websockets dependency to the latest version I get

  • CORS errors and
  • an error that the client couldn't load the socket.io client js file http://localhost:3000/socket.io/?EIO=3&transport=polling&t=Mg48H4P

I expected CORS problems and after the update, I could fix them by adding

  app.enableCors({
    origin: 'http://localhost:4200',
    credentials: true,
  });

to my main.ts file, but I don't know why the client file is not served. With the version of the repo (5.7.x) there are neither CORS errors nor problems with serving the file.

I tried a couple of settings of @WebSocketGateway(), moving to a different port, setting serveClient (even though it should be true by default), but nothing seemed to work. Any advice?

thanks

3 Answers 3

4

In my case I replaced

app.useWebSocketAdapter(new WsAdapter(app));

from

import { WsAdapter } from '@nestjs/platform-ws';

with

app.useWebSocketAdapter(new IoAdapter(app));

in main .ts from

import { IoAdapter } from '@nestjs/platform-socket.io';

Worked like a charm!

Sign up to request clarification or add additional context in comments.

Comments

1

The problem was that nestjs did separate the lower level platform (socket.io, express, fastify, ...) from the nestjs modules. The websocket module requires to install an underlying platform, for socket.io

npm install --save @nestjs/platform-socket.io

To serve the socket.io client file it seems like there also needs to be an HTTP platform installed, for express

npm install --save @nestjs/platform-express

More info in the migration guide for v6.

Comments

0

I had the same problem. i was opening the client side of the application in the web-browser, but directly from my filesystem (i would double click on the file index.html next to the little dummy fake-front-end.js on my desktop for example...). It seems that the CORS problem would persist until i actually accessed the index.html through a proper server. So i created a route on my backend, to serve the index.html, and the fake-front-end.js.

There is a section about CORS on the socket.io officual documentation. And there is a section on the nestjs website, but both didnt really helped in my case.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.