Chat JavaScript v4
Chat JavaScript
Chat
JavaScript
Home
/
Chat
/
JavaScript
This is the new Docs for Chat SDK v4 beta for JavaScript. To see the previous Docs, click here.

Event handler

Sendbird Chat SDK for JavaScript provides three types of event handlers for your client apps: channel event handler, user event handler, and connection event handler. Through the channel event handler and user event handler, Sendbird server notifies online client apps of events that happen on the channels and users. When the client app is disconnected from the server, the SDK tries to reconnect to the server and notifies the client app of the result through the connection event handler.

With event callbacks provided by channel and user event handlers, you can write the event-related processing code you want to execute. For example, the GroupChannelHandler.onMessageReceived() method in client apps is called when a message has been received in a channel. This callback receives BaseChannel and BaseMessage objects as parameters, which contain new information on the channel and message.

The Chat SDKs interact with our server through persistent WebSocket connections and multi-thread processing, receiving callbacks of asynchronous events of channels, users, and reconnect process of client apps through handlers in real-time. This allows you to track the events and implement your own chat features associated with those events.


Add and remove a channel event handler

To receive and retrieve information about certain events happening in the channels from Sendbird server, you need to add a channel event handler with its UNIQUE_HANDLER_ID by calling sb.groupChannel.addGroupChannelHandler() for group channel events and sb.openChannel.addOpenChannelHandler() for open channel events. The UNIQUE_HANDLER_ID is a unique identifier you should declare to register multiple concurrent handlers.

Note: If you want to keep informed of changes related to the channels and notify other users' client apps of those changes, define and register multiple channel event handlers.

List of open channel events

MethodInvoked whenNotified devices

onMessageReceived()

A message has been received in an open channel.

All devices where client apps with the channel are in the foreground, except the device that sent the message.

onMessageUpdated()

A message has been updated in an open channel.

All devices where client apps with the channel are in the foreground, except the device where the message was updated.

onMessageDeleted()

A message has been deleted in an open channel.

All devices where client apps with the channel are in the foreground, including the device where the message was deleted.

onMentionReceived()

A user has been mentioned in a message sent in an open channel.

All devices of mentioned users (up to 10) in the channel, including the device that was used to mention other users.

onChannelChanged()

One of the following open channel properties has been changed: name, cover image, data, custom type, or operators.

All devices that are connected to the changed channel, including the device where the channel was changed.

onChannelDeleted()

An open channel has been deleted.

All devices where client apps with the channel are in the foreground, including the device where the channel was deleted.

onChannelFrozen()

An open channel has been frozen.

All devices where client apps with the channel are in the foreground, including the device where the channel was frozen.

onChannelUnfrozen()

An open channel has been unfrozen.

All devices where client apps with the channel are in the foreground, including the device where the channel was unfrozen.

onMetaDataCreated()

A metadata for an open channel has been created.

All devices where client apps with the channel are in the foreground, including the device where the metadata was created.

onMetaDataUpdated()

A metadata for an open channel has been updated.

All devices where client apps with the channel are in the foreground, including the device where the metadata was updated.

onMetaDataDeleted()

A metadata for an open channel has been deleted.

All devices where client apps with the channel are in the foreground, including the device where the metadata was deleted.

onMetaCounterCreated()

A metacounter for an open channel has been created.

All devices where client apps with the channel are in the foreground, including the device where the metacounter was created.

onMetaCounterUpdated()

A metacounter for an open channel has been updated.

All devices where client apps with the channel are in the foreground, including the device where the metacounter was updated.

onMetaCounterDeleted()

A metacounter for an open channel has been deleted.

All devices where client apps with the channel are in the foreground, including the device where the metacounter was deleted.

onUserEntered()

A user has entered an open channel.

All devices where client apps with the channel are in the foreground, including the device that the user entered that channel.

onUserExited()

A user has exited an open channel.

