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.

Chat

Sending Chat Messages

Broadcast Message:

This will be received by everyone in the room.

hmsActions.sendBroadcastMessage("hello everyone!"); // yes it's that simple 😉

Group Message:

This will be received by every peer who is part of the passed in roles.

hmsActions.sendGroupMessage("hi folks!", ["moderator", "host"]);

Direct Message:

This will only be received by the peer whom the message was sent to.

hmsActions.sendDirectMessage("keep this message a secret!", peer.id);

Showing the messages

The selector selectHMSMessages can be used to get all the messages. There are few other selectors to help with selecting more specific messages.

import { selectHMSMessages, selectBroadcastMessages, selectMessagesByRole, selectMessagesByPeerID } from '@100mslive/hms-video-store'; function renderMessages(messages) { console.log("messages - ", messages); } hmsStore.subscribe(renderMessages, selectHMSMessages); // get all messages hmsStore.subscribe(renderMessages, selectBroadcastMessages); // get all broadcasted messages hmsStore.subscribe(renderMessages, selectMessagesByRole('host')); // get conversation with the host role hmsStore.subscribe(renderMessages, selectMessagesByPeerID(peer.id)); // get private conversation with peer

Refer API Reference for HMSMessage Interface.

Marking a message as read

We also have a boolean read field with every message which can be optionally used to track whether the user has seen the message. You can set the read status for a message with the following interface.

const readStatus = true; // true/false hmsActions.setMessageRead(readStatus); // set status for all messages hmsActions.setMessageRead(readStatus, msg.id); // set status for a specific message

Custom Events

It's also possible to utilise the above system for sending custom messages across the room. All the above methods take type as an optional last param. The type is chat by default but can be changed to any valid string. This can be used to differentiate between different types of messages. For e.g.

// broadcast a message to the whole room hmsActions.sendBroadcastMessage("START", "GAME_EVENT"); hmsActions.sendBroadcastMessage("🚀", "EMOJI_REACTION"); // Send a message to role groups hmsActions.sendGroupMessage("🔥", ["stage", "backstage"], "EMOJI_REACTION"); // Send a message to a specific peer hmsActions.sendDirectMessage("❤️", peer.id, "EMOJI_REACTION");

Do note that the messages are not persistent and won't be available to a person joining the room after the event was sent. So even though the above is good for emoji reactions, if you're looking for implementing something like raise hand do checkout our documentation for peer metadata.

In case you want to send information in a more structured way than a simple string, you can send a stringified JSON object.