0Pricing
Supabase Backend as a Service · Урок

Каналы присутствия и широковещательной рассылки

Выйдите за рамки изменений таблиц с помощью Supabase Realtime Presence: отслеживайте, кто находится в сети, а через Broadcast отправляйте временные сообщения между клиентами.

«Каналы присутствия и широковещательной рассылки» — бесплатный урок Supabase Backend as a Service на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Supabase Backend as a Service, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Supabase Backend as a Service содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Two More Realtime Features

Besides Postgres change streams, Supabase Realtime offers Presence (track online users) and Broadcast (send transient messages). Neither requires a database table.

What Is Presence?

Presence lets each client share small state (like a username or cursor position) and see everyone else's state in the same channel in real time.

Creating a Channel

A channel is a named room clients join.

const room = supabase.channel('room-1', {
  config: { presence: { key: 'user-42' } }
});

Tracking Presence

After subscribing, call track to publish your state to everyone in the channel.

room.subscribe(async (status) => {
  if (status === 'SUBSCRIBED') {
    await room.track({ name: 'Ada', online_at: Date.now() });
  }
});

Reading Who Is Online

Listen for sync events and read the current presence state of all members.

room.on('presence', { event: 'sync' }, () => {
  const state = room.presenceState();
  console.log('Online:', Object.keys(state).length);
});

Join and Leave Events

Presence emits join and leave events so you can animate users appearing and disappearing.

room.on('presence', { event: 'join' }, ({ newPresences }) => {
  console.log('Joined:', newPresences.length);
});

What Is Broadcast?

Broadcast sends low-latency messages to everyone in a channel without storing them. Great for cursors, typing indicators, and game moves.

Sending a Broadcast

Use send with a custom event name and payload.

room.send({
  type: 'broadcast',
  event: 'cursor',
  payload: { x: 120, y: 80 }
});

Receiving a Broadcast

Subscribe to the same event name to handle incoming messages.

room.on('broadcast', { event: 'cursor' }, ({ payload }) => {
  console.log('Cursor at', payload.x, payload.y);
});

Cleaning Up

Always remove channels when a component unmounts to free connections.

function cleanup(channel, supabase) {
  supabase.removeChannel(channel);
  return 'removed';
}
console.log(cleanup('chan', { removeChannel: () => {} }));

Choosing the Right Tool

Use Postgres changes for persisted data, Presence for online status, and Broadcast for fast disposable messages.

Quick Check

Test your understanding of Presence and Broadcast.

Recap

You learned to track online users with Presence and send ephemeral messages with Broadcast, plus when to use each versus Postgres change streams, and to clean up channels.

Часто задаваемые вопросы

Урок «Каналы присутствия и широковещательной рассылки» бесплатный?

Да — полный текст урока «Каналы присутствия и широковещательной рассылки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Supabase Backend as a Service, подпишись на CoddyKit PRO. Курс Supabase Backend as a Service содержит 4 уроков всего.

Чему я научусь в уроке «Каналы присутствия и широковещательной рассылки»?

Выйдите за рамки изменений таблиц с помощью Supabase Realtime Presence: отслеживайте, кто находится в сети, а через Broadcast отправляйте временные сообщения между клиентами. Ты практикуешь Supabase Backend as a Service с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Supabase Backend as a Service?

Предыдущий опыт не требуется. Supabase Backend as a Service на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Каналы присутствия и широковещательной рассылки»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Supabase Backend as a Service?

Да. Каждый урок Supabase Backend as a Service включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Изучение подписок на данные в реальном времени
  2. Подписка на изменения таблиц
  3. Создание функции онлайн-чата
  4. Каналы присутствия и широковещательной рассылки
← Назад к Supabase Backend as a Service