Unread

Last Edit: Feb 02 2020

The most common use case for client level events are unread counts. Here's an example of a complete unread count integration for your chat app. As a first step we get the unread count when the user connects:


const user = await client.setUser({ id: 'myid' }, token);

// response.me.total_unread_count returns the unread count
// response.me.unread_channels returns the count of channels with unread messages
                    

final response = await client.setUser(user, "{{ chat_user_token }}");

print("There are ${response.me.unreadChannels} unread channels");
print("There are ${response.me.totalUnreadCount} unread messages");
                    

By default the React components will mark the messages as read automatically. You can also make the call manually like this:


// mark all messages on a channel as read
await channel.markRead();
                    

await channel.markRead();
                    

While you're using the app, the unread count can change. A user can be added to a channel, a new message can be created, or the user can mark the messages as seen on another tab/device.

The markRead function can also be executed server-side by passing a user ID as shown in the example below:


// mark all messages on a channel as read (server side)
await channel.markRead({ user_id: 'foo' });
                    

// mark all messages on a channel as read (server side)
$mark = $channel->markRead('user-id');
                    

// This example is only for server-side clients
                    

To support updating the unread count in realtime, you can listen to these events.

  1. notification.added_to_channel

  2. notification.removed_from_channel

  3. notification.message_new

  4. notification.mark_read

All 4 of these events include the fields: total_unread_count and unread_channels. You can listen to them all at once like this:


client.on((event) => {
     if (event.total_unread_count !== undefined) {
         console.log(event.total_unread_count);
     }

     if (event.unread_channels !== undefined) {
         console.log(event.unread_channels);
     }
});
                    

client.on().where((Event event) => event.unreadChannels != null).listen((Event event) {
  print("Unread channels count changed to:${event.unreadChannels}");
});

client.on().where((Event event) => event.totalUnreadCount != null).listen((Event event) {
  print("Unread messages count changed to:${event.totalUnreadCount}");
});