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

Note: Chat messages are not persistent. For example, if you joined a call, received some messages and got disconnected and rejoin the call, you won't be able to see the previous messages

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 to 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

Message Notification

When a peer receives a message they'll get a notification with type HMSNotificationTypes.NEW_MESSAGE. The HMSMessage object will be present in notification.data.

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

// 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'); hmsActions.sendDirectMessage('STOP_SCREENSHARE', peer.id, 'MODERATOR_EVENT');

Suppose you have a custom event for sending "EMOJI_REACTION" and you don't want these messages to be stored in the store. In such cases ignoreMessageTypes action methods comes in handy. Notifications for the ignored messages will still be sent, it'll only not be put in the store.

hmsActions.ignoreMessageTypes(['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 check out 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.

useCustomEvent

This is a react hook that eases firing & listening to custom events. It takes in a config of type which is the type of your event and onEvent a handler function that is fired when an event comes.

It returns an object containing sendEvent which helps to send the event data to others in the room who will receive it in the onEvent handler.

Let's understand the hook with an example where we're showing a button on UI to send emoji reactions.

import { useCallback } from 'react'; import { useCustomEvent, useHMSActions } from '@100mslive/react-sdk'; const Confetti = () => { // onEvent should use useCallback const onEvent = useCallback((msg) => { console.log(msg); // {emoji: "🚀"} // show emoji reactions on UI }, []); const { sendEvent } = useCustomEvent({ type: 'EMOJI_REACTION', onEvent: onEvent }); return <button onClick={() => sendEvent({ emoji: '🚀' })}>Rockets</button>; }; export default Confetti;

Have a suggestion? Recommend changes ->

Was this helpful?

1234