Add a ref to the end of the messages container. On new message (in the socket.on('message:received') handler), call messagesEndRef.current.scrollIntoView({ behavior: 'smooth' }). This keeps the chat scrolled to the bottom when new messages arrive.
How do I auto-scroll to the latest message?
More FAQs in Implementing Real-Time Messaging with Socket.io Send, Receive, and Broadcast
On message:send event: validate input, save to MongoDB, update conversation, broadcast to room with io.to(roomId).emit('message:received', message), check if receiver is online (if not, send email), and acknowledge with callback. Client emits message:send with a callback, listens for message:received, and updates the UI.
Maintain a Map of online users (userId → socketId). When sending a message, check if the receiver is online. If not, send an email notification with the sender's name, message preview, and a link to the chat. This keeps offline users informed.
The client passes a callback as the third argument: socket.emit('message:send', data, callback). The server receives the callback as the second parameter and calls it with the result: callback({ success: true, message }). This confirms the server received and processed the event.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.