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.

Message Types

• Broadcast messages are sent to "Everyone" in the chat, using - hmsInstance.sendBroadcastMessage.

• Direct messages are sent to a "specific person", using - hmsInstance.sendDirectMessage.

• Group messages are sent to "everyone with a particular HMSRole". Such as all hosts or all teachers or all students, using - hmsInstance.sendGroupMessage.

  • You can learn more about Templates and Roles here.

Sending Chat Messages

On the HMSSDK instance call different send message functions -

Broadcast Messages

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

sendBroadcastMessage method accepts following parameters:

1. message: The text of the message.
2. type[optional]: The type (string) of the message, default value is chat.

// instance acquired from HMSSDk.build() method
try {
    const result = await hmsInstance.sendBroadcastMessage('hello everyone!'); // yes it's that simple 😉
    console.log('Broadcast Message Success: ', result);
} catch (error) {
    console.log('Broadcast Message Error: ', error);
}

Direct Messages

Got secrets to share with someone? Call sendDirectMessage method on the HMSSDK instance to send message directly to a single person.

sendDirectMessage method accepts following parameters:

1. message: The text of the message.
2. peer: The HMSPeer instance that should receive the message.
3. type[optional]: The type (string) of the message, default value is chat.

// instance acquired from HMSSDk.build() method
try {
    const result = await hmsInstance.sendDirectMessage('keep this message a secret!', peer);
    console.log('Direct Message Success: ', result);
} catch (error) {
    console.log('Direct Message Error: ', error);
}

Group Messages

Need to call attention to All the hosts or All the teachers or All the developers? Call sendGroupMessage method on the HMSSDK instance to send message to peers with specific roles.

sendGroupMessage method accepts following parameters:

1. message: The text of the message.
2. roles: The list of HMSRole i.e the roles to whom the message needs to be sent.
3. type[optional]: The type (string) of the message, default value is chat.

// all available Roles can be obtained `getRoles` method on `HMSSDK` instance
// it will return an array of HMSRole from which required roles can be selected for `sendGroupMessage` method.
const roles = await hmsInstance.getRoles();

const [role1, role2] = roles; // getting first 2 roles from roles list

try {
    const result = await hmsInstance.sendGroupMessage('hi folks!', [role1, role2]);
    console.log('Group Message Success: ', result);
} catch (error) {
    console.log('Group Message Error: ', error);
}

Receiving Chat Messages

After Joining the Room, you can add a listener for HMSUpdateListenerActions.ON_MESSAGE event to receive new messages as HMSMessage object during the call.

Each new message has a unique identifier that separates it from other messages. This uniqueId is available on messageId property and you can use it to differentiate between messages.

// instance acquired from build() method
hmsInstance.addEventListener(HMSUpdateListenerActions.ON_MESSAGE, onMessageReceived);

const onMessageReceived = (message: HMSMessage) => {
    // new message received, show this message in chat UI
};

Let's look at what the HMSMessage looks like -

interface HMSMessage {
    messageId: string; // Unique Id of the Message
    message: string;
    type: string;
    time: Date;
    sender?: HMSPeer;
    recipient: HMSMessageRecipient;
}

• messageId: Id to uniquely identify the message.
• message: The actual text message string that was sent.
• type: The type (string) of the message. Default value is chat.
• time: DateTime of when the server received the message. This can be used for accurate ordering of your messages.
• sender: The HMSPeer who sent this message.
• recipient: The intended recipient(s) of this message as a HMSMessageRecipient object.

Now let's look at what the HMSMessageRecipient looks like -

interface HMSMessageRecipient {
    recipientPeer?: HMSPeer;
    recipientRoles?: HMSRole[];
    recipientType?: HMSMessageRecipientType;
}

• recipientPeer: Peer that should receive this message. This is available when a specific single peer is being direct messaged.

• recipientRoles: Peers with these Roles whom should receive this message. This is available when a group message is being sent to many roles.

• recipientType: HMSMessageRecipientType Enum Values - BROADCAST, PEER or ROLES.

  • HMSMessageRecipientType.BROADCAST will be set when it's a message being sent to everyone.
  • 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.

Chat Messages UI

HMSSDK doesn't provide UI for chat, 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.

Advanced Use-Cases

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

HMSSDK provides the type parameter on the HMSMessage object and methods used to send different types of messages to take care of such use cases.

You can send messages as:

await hmsInstance.sendBroadcastMessage('😁', 'emoji');
// OR
await hmsInstance.sendDirectMessage('😁', peer, 'emoji');
// OR
await hmsInstance.sendGroupMessage('😁', [role1, role2], 'emoji');

When you receive messages, you can filter out the messages based on the type parameter on HMSMessage object and handle the UI accordingly.

// instance acquired from build() method
hmsInstance.addEventListener(HMSUpdateListenerActions.ON_MESSAGE, onMessageReceived);

const onMessageReceived = (message: HMSMessage) => {
    if (message.type === 'emoji') {
        // Show as emoticons on UI
    } else {
        // Handle other cases
    }
};