All devices where client apps with the channel are in the foreground, except the device that the user exited that channel.

onUserMuted()

A user has been muted in an open channel.

All devices where client apps with the channel are in the foreground, including the device where the user was muted.

onUserUnmuted()

A user has been unmuted in an open channel.

All devices where client apps with the channel are in the foreground, including the device where the user was unmuted.

onUserBanned()

A user has been banned from an open channel.

All devices where client apps with the channel are in the foreground, including the device where the user was banned.

onUserUnbanned()

A user has been unbanned from an open channel.

All devices where client apps with the channel are in the foreground, including the device where the user was unbanned.

onChannelParticipantCountChanged()

One or more open channels' participant count has changed.

All connected devices where client apps have the affected open channels in their channel list.

List of group channel events

MethodInvoked whenNotified devices

onMessageReceived()

A message has been received in a group channel.

All devices where client apps with the channel are in the foreground, except the device that sent the message.

onMessageUpdated()

A message has been updated in a group channel.

All devices where client apps with the channel are in the foreground, except the device where the message was updated.

onMessageDeleted()

A message has been deleted in a group channel.

All devices where client apps with the channel are in the foreground, including the device where the message was deleted.

onMentionReceived()

A user has been mentioned in a message sent in a group channel.

All devices of mentioned users (up to 10) in the channel, except the device that was used to mention other users.

onReactionUpdated()

A message reaction has been updated in a group channel.

All devices where client apps with the channel are in the foreground, including the device that reacted to the message.

onChannelChanged()

One of the following group channel properties has been changed: distinct, push notification preferences, last message (except when the silent admin message), unread message count, name, cover image, data, or custom type.

All devices that are connected to the changed channel, including the device where the channel was changed.

onChannelDeleted()

A group channel has been deleted.

All devices where client apps with the channel are in the foreground, including the device where the channel was deleted.

onChannelFrozen()

A group channel has been frozen.

All devices where client apps with the channel are in the foreground, including the device where the channel was frozen.

onChannelUnfrozen()

A group channel has been unfrozen.

All devices where client apps with the channel are in the foreground, including the device where the channel was unfrozen.

onMetaDataCreated()

A metadata for a group channel has been created.

All devices where client apps with the channel are in the foreground, including the device where the metadata was created.

onMetaDataUpdated()

A metadata for a group channel has been updated.

All devices where client apps with the channel are in the foreground, including the device where the metadata was updated.

onMetaDataDeleted()

A metadata for a group channel has been deleted.

All devices where client apps with the channel are in the foreground, including the device where the metadata was deleted.

onMetaCounterCreated()

A metacounter for a group channel has been created.

All devices where client apps with the channel are in the foreground, including the device where the metacounter was created.

onMetaCounterUpdated()

A metacounter for a group channel has been updated.

All devices where client apps with the channel are in the foreground, including the device where the metacounter was updated.

onMetaCounterDeleted()

A metacounter for a group channel has been deleted.

All devices where client apps with the channel are in the foreground, including the device where the metacounter was deleted.

onChannelHidden()

A group channel has been hidden from the list.

All devices of a user who hided the channel.

onUserReceivedInvitation()

A user has been invited to a group channel.

All devices where client apps with the channel are in the foreground, including the device of a user who received an invitation.

onUserDeclinedInvitation()

A user has declined an invitation to a group channel.

All devices where client apps with the channel are in the foreground, including the device of a user who declined an invitation.

onUserJoined()

A user has joined a group channel.

All devices where client apps with the channel are in the foreground, including all devices of the user who joined the channel, and except the devices of users who haven't accepted invitations.

onUserLeft()

A user has left a group channel.

All devices where client apps with the channel are in the foreground, including all devices of the user who left the channel, and except the devices of users who haven't accepted invitations.

onUndeliveredMemberCountUpdated()

A message has been delivered in a group channel.

All devices where client apps with the channel are in the foreground, and except the device where the message was marked as delivered and has invoked this event.

onUnreadMemberCountUpdated()

A user has read a specific unread message in a group channel.

All devices where client apps with the channel are in the foreground, including all devices of the users who are invited to the channel, and except the device of the user who read the unread message.

onTypingStatusUpdated()

A user starts typing a message to a group channel.

All devices where client apps with the channel are in the foreground, except the devices of the users who are invited to the channel, and except all devices of the user who typed a message.

onThreadInfoUpdated()

A reply message has been created or deleted from a thread.

All devices where client apps with the channel are in the foreground, including devices of all users who are in the message thread, and except the device of the user who created or deleted the reply message.

onUserMuted()

A user has been muted in a group channel.

All devices where client apps with the channel are in the foreground, including the device where the user was muted.

onUserUnmuted()

A user has been unmuted in a group channel.

All devices where client apps with the channel are in the foreground, including the device where the user was unmuted.

onUserBanned()

A user has been banned from a group channel.

All devices where client apps with the channel are in the foreground, including the device where the user was banned.

onUserUnbanned()

A user has been unbanned from a group channel.

All devices where client apps with the channel are in the foreground, including the device where the user was unbanned.

onChannelMemberCountChanged()

One or more group channels' member count has changed.

All connected devices where client apps have the affected group channels in their channel list.

The following code shows a full set of supported event callbacks with their parameters and how to add a channel event handler.

const groupChannelHandler = new GroupChannelHandler({
  onMessageReceived: (channel: BaseChannel, message: BaseMessage) => {},
  onMessageUpdated: (channel: BaseChannel, message: BaseMessage) => {},
  onMessageDeleted: (channel: BaseChannel, messageId: number) => {},
  onChannelChanged: (channel: BaseChannel) => {},
  onChannelDeleted: (channelUrl: string, channelType: ChannelType) => {},
  onChannelFrozen: (channel: BaseChannel) => {},
  onChannelUnfrozen: (channel: BaseChannel) => {},
  onMetaDataCreated: (channel: BaseChannel, metaData: MetaData) => {},
  onMetaCountersUpdated: (channel: BaseChannel, metaData: MetaData) => {},
  onMetaCountersDeleted: (channel: BaseChannel, metaDataKeys: string[]) => {},
  onChannelHidden: (channel: BaseChannel) => {},
  onUserReceivedInvitation: (channel: GroupChannel, inviter: User, invitees: User[]) => {},
  onUserDeclinedInvitation: (channel: GroupChannel, inviter: User, invitee: User) => {},
  onUserJoined: (channel: GroupChannel, user: User) => {},
  onUserLeft: (channel: GroupChannel, user: User) => {},
  onUndeliveredMemberCountUpdated: (channel: GroupChannel) => {},
  onUnreadMemberCountUpdated: (channel: GroupChannel) => {},
  onTypingStatusUpdated: (channel: GroupChannel) => {},
  onUserMuted: (channel: BaseChannel, user: User) => {},
  onUserUnmuted: (channel: BaseChannel, user: User) => {},
  onUserBanned: (channel: BaseChannel, user: User) => {},
  onUserUnbanned: (channel: BaseChannel, user: User) => {},
  onChannelMemberCountChanged: (channels: GroupChannel[]) => {},
});
sb.groupChannel.addGroupChannelHandler(UNIQUE_HANDLER_ID, groupChannelHandler);

const openChannelHandler = new OpenChannelHandler({
  onMessageReceived: (channel: BaseChannel, message: BaseMessage) => {},
  onMessageUpdated: (channel: BaseChannel, message: BaseMessage) => {},
  onMessageDeleted: (channel: BaseChannel, messageId: number) => {},
  onChannelChanged: (channel: BaseChannel) => {},
  onChannelDeleted: (channelUrl: string, channelType: ChannelType) => {},
  onChannelFrozen: (channel: BaseChannel) => {},
  onChannelUnfrozen: (channel: BaseChannel) => {},
  onMetaDataCreated: (channel: BaseChannel, metaData: MetaData) => {},
  onMetaCountersUpdated: (channel: BaseChannel, metaData: MetaData) => {},
  onMetaCountersDeleted: (channel: BaseChannel, metaDataKeys: string[]) => {},
  onChannelHidden: (channel: BaseChannel) => {},
  onUserEntered: (channel: OpenChannel, user: User) => {},
  onUserExited: (channel: OpenChannel, user: User) => {},
  onUserMuted: (channel: BaseChannel, user: User) => {},
  onUserUnmuted: (channel: BaseChannel, user: User) => {},
  onUserBanned: (channel: BaseChannel, user: User) => {},
  onUserUnbanned: (channel: BaseChannel, user: User) => {},
  onChannelParticipantCountChanged: (channels: OpenChannel[]) => {},
});

sb.openChannel.addOpenChannelHandler(UNIQUE_HANDLER_ID, openChannelHandler);

The following code shows how to remove the channel event handler.

sb.groupChannel.removeGroupChannelHandler(UNIQUE_HANDLER_ID);
sb.openChannel.removeOpenChannelHandler(UNIQUE_HANDLER_ID);

Add and remove a user event handler

To receive information about events related to users connected to Sendbird server, you need to add a user event handler with its unique user-defined ID by calling the SendbirdChat.addUserEventHandler(). If you want to keep informed of changes related to the users, define and register multiple user event handlers.

List of user events

MethodInvoked whenNotified devices

onTotalUnreadMessageCountUpdated()

A user has read messages in the joined group channels and there is an update on the total number of the user's unread messages.

The user's devices with running client apps. The devices will be notified with the total number of unread messages along with a collection of the number of unread messages by custom channel type.

Note: To add or remove onTotalUnreadMessageCountUpdated(), contact support on the Sendbird Dashboard.

The following code shows a full set of supported event callbacks with their parameters and how to add a user event handler to the unique SendbirdChat instance.

const userEventHandler = new UserEventHandler({
  onTotalUnreadMessageCountUpdated: (totalCount: number, countByCustomTypes: { [key: string]: number }) => {},
});
sb.addUserEventHandler(UNIQUE_HANDLER_ID, userEventHandler);

The following code shows how to remove the user event handler.

sb.removeUserEventHandler(UNIQUE_HANDLER_ID);

Add and remove a connection event handler

To detect changes in the connection status of a client app, you need to add a connection event handler with its unique user-defined ID by calling sb.addConnectionHandler(). If you want to keep informed of changes related to the Sendbird server connection, define and register multiple connection event handlers.

List of connection events

MethodInvoked whenNotified devices

onConnected()

SDK has connected to Sendbird server successfully.

The device that successfully connected to the server and took the session.

onDisconnected()

SDK has disconnected and lost the session.

The device explicitly disconnected through sb.disconnect().

onReconnectStarted()

SDK has started reconnecting to Sendbird server.

The device where sb.reconnect() was automatically called by the Chat SDK, or manually by the client app.

onReconnectSucceeded()

SDK has succeeded in reconnecting to Sendbird server.

The device that successfully reconnected to the server.

onReconnectFailed()

SDK has failed to reconnect to Sendbird server.

The device that failed to reconnect to the server.

The following code shows a full set of supported event callbacks and how to add a connection event handler to the unique SendbirdChat instance.

const connectionHandler = new ConnectionHandler({
  onConnected: () => {},
  onDisconnected: () => {},
  onReconnectStarted: () => {},
  onReconnectSucceeded: () => {},
  onReconnectFailed: () => {},
});
sb.addConnectionHandler(UNIQUE_HANDLER_ID, connectionHandler);

The following code shows how to remove the connection event handler.

sb.removeConnectionHandler(UNIQUE_HANDLER_ID);