Broadcasting events

Фреймворк Fresh в JavaScript предоставляет удобный способ работы с серверно-рендеренными приложениями, сохраняя при этом реактивность и возможность обновления интерфейса в реальном времени. Одной из ключевых возможностей для взаимодействия компонентов и обмена данными является broadcasting events — механизм распространения событий между различными частями приложения.

Основные принципы broadcasting events

Broadcasting events позволяет компонентам или страницам отправлять события, которые могут быть перехвачены другими компонентами или обработчиками на клиентской или серверной стороне. В Fresh этот процесс опирается на встроенные возможности веб-сокетов и сигнальных событий, предоставляемых Deno runtime.

Ключевые моменты:

Односторонняя передача событий: один компонент инициирует событие, несколько слушателей могут его обработать.
Согласованность состояния: изменения, инициированные событием, отражаются на всех подписанных компонентах.
Асинхронность: обработка событий выполняется асинхронно, не блокируя основной поток выполнения.

Создание и отправка событий

События в Fresh создаются с помощью стандартного объекта CustomEvent или специализированных функций для серверной стороны.

Пример отправки события с клиента:

const button = document.querySelector('#notifyBtn');

button.addEventListener('click', () => {
  const event = new CustomEvent('userNotification', {
    detail: { message: 'Новое уведомление' }
  });
  document.dispatchEvent(event);
});

Пояснения:

CustomEvent позволяет передавать данные через свойство detail.
document.dispatchEvent отправляет событие глобально в пределах DOM.

Подписка на события

Для обработки события используется метод addEventListener. Он может быть применён как к отдельным элементам, так и к документу в целом.

document.addEventListener('userNotification', (event) => {
  console.log('Получено сообщение:', event.detail.message);
});

Особенности:

Обработчики получают объект события с данными через event.detail.
Несколько обработчиков могут подписываться на одно и то же событие, обеспечивая гибкость распределённой логики.

Broadcasting между сервером и клиентом

Fresh поддерживает real-time broadcasting, используя возможности сервера. Сервер может отправлять события на подключённые клиенты через WebSocket-подобные механизмы.

Пример серверного события:

import { broadcast } from "fresh/server.ts";

const message = { text: "Обновление данных" };
broadcast("updateEvent", message);

На клиентской стороне:

addEventListener('updateEvent', (event) => {
  console.log('Сервер прислал:', event.detail.text);
});

Преимущества:

Все клиенты получают событие одновременно.
Возможность реализовать уведомления, чаты или обновление данных в реальном времени.
Интеграция с серверной логикой без дополнительной инфраструктуры.

Использование broadcasting в компонентах

Компоненты Fresh могут не только отправлять события, но и подписываться на них, что позволяет строить реактивные интерфейсы.

export default function NotificationComponent() {
  useEffect(() => {
    const handler = (event) => {
      alert(`Новое уведомление: ${event.detail.message}`);
    };

    document.addEventListener('userNotification', handler);

    return () => document.removeEventListener('userNotification', handler);
  }, []);

  return (
    <button id="notifyBtn">Отправить уведомление</button>
  );
}

Ключевые моменты:

Использование useEffect обеспечивает корректную подписку и отписку от событий.
Компонент остаётся изолированным, но получает реактивные данные через глобальные события.

Передача данных в событиях

Broadcasting events в Fresh позволяет передавать структурированные данные:

Объекты JSON.
Массивы.
Любые сериализуемые типы.

const eventData = {
  user: "Alice",
  action: "login",
  timestamp: Date.now()
};

document.dispatchEvent(new CustomEvent('userAction', { detail: eventData }));

Это делает механизм событий удобным для интеграции с state management и логикой обновления UI.

Практические применения

Broadcasting events активно используется в следующих сценариях:

Реализация уведомлений: мгновенное отображение сообщений, новых данных или системных предупреждений.
Синхронизация состояния компонентов: когда изменение в одном компоненте должно повлиять на другие.
Реализация чатов и live feed: передача сообщений от сервера к клиенту в реальном времени.
Логирование и аналитика: сбор информации о действиях пользователей без вмешательства в основную логику компонентов.