I am using Angular and NestJS with socket.io to create a chat application.
When I started saving data on my db, my Angular side stopped updating messages unless page refreshes.
I couldn't find a way to pass the userid on the server gateway in order to search in the db only chat of the user.
Angular service
sendMessage(chat: Chat): void {
this.socket.emit('sendMessage', chat)
} //using it when a message is sent
getNewMessage(): Observable<Chat[]> {
return this.socket.fromEvent<any>('lastChats');
} //using it onInit
sendId(userId: number): void {
this.socket.emit('loadMessages', userId);
} //using it onInit
NestJS Gateway
#WebSocketGateway({ cors: { origin: ['http://localhost:4200'] } })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
constructor(
#InjectRepository(Chat) private chatRepository: Repository<Chat>,
) { }
#WebSocketServer()
server: Server
async handleConnection(client: any, ...args: any[]) {
const chats = await this.chatRepository.createQueryBuilder('chat')
.innerJoinAndSelect('chat.ally', 'ally')
.innerJoinAndSelect('chat.talent', 'talent')
.getMany();
this.server.emit('lastChats', chats)
}
handleDisconnect(client: any, ...args: any[]) {
console.log("Disconnected")
}
#SubscribeMessage('sendMessage')
handleMessage(socket: Socket, chat: Chat) {
if (chat.messagesJSON && chat.messagesJSON.trim() !== '') {
this.chatRepository.save(chat)
this.server.emit('newChat', chat)
}
#SubscribeMessage('loadMessages')
async handleLoad(socket: Socket, id: number) {
const chats = await this.chatRepository.createQueryBuilder('chat')
.innerJoinAndSelect('chat.ally', 'ally')
.innerJoinAndSelect('chat.talent', 'talent')
.where('ally = :user OR talent = :user', { user: id })
.getMany();
this.server.emit('lastChats', chats)
}
}
To send from angular to nestjs you can use
Angular:
this.socket = io(environment.SOCKET_URL, {
extraHeaders: {Authorization: localStorage.getItem('token')},
});
Nestjs: in the handleConnexion
Const jwt =socket.handshake.headers.authorization
I think you can replace the token by usrerId
Related
I'm about to implement a Microservice Architecture with CQRS Design Pattern. The Microservices are communicating with RMQ.
Additionally, I'm adding a BFF for my Application UI.
In this scenario, the BFF needs to listen to certain domain events.
For instance: After the user sends an request to the BFF, the BFF calls a method of a Microservice which invokes an asynchronous event.
The events result will go back to the BFF and then to the user.
I'm thinking of different ways I might be able to implement this and I came up with this concept:
// BFF Application: sign-up.controller.ts
import { Controller, Post, Body } from '#nestjs/common';
import { Client, ClientProxy, Transport } from '#nestjs/microservices';
#Controller('signup')
export class SignupController {
#Client({ transport: Transport.RMQ, options: { urls: ['amqp://localhost:5672'], queue: 'signup_request' } })
client: ClientProxy;
#Post()
async signup(#Body() body: any) {
// Generate a unique identifier for the request
const requestId = uuid();
// Send the request with the unique identifier
const response = await this.client.send<any>({ cmd: 'signup', requestId }, body).toPromise();
// Wait for the SignUpEvent to be emitted before sending the response
return new Promise((resolve, reject) => {
this.client.subscribe<any>('signup_response', (response: any) => {
// Check the unique identifier to ensure the event corresponds to the original request
if (response.requestId === requestId) {
resolve(response);
}
});
});
}
}
After sending the request with the unique identifier, the microservice will execute a sign up command:
// Microservice Application: sign-up.handler.ts
import { CommandHandler, ICommandHandler } from '#nestjs/cqrs';
import { SignUpCommand } from './commands/sign-up.command';
import { SignUpEvent } from './events/sign-up.event';
import { EventBus } from '#nestjs/cqrs';
#CommandHandler(SignUpCommand)
export class SignUpCommandHandler implements ICommandHandler<SignUpCommand> {
constructor(private readonly eventBus: EventBus) {}
async execute(command: SignUpCommand) {
// Validating the user/account aggregate
// ...
// Emit the SignUpEvent with the unique identifier
this.eventBus.publish(new SignUpEvent(user, command.requestId));
}
}
Now the Event Handler gets called:
// Microservice Application: signed-up.handler.ts
import { EventsHandler, IEventHandler } from '#nestjs/cqrs';
import { SignUpEvent } from './events/sign-up.event';
import { ClientProxy, Transport } from '#nestjs/microservices';
#EventsHandler(SignUpEvent)
export class SignUpEventHandler implements IEventHandler<SignUpEvent> {
#Client({ transport: Transport.RMQ, options: { urls: ['amqp://localhost:5672'], queue: 'signup_response' } })
client: ClientProxy;
async handle(event: SignUpEvent) {
// Persist the user
const user = await this.persistUser(event.user);
// Generate access and refresh tokens
const tokens = this.generateTokens(user);
// Emit the SignUpResponse event with a unique identifier
await this.client.emit('signup_response', { user, tokens, requestId: event.requestId });
}
}
Is this, a valid way to implement this type of behaviour?
Thank you in advance.
I'm creating a simple chat app with rooms and I meet the problem, that, seems like socket.io can not join the room, I have schemas in mongodb, those are users, messages and rooms, for room id I provide the id of rooms schema and then want to join it with one event for example, I'm logging in from react app, then by user id I'm finding all rooms that contains my id and then want to join them all.
For the second step I want to send message and I'm targeting the room that I want send the message, with .to(roomId).emit(..., ...)
but all of this tries are useless, it not works
here is the nestjs gateway code:
import { Logger } from '#nestjs/common';
import {
WebSocketGateway,
WebSocketServer,
SubscribeMessage,
OnGatewayDisconnect,
OnGatewayInit,
OnGatewayConnection,
MessageBody,
ConnectedSocket,
WsResponse,
} from '#nestjs/websockets';
import { Socket, Server } from 'socket.io';
import { UserService } from 'src/user/user.service';
import { ChatService } from './chat.service';
import { CreateChatDto } from './dto/create-chat.dto';
import { UpdateChatDto } from './dto/update-chat.dto';
#WebSocketGateway({
cors: {
origin: '*',
},
})
export class ChatGateway
implements OnGatewayConnection, OnGatewayDisconnect, OnGatewayInit
{
constructor(
private readonly chatService: ChatService,
private userService: UserService,
) {}
private readonly logger: Logger = new Logger(ChatGateway.name);
#WebSocketServer() server: Server;
afterInit(client: Socket) {
this.logger.log('Initialized SocketGateway');
}
handleConnection(client: Socket) {
this.logger.log(`[connection] from client (${client.id})`);
}
handleDisconnect(client: Socket) {
this.logger.log(`[disconnection] from client(${client.id})`);
}
//this works when user logs is
#SubscribeMessage('setup')
async handleJoinRoom(client: Socket, #MessageBody() userData) {
//here I'm getting all rooms that contains my user id
const rooms = await this.userService.findAll(userData);
await this.logger.log(
`[joinWhiteboard] ${userData}(${client.id}) joins ${userData}`,
);
await rooms.map((item) => {
client.join(item._id.toString());
//joining all rooms that I'm in
client.to(item._id.toString()).emit('joined');
});
}
#SubscribeMessage('new message')
create(client: Socket, #MessageBody() recievedMessage) {
this.logger.log(
`[sent a new message] from (${client.id}) to ${recievedMessage.chatRoomId}`,
);
//sending message to the room
client
.to(recievedMessage.chatRoomId)
.emit('message recieved', recievedMessage);
}
}
in my github is the full code(react part also), please feel free if you need to see it
https://github.com/Code0Breaker/chat
I tried the sample SSE application provided with nest.js (28-SSE), and modified the sse endpoint to send a counter:
#Sse('sse')
sse(): Observable<MessageEvent> {
return interval(5000).pipe(
map((_) => ({ data: { hello: `world - ${this.c++}` }} as MessageEvent)),
);
}
I expect that each client that is listening to this SSE will receive the message, but when opening multiple browser tabs I can see that each message is consumed only by one browser, so if I have three browsers open I get the following:
How can I get the expected behavior?
To achieve the behavior you're expecting you need to create a separate stream for each connection and push the data stream as you wish.
One possible minimalistic solution is below
import { Controller, Get, MessageEvent, OnModuleDestroy, OnModuleInit, Res, Sse } from '#nestjs/common';
import { readFileSync } from 'fs';
import { join } from 'path';
import { Observable, ReplaySubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { Response } from 'express';
#Controller()
export class AppController implements OnModuleInit, OnModuleDestroy {
private stream: {
id: string;
subject: ReplaySubject<unknown>;
observer: Observable<unknown>;
}[] = [];
private timer: NodeJS.Timeout;
private id = 0;
public onModuleInit(): void {
this.timer = setInterval(() => {
this.id += 1;
this.stream.forEach(({ subject }) => subject.next(this.id));
}, 1000);
}
public onModuleDestroy(): void {
clearInterval(this.timer);
}
#Get()
public index(): string {
return readFileSync(join(__dirname, 'index.html'), 'utf-8').toString();
}
#Sse('sse')
public sse(#Res() response: Response): Observable<MessageEvent> {
const id = AppController.genStreamId();
// Clean up the stream when the client disconnects
response.on('close', () => this.removeStream(id));
// Create a new stream
const subject = new ReplaySubject();
const observer = subject.asObservable();
this.addStream(subject, observer, id);
return observer.pipe(map((data) => ({
id: `my-stream-id:${id}`,
data: `Hello world ${data}`,
event: 'my-event-name',
}) as MessageEvent));
}
private addStream(subject: ReplaySubject<unknown>, observer: Observable<unknown>, id: string): void {
this.stream.push({
id,
subject,
observer,
});
}
private removeStream(id: string): void {
this.stream = this.stream.filter(stream => stream.id !== id);
}
private static genStreamId(): string {
return Math.random().toString(36).substring(2, 15);
}
}
You can make a separate service for it and make it cleaner and push stream data from different places but as an example showcase this would result as shown in the screenshot below
This behaviour is correct. Each SSE connection is a dedicated socket and handled by a dedicated server process. So each client can receive different data.
It is not a broadcast-same-thing-to-many technology.
How can I get the expected behavior?
Have a central record (e.g. in an SQL DB) of the desired value you want to send out to all the connected clients.
Then have each of the SSE server processes watch or poll that central record
and send out an event each time it changes.
you just have to generate a new observable for each sse connection of the same subject
private events: Subject<MessageEvent> = new Subject();
constuctor(){
timer(0, 1000).pipe(takeUntil(this.destroy)).subscribe(async (index: any)=>{
let event: MessageEvent = {
id: index,
type: 'test',
retry: 30000,
data: {index: index}
} as MessageEvent;
this.events.next(event);
});
}
#Sse('sse')
public sse(): Observable<MessageEvent> {
return this.events.asObservable();
}
Note: I'm skipping the rest of the controller code.
Regards,
I have an API (Localhost:3000) using node and a front end (Localhost:4200) using Angular 6. Using my regular chrome browser, I am able to CRUD to the database in the API but when I use the android emulator using (10.0.2.2:4200), I cannot do any of the CRUD to the database anymore. Please see my codes below:
Node [index.js]
const express = require("express");
const nedb = require("nedb");
const rest = require("express-nedb-rest");
const cors = require("cors");
const app = express();
const datastore = new nedb({
filename: "mycoffeeapp.db",
autoload: true
});
const restAPI = rest();
restAPI.addDatastore('coffees', datastore);
app.use(cors());
app.use('/', restAPI);
app.listen(3000);
angular front end
This is in the data.service
import { Injectable } from "#angular/core";
import { HttpClient } from "#angular/common/http";
#Injectable({
providedIn: "root"
})
export class DataService {
public endpoint = "http://localhost:3000";
constructor(
private http: HttpClient
) {}
getList(callback) {
this.http.get(`${this.endpoint}/coffees`)
.subscribe(response => {
callback(response);
});
}
get(coffeeId: string, callback) {
this.http.get(`${this.endpoint}/coffees/${coffeeId}`)
.subscribe(response => {
callback(response);
});
}
save(coffee, callback) {
if (coffee._id) {
this.http.put(`${this.endpoint}/coffees/${coffee._id}`, coffee)
.subscribe(response => {
callback(true);
});
} else {
this.http.post(`${this.endpoint}/coffees`, coffee)
.subscribe(response => {
callback(true);
});
}
}
}
in the component:
constructor(
private data: DataService,
private router: Router,
private gls: GeoLocationService
) { }
ngOnInit() {
this.data.getList(list => {
this.list = list;
});
}
If you run an emulated android device and try to access your development environment environment on 10.0.2.2:4200, you'll be able to reach the angular app provided that th emulator is on the same network.
Now, you need to make sure that your API is reachable from outside of your local machine, and, in your angular front, set the API url using an IP address
export class DataService {
public endpoint = "http://10.0.2.2:3000";
If you use localhost, this will point to the emulated device itself, which does not have you API runnnig
I am currently working with a node server that I've set up and created an endpoint /user-info which res.send({id: <my-id>, name: <my-display-name>})
On Angular I have created a global.service.ts file that will call this endpoint using http.get and subscribe that data and store into two variables I have declared.
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Injectable()
export class Globals {
constructor(private http: HttpClient) { }
public id: string;
public name: string;
userInfo() {
this.http.get('/user-info').subscribe(
(data: any) => {
this.id = data.id;
}
);
console.log(this.id);
}
}
Once I console.log(this.id) it returns undefined. I have already the server-side to see if that was causing the problem but it returns a string.
In my server.js file (node server) I am working with express. This is the endpoint:
app.get('/user-info', function(req, res) {
client.get('id', (err, data) => {
client.get('name', (err, reply) => {
res.send({id: data, name: reply})
})
})
})
I am using redis to store values 'id' and 'name' and the client.get is just a redis command used to call those values from cache. I have tested just checking localhost:8000/user-info and everything looks fine.
Am I missing/misunderstanding something? Thanks!
if console.log still outside of call, it will execute before you got a response. Try this:
userInfo() {
this.http.get('/user-info').subscribe(
(data: any) => {
this.id = data.id
console.log(this.id);
}
)
}