Channel

Each channel is a singleton, with its reactive data on channel.state.

Initialization

client.channel() returns the existing instance or creates it, and channel.watch() loads its state.

const channel = client.channel("messaging", channelId);
await channel.watch();

To load several channels at once, use client.queryChannelsAndHydrate(). It watches the returned channels and loads their state, the same as channel.watch().

const channels = await client.queryChannelsAndHydrate({
  filter_conditions: { type: "messaging", members: { $in: [userId] } },
  sort: [{ field: "last_message_at", direction: -1 }],
  limit: 15,
});

// The same instances `client.channel()` returns
const [firstChannel] = channels;

Reading

// Channel data, members, my membership and permissions, typing, read state, mute
const {
  data,
  members,
  memberCount,
  membership,
  ownCapabilities,
  typing,
  read,
  muteStatus,
} = channel.state.getLatestValue();

// My unread count (derived from `read`)
const unreadCount = channel.state.unreadCount;

// Slow mode wait, in seconds
const { cooldownRemaining } = channel.cooldownTimer.state.getLatestValue();

// Channel config from the server
const config = channel.serverConfig;

Subscribe to render changes:

const unsubscribe = channel.state.subscribeWithSelector(
  ({ read, members }) => ({ read, members }),
  ({ read, members }) => renderHeader(read, members),
);

Read receipts

Pass the message id and its created_at timestamp. Subscribe to snapshotStore to re-render when receipts change.

const readers = channel.messageReceiptsTracker.readersForMessage({
  msgId: message.id,
  timestamp: message.created_at,
});

const unsubscribeReceipts =
  channel.messageReceiptsTracker.snapshotStore.subscribe(() => {
    renderReceipts(
      channel.messageReceiptsTracker.readersForMessage({
        msgId: message.id,
        timestamp: message.created_at,
      }),
    );
  });

Active channel

Only active channels are refreshed after a reconnect (unless you're using ChannelPaginator too):

// While the channel is on screen
const release = channel.activate();

// When the channel leaves the screen
release();