DEV Community

Building a Real-Time Chat Application with Socket.io, Express, React.js, and Chakra UI (Vite Setup)

Jagroop Singh on September 23, 2024

In this blog, we’ll build a real-time chat application using Socket.io for bi-directional communication, Express.js for the server, React.js for th...

Read full post

Charles Robertson • Sep 25

This is a great starter app, but it would be really great, if you could show us how to set up an admin to multiple user chat app. So, there is one admin and he can chat with multiple users, but each user only sees his/her own messages & the response from the admin. The admin would be able to see all users in a list and then choose which user to interact with.
This would be a brilliant real world chat app tutorial, if you don’t think it’s too complicated.

Jagroop Singh • Sep 25

Great idea !!
But I think it's good for Bootcamp but it's too complicated for covering this in blog.

Charles Robertson • Sep 25 • Edited

I tried creating this app in Angular, it worked pretty well, but after a while messages started to leak to the wrong user.

As I remember I sent:

userid
threadid 
messageid

As admin, I could then choose which user to send a message back to.
Of course if the userid in the client, doesn’t match then the message isn’t shown. But this seems a really inefficient way of pushing data. It would be far better to only send messages from the admin to a specific user.
However, I guess this is impossible, because a websocket cannot broadcast to specific clients? Or can it, if we take advantage of the room feature? Maybe if a room has the same id as the userid, then this would work?

Jagroop Singh • Sep 25

@charlesr1971 , you can create room with specific id for example jobId and add only those user's to socket room which you want to.

Charles Robertson • Sep 25

Is it possible to push a message back to an individual client, if multiple clients are listening to the same socket?
From what I know, a message is broadcast to every client that listens and then it is up to the front end code to filter those messages out. Obviously the userid is sent back with every message and if this matches the client userid, then the user can view that message.
But if I can set each room to a specific userid then presumably it will send the response back to the correct user?
But maybe I am misunderstanding how a room works?
I did read that the socket automatically allocates an incoming message to its own room, which is represented by a random id.

Web • Sep 23

@jagroop2001 ,Your blog makes difficult tasks feel like a piece of cake.

Jagroop Singh • Sep 23

Thanks for appreciation 🥳🧡.

It would be really helpful if you will react and share this with your friends.

john • Sep 23

@works is right.

john • Sep 23

@jagroop2001 , I'm skeptical that creating a chatting application is that simple. Thank you for sharing this fantastic blog.

Jagroop Singh • Sep 23

Thanks @john12 🧡🧡

determinant logic • Sep 30

Seek for professional assistance from this tech guru on Telegram @prompttechrecovery, If you ever lost your funds in any online investment scheme, this tech guru is a pro for crypto investment loss recovery. He recently helped me recover from a cryptocurrency investment scam with great help. I owe him one.

Jagroop Singh • Sep 30

Thank you for your comment, but it looks like this might be spam

Okoro chimezie bright • Sep 24

thanks a lot for sharing

Jagroop Singh • Sep 24

@mezieb You're welcome! 😊 I'm so happy my blog is useful for you!

Okoro chimezie bright • Sep 24

yes i was integrating such functionality with socket.io,express in an angular project and you throwing more light to it help me structure things well.

Jagroop Singh • Sep 24

@mezieb
I’m glad to hear that! Integrating with Socket.IO and Express in an Angular project sounds exciting. If you need any more tips or have questions, feel free to ask! 😊