Skip to main content

Real-Time Updates

Subscribe to live events for typing indicators, presence, and real-time message updates.

Event Subscription​

New Messages​

sdk.on('message.new', (message) => {
  console.log('New message:', message.text);
});

Message Updated​

sdk.on('message.updated', (message) => {
  console.log('Message edited:', message.text);
});

Message Deleted​

sdk.on('message.deleted', ({ messageId }) => {
  console.log('Message deleted:', messageId);
});

Typing Indicators​

Send Typing​

sdk.sendTypingIndicator({ channelId: 'ch-abc123' });

Listen for Typing​

sdk.on('typing.start', ({ userId, channelId }) => {
  console.log(`${userId} is typing...`);
});

sdk.on('typing.stop', ({ userId, channelId }) => {
  console.log(`${userId} stopped typing`);
});

React Hook​

function TypingIndicator({ channelId }) {
  const { typingUsers } = useTyping({ channelId });
  
  if (typingUsers.length === 0) return null;
  
  return (
    <div>
      {typingUsers.map((u) => u.name).join(', ')} {typingUsers.length === 1 ? 'is' : 'are'} typing...
    </div>
  );
}

Presence​

Update Status​

await sdk.updatePresence({ status: 'online' });
// Status: 'online', 'away', 'busy', 'offline'

Listen for Presence​

sdk.on('user.presence', ({ userId, status }) => {
  console.log(`${userId} is ${status}`);
});

React Hook​

function UserStatus({ userId }) {
  const { status } = usePresence({ userId });
  
  return (
    <div className={`status-${status}`}>
      {status}
    </div>
  );
}

Connection State​

sdk.on('connection.state', (state) => {
  console.log('Connection:', state);
  // 'CONNECTING', 'CONNECTED', 'RECONNECTING', 'DISCONNECTED'
});

Next Steps​