Message read - Chat

Wappler General How To
#1

Hello everyone,

We have developed a chat feature within our app. We are currently using socket.io to refresh the message list whenever a user sends a message to an inbox. It’s important to note that at the moment, we don’t have support for one-on-one messages; instead, our system focuses on group messaging. However, this configuration can change in specific situations.

Now, we have a new requirement: determining whether a user has read a message. Do any of you have any ideas or previous experience implementing this feature?

Thanks!

#2

Here is what Chatgpt suggest lol. But, all jokes aside I have never done a chatroom before.
To implement a “message has been read” feature or determine whether a user has read a message in a messaging app using Node.js and Socket.IO, you can follow these general steps:

  1. Database Structure: Make sure your database schema includes a field to track the read status of each message. For example, you could add a boolean field called “isRead” to your message model/table.
  2. Updating the Read Status: When a user opens a chat or a specific message, you need to update the read status for that message. You can do this by sending an event to the server using Socket.IO. For example, when a user opens a chat or views a message, emit an event to the server with the message ID and the user ID. The server should then update the message’s “isRead” field to true.
  3. Emitting Events: After updating the read status, emit a socket event to notify other users involved in the chat that the message has been read. You can do this by broadcasting the event to the appropriate chat room or emitting it to specific connected sockets.
  4. Client-side Handling: On the client-side, listen for the “message read” event using Socket.IO. When the event is received, you can update the UI to indicate that the message has been read, such as by changing the message’s color or displaying a “read” indicator.
1 Like
#3 
// Backend 
// When a user opens a chat or views a message
socket.on('messageRead', ({ messageId, userId }) => {
  // Update the message's read status in the database
  // You'll need to implement this part based on your database schema
  // Set the 'isRead' field to true for the specified message and user

  // Emit a 'messageRead' event to notify other users in the chat
  socket.broadcast.to(chatRoomId).emit('messageRead', { messageId, userId });
});

//front end

// When the server emits a 'messageRead' event
socket.on('messageRead', ({ messageId, userId }) => {
  // Update the UI to indicate that the message has been read
  // You'll need to implement this part based on your application's UI
  // For example, change the color or add a "read" indicator to the message
});
1 Like
#4

I also found this and I found this section interesting where he talk about if a user has not read the last 15 or so messages how to handle that,
https://www.freecodecamp.org/news/create-a-professional-node-express/#mark-an-entire-conversation-as-read-feature-similar-to-whatsapp-

1 Like