Chat

What's a video call without being able to send messages to each other too? 100ms supports chat for every video/audio room you create.

You can see an example of every type of message (of the types below) being sent and displayed in the advanced sample app.

Addressing messages

• Broadcast messages are sent to Everyone in the chat hmsSDK.sendBroadcastMessage.

• Direct messages are sent to a specific person hmsSDK.sendDirectMessage.

• Group messages are sent to everyone with a particular HMSRole. Such as all hosts or all teachers or all students hmsSDK.sendGroupMessage.

  • Learn more about roles and how to create them on the backend.

Sending Chat Messages

Sending Broadcast Messages

Want to let everyone in the chat know something? Call sendBroadcastMessage on the instance of HMSSDK to send a broadcast.

The parameters are:

1. message: The text of the message.

hmsSDK.sendBroadcastMessage(message: "Hi", hmsActionResultListener: hmsActionResultListener);
 

Sending Direct Messages

Got secrets to share? Send a message directly to a single person in the chat with a direct message. Call sendDirectMessage on an instance of HMSSDK.

The parameters are:

1. message: The text of the message.
2. peerTo: The HMSPeer instance id who should receive message.

hmsSDK.sendDirectMessage(
        message: "Hi",
        peerTo: peerTo,
        hmsActionResultListener: hmsActionResultListener);
 

Sending Group Messages

Need to call attention to all the hosts? All the teachers? All the developers? Call sendGroupMessage on an instance of HMSSDK.

The parameters are:

1. message: The text of the message.
2. hmsRolesTo: The name of the role.

hmsSDK.sendGroupMessage(message: "Hi",
        hmsRolesTo: hmsRolesTo,
        hmsActionResultListener: hmsActionResultListener);
 

Receiving Chat Messages

When you called hmsSDK.join(config) to join a room, the HMSUpdateListener implementation that was passed in had the callback void onMessage({required HMSMessage message});.

This where you'll receive new messages as HMSMessage during the call. It contains:

class HMSMessage(

  final HMSPeer? sender;
  final String message;
  final String type;
  final DateTime time;
  HMSMessageRecipient? hmsMessageRecipient;

  HMSMessage({
    required this.sender,
    required this.message,
    required this.type,
    required this.time,
    this.hmsMessageRecipient
  });
)
 

• message: Content of the text message or the text description of the raw message.
• type: Type of message sent. Default value is chat.
• hmsMessageRecipient: The intended recipient(s) of this message as a HMSMessageRecipient.
• time: DateTime of when the messaging server receives this message. Update the time in your own messages when this comes back from the server in HMSUpdateListener.onMessageReceived for accurate ordering of your own messages.
• sender: The HMSPeer who is sending this message.

Identifying Senders:

The sender of a message is always contained in the sender field of HMSMessage. This lets you get the name and peer id for any message sender.

Message Body:

The body of the message is in message as a String.

Time:

The time the message was sent is contained in time as a DateTime datatype.

Putting together a list of chat messages.

The UI is completely up to you to decide! You'll also need to hold onto all the received messages if you want to display history.

Identifying who the message was for

The HMSMessageRecipient contained in the hmsMessageRecipient field of HMSMessage lets you know who the message was for.

The HMSMessageRecipient contains:

class HMSMessageRecipient{
    HMSPeer? recipientPeer;
    List<HMSRole>? recipientRoles;
    HMSMessageRecipientType hmsMessageRecipientType;
}
 

recipientPeer: Only contains a peer when a specific single peer is being direct messaged.

recipientRoles: Only contains values when a group message is being sent to many roles.

hmsMessageRecipientType: Can contain enum value BROADCAST, PEER and ROLES.

• HMSMessageRecipientType.BROADCAST for a message being sent to everyone. If this is true, the other two fields will be null and empty respectively.

• HMSMessageRecipientType.PEER will be set when it's a direct message.

• HMSMessageRecipientType.ROLES will be set when it's a message to one or many roles.

Store Chat Messages

You can store chat message by creating a list of HMSMessage and append new messages from the callback onMessage({required HMSMessage message}) as follow:

List<HMSMessage> messages = [];

@override
void onMessage({required HMSMessage message}) {
  messages.add(message);
}
 

Filter Chat Messages

You can filter chat message by creating a separate list of HMSMessage.

List<HMSMessage> broadcastList = [];
List<HMSMessage> rolesList = [];
List<HMSMessage> peerList = [];

List<HMSMessage> messageFilter(List<HMSMessage> messages, HMSMessageRecipientType type) {
  filterList = [];
  for(HMSMessage message in messages) {
    // Filter list on the basis of Broadcast chat.
    if(message.hmsMessageRecipient.hmsMessageRecipientType == HMSMessageRecipientType.BROADCAST) {
      broadcastList.add(message);
    }

    // Filter list on the basis of Roles chat.
    if(message.hmsMessageRecipient.hmsMessageRecipientType == HMSMessageRecipientType.ROLES) {
      rolesList.add(message);
    }

    // Filter list on the basis of Peer chat.
    if(message.hmsMessageRecipient.hmsMessageRecipientType == HMSMessageRecipientType.PEER) {
      peerList.add(message);
    }
  }
}
 

Advanced Use-Cases

Sometimes the app requires to show messages in different styles. Something similar to this:

HMSSDK provides the type parameter of HMSMessage object to take care of such use cases.

You can send message as:

hmsSDK.sendBroadcastMessage(message: "😁", type: "emoji", hmsActionResultListener: hmsActionResultListener);
 

Filter out the messages based on type parameter and handle the UI accordingly.

//Example to show emoticons when the message type is set to `emoji`
@override
void onMessage({required HMSMessage message}) {
  if(message.type=="emoji"){
      //Show as emoticons on UI
  }
  else{
    //Handle other cases
  }
}