100ms Logo

100ms

Docs

Search docs
/

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.

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 (HMSMessageType) of the message, default value is HMSMessageType.CHAT, other available value is HMSMessageType.METADATA.

💡 Note: Promise returned from sendBroadcastMessage method only lets you know if the server has received your request for the message or if there was some error. It does not convey whether the message was delivered to or read by the recipient.

// 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 (HMSMessageType) of the message, default value is HMSMessageType.CHAT, other available value is HMSMessageType.METADATA.

💡 Note: Promise returned from sendDirectMessage method only lets you know if the server has received your request for the message or if there was some error. It does not convey whether the message was delivered to or read by the recipient.

// 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 (HMSMessageType) of the message, default value is HMSMessageType.CHAT, other available value is HMSMessageType.METADATA.

💡 Note: Promise returned from sendGroupMessage method only lets you know if the server has received your request for the message or if there was some error. It does not convey whether the message was delivered to or read by the recipient.

// 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.

// 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 { message: string; type: HMSMessageType; time: Date; sender?: HMSPeer; recipient: HMSMessageRecipient; }
  • message: The actual text message string that was sent.
  • type: Type of message sent. Default value is HMSMessageType.CHAT, other available value is HMSMessageType.METADATA.
  • 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:

Chat

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 } };

Have a suggestion? Recommend changes ->

Was this helpful?

1234