I am currently facing a challenge setting up a real-time application using socket.io in Angular and node.js. The application is not functioning as expected.
When a client makes a new post, the other clients do not receive updates until there is some interaction with the client (e.g. clicking elsewhere on the page or switching browser tabs).
Interestingly, when the console is open in the browser, I can see the new posts being logged without needing any client interaction.
Angular:
import io from 'socket.io-client';
const socket = io('http://localhost:3000');
posts: Post[] = [];
...
// Inside ngOnInit:
socket.on('data123', (res) => {
console.log('Updating list..', res);
this.postService.getPosts();
this.postsSub = this.postService.getPostUpdateListener()
.subscribe((posts: Post[]) => {
this.posts = posts;
});
});
Displaying in the template:
<... *ngFor="let item of posts">
Inside PostsService:
getPosts() {
this.http.get<{ message: string, posts: Post[] }>('http://localhost:3000/api/posts')
.subscribe((postData) => {
this.posts = postData.posts;
this.postsUpdate.next([...this.posts]);
});
}
Node.js - I have noticed that the socket.io solution is not sending the actual updated list yet:
const io = socket(server);
io.sockets.on('connection', (socket) => {
console.log(`new connection id: ${socket.id}`);
sendData(socket);
})
function sendData(socket){
socket.emit('data123', 'TODO: send the actual updated list');
setTimeout(() => {
console.log('sending to client');
sendData(socket);
}, 3000);
}
What finally worked as intended:
Using setInterval instead "socket.on(..)" on the front-end resulted in the desired outcome. This approach ensures that the clients update automatically without requiring any manual interaction. It seems evident that there might be an issue with the socket solution in the Angular part.