Reactions let viewers show how they feel without typing, like the floating hearts on a creator's live video. Hosts and viewers can both send them.
Where this fits: reactions run on the stream's live chat.
There's nothing extra to set up. If a person joined with the full credential
from your backend, stream.react() works.
Send and receive reactions
In your app, send a reaction with stream.react(), and listen for
everyone's reactions on the chat client so you can animate them:
await stream.react('❤️');
stream.chat.on('reactionAdded', (event) => {
console.log(event.userId, event.emoji);
});import { useLiveStream } from '@livqeno/react';
const { react } = useLiveStream();
<button onClick={() => react('❤️')}>❤️</button>react comes from useLiveStream(), for both hosts and viewers. There's
no separate reaction hook.
await stream.react('❤️');await stream.react('❤️');How it works
When you create a stream, Livqeno also posts a hidden first message in its
chat. Its id is chatRootMessageId. stream.react() adds a normal
Chat reaction to that message.
Because of this, the normal chat reaction rules apply:
- Reactions are grouped by emoji.
- Reacting twice with the same emoji does nothing. It doesn't create a duplicate.
- So "❤️ 312" means 312 different people sent a heart, not 312 taps.
If you want a burst of hearts on every tap, animate locally when the user
taps, and use reactionAdded for other people's reactions.
When react() throws
stream.react() throws if:
- the stream was joined without chat credentials, or
- it has chat but no
chatRootMessageId.
Both mean the join credentials were incomplete. You won't hit this if you
pass LiveStream.join() the whole credential
that addHost or createViewerToken returned.
Read reaction counts
Counts work like on any chat message: { emoji, count, userIds }. See
Chat → Reactions.