Reactions

Enhance user engagement in your chat application with message reactions. Users can express their emotions using reactions to messages. This feature allows users to add or remove reactions, and to fetch all reactions on a message. You can also listen to reaction events in real-time. Let's see how to work with reactions in CometChat's iOS SDK.

Add a Reaction

Users can add a reaction to a message by calling addReaction with the message ID and the reaction emoji.

Swift

CometChat.addReaction(messageId: 148, reaction: "😴") { message in
                                                          
   print("message reaction added successfully \(message.getReactions())")

 } onError: { error in
      print("some error occured when adding reaction \(error?.errorDescription)")
                        
 }

note

You can react on Text, Media and Custom messages.

Remove a Reaction

Removing a reaction from a message can be done using the removeReaction method.

Swift

CometChat.removeReaction(messageId: 148, reaction: "😴") { message in
                                                          
   print("message reaction removed successfully \(message.getReactions())")

 } onError: { error in
      print("some error occured when removing reaction \(error?.errorDescription)")
                        
 }

Fetch Reactions for a Message

To get all reactions for a specific message, first create a ReactionsRequest using ReactionsRequestBuilder. You can specify the number of reactions to fetch with setLimit with max limit 100. For this, you will require the ID of the message. This ID needs to be passed to the setMessageId() method of the builder class. The set(reaction: String) will allow you to fetch details for specific reaction or emoji.

Methods	Description
setMessageId(messageId: Int)	Specifies the unique identifier of the message for which you want to fetch reactions. This parameter is mandatory as it tells the SDK which message's reactions are being requested.
setReaction(reaction: String)	Filters the reactions fetched by the specified reaction type (e.g., "😊", "😂", "👍"). When set, this method will cause the ReactionsRequest to only retrieve details of the provided reaction for the given message.

Fetch Next Reactions

The fetchNext() method fetches the next set of reactions for the message.

Swift

var reactionsRequest = ReactionsRequestBuilder().setLimit(limit: 30).setMessageId(messageId: 148).build()
                    
reactionsRequest.fetchNext { reactions in
  for reaction in reactions{

     print("reaction is \(reaction.stringValue())")
  }

 } onError: { error in
                        
     print("error caught in fetching next reactions is \(error?.errorDescription)")
  }

Fetch Previous Reactions

The fetchPrevious() method fetches the previous set of reactions for the message.

Swift

var reactionsRequest = ReactionsRequestBuilder().setLimit(limit: 30).setMessageId(messageId: 148).build()
                    
reactionsRequest.fetchPrevious { reactions in
  for reaction in reactions{

     print("reaction is \(reaction.stringValue())")
  }

 } onError: { error in
                        
     print("error caught in fetching previous reactions is \(error?.errorDescription)")
  }

Real-time Reaction Events

Keep the chat interactive with real-time updates for reactions. Register a listener for these events and make your UI responsive.

Swift

let listenerID = "UNIQUE_LISTENER_ID"

CometChat.addMessageListener(listenerID, self)
  
extension YourAppViewController: CometChatMessageDelegate {
    func onMessageReactionAdded(reactionEvent: ReactionEvent) {
        print("Reaction Added : \(reactionEvent) ")
    }
    
    func onMessageReactionRemoved(reactionEvent: ReactionEvent) {
        print("Reaction Removed : \(reactionEvent) ")
    }
}

Removing a Reaction Listener

To stop listening for reaction events, remove the listener as follows:

Swift

let listenerID = "UNIQUE_LISTENER_ID"

CometChat.removeMessageListener("reactionListener");

Get Reactions List

To retrieve the list of reactions reacted on particular message, you can use the message.reactions method. This method will return an array containing the reactions, or an empty array if no one reacted on the message.

Swift

message.reactions

Check if Logged-in User has Reacted on Message

To check if the logged-in user has reacted on a particular message or not, You can use the reactedByMe() method on any ReactionCount object instance. This method will return a boolean value, true if the logged-in user has reacted on that message, otherwise false.

Swift

for reactionCount in message.reactions {
    print("isReactedByMe \(reactionCount.reactedByMe)") //Return true is logged-in user reacted on that message, otherwise false
}

Updated Message With Reaction Info

When a user adds or removes a reaction, you will receive a real-time event. Once you receive the real time event you would want to update the message with the latest reaction information. To do so you can use the updateMessageWithReactionInfo() method.

The updateMessageWithReactionInfo() method provides a seamless way to update the reactions on a message instance (BaseMessage) in real-time. This method ensures that when a reaction is added or removed from a message, the BaseMessage object's reactions property reflects this change immediately.

When you receive a real-time reaction event (ReactionEvent), call the updateMessageWithReactionInfo() method, passing the BaseMessage instance (message), reaction data from the reaction event (ReactionEvent.reaction) and reaction event action type (ReactionAction.REACTION_ADDED or ReactionAction.REACTION_REMOVED) that corresponds to the message being reacted to.

Swift

// The message to which the reaction is related
var message : BaseMessage = ...

// The reaction event data received in real-time
var messageReaction : MessageReaction = ...

// The recieved reaction event real-time action type. Can be ReactionAction.REACTION_ADDED or ReactionAction.REACTION_REMOVED
var action = ReactionAction.REACTION_ADDED

var modifiedBaseMessage : BaseMessage = CometChat.updateMessageWithReactionInfo(
  baseMessage : baseMessage, 
  messageReaction : messageReaction, 
  action : action
)

After calling this method, the message instance's reactions are updated. You can then use message.reactions to get the latest reactions and refresh your UI accordingly.