Websockets not connecting with postman using nestjs - node.js

Question

I am trying to make a connection with websockets. If I need to connect to the postman I need to include app.useWebSocketAdapter(new WsAdapter(app)); to make it work. But once I include this line it stop connecting with my react native code. When I remove this line it starts connecting with react native code and not with postman. How can I make it work with both react native client side and postman.
Below is my gateway code
import { Logger } from '#nestjs/common';
import {
OnGatewayConnection,
OnGatewayDisconnect,
OnGatewayInit,
SubscribeMessage,
WebSocketGateway,
WebSocketServer,
} from '#nestjs/websockets';
import { Server, Socket } from 'socket.io';
#WebSocketGateway()
export class AppGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
#WebSocketServer()
server!: Server;
private logger: Logger = new Logger('AppGateway');
#SubscribeMessage('msgToServer')
handleMessage(client: Socket, payload: string): void {
this.server.emit('msgToClient', payload);
}
afterInit(server: Server) {
this.logger.log('Init');
}
handleDisconnect(client: Socket) {
this.logger.log(`Client disconnected: ${client.id}`);
}
handleConnection(client: Socket, ...args: any[]) {
this.logger.log(`Client connected: ${client.id}`);
}
}
main.ts
import { AppModule } from 'app.module';
import { WsAdapter } from '#nestjs/platform-ws';
async function setupApplication(): Promise<INestApplication> {
app.useWebSocketAdapter(new WsAdapter(app));
await app.listen(port);
return app;
}
In the above main.ts file. If I remove app.useWebSocketAdapter(new WsAdapter(app)); then I am able to connect with my react native client code but then not with postman.
react native code
import React, {useEffect} from 'react';
import {Button, SafeAreaView} from 'react-native';
import io from 'socket.io-client';
const socket = io('http://localhost:3000');
export default function App() {
const receiveMessage = () => {
socket.on('msgToClient', msg => {
console.log('msg', msg);
});
};
const sendMessage = () => {
socket.emit('msgToServer','test message');
};
useEffect(() => {
receiveMessage()
}, []);
return (
<SafeAreaView>
<Button title="Message" onPress={sendMessage} />
</SafeAreaView>
);
}

Answer 1

Postman uses the ws: protocol, which is what the WsAdapter is for. By default Nest uses socket.io as the de facto WebSocket adapter which does not connect via ws diectly, but via the socket.io engine. Your react code is using socket.io so your server code should use socket.io too. This does mean that you won't be able to use postman to test your websockets though, unless you keep swapping back and forth.

Answer 2

Postman now has support to Socket.io servers (it's in beta):
Step by step from the provided link:
In the left-hand sidebar, click New.
Select WebSocket Request.
Within the new tab’s header, click the drop-down that says Raw, and select Socket.IO instead.
Type the address of your Socket.IO server into the URL bar.
Click Connect.
As you do not provide a specific namespace on the #WebSocketGateway() decorator and assuming that you are using the default NestJS port 3000, the step 4 address would be:
http://localhost:3000
Additionally, if you are running NestJS in WSL, you might want to see this answer