💣Изучение SSE (событий, отправленных сервером): обновления в реальном времени для ваших приложений!

Общение в режиме реального времени стало важнейшим аспектом современных веб-приложений, позволяя разработчикам предоставлять пользователям динамические обновления и интерактивные возможности. Одной из мощных технологий, упрощающих обмен данными в реальном времени, являются события, отправленные сервером (SSE). Он завоевал популярность благодаря своей простоте, удобству использования и совместимости с широким спектром веб-браузеров и платформ.

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

Присоединяйтесь к нам, чтобы раскрыть потенциал SSE в Spring и узнать, как эта технология может изменить коммуникационные возможности вашего приложения в режиме реального времени. Давайте погрузимся в захватывающий мир SSE и станем свидетелями его влияния на приложения на базе Spring. 🚀

📕 Что такое SSE (события, отправленные сервером)?

Отправленные сервером события (SSE) – это веб-технология, позволяющая серверам отправлять клиентам обновления или события в режиме реального времени через одно продолжительное HTTP-соединение. Это простая и эффективная альтернатива другим протоколам связи в реальном времени, таким как WebSocket.

В отличие от традиционных HTTP-запросов, когда клиент инициирует связь, SSE позволяет серверу инициировать связь и отправлять данные клиенту всякий раз, когда происходят новые события или обновления. Эта модель, основанная на push-уведомлениях, избавляет клиента от необходимости многократно опрашивать сервер на наличие обновлений, что снижает нагрузку на сеть и повышает эффективность.

SSE опирается на API EventSource на стороне клиента, который обеспечивает удобный способ обработки входящих событий. Сервер отправляет данные клиенту в определенном формате, который называется «текст/поток событий». Каждое событие состоит из поля данных, содержащего полезные данные, а также необязательных полей события и идентификатора.

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

🚩 Ограничения SSE:

Хотя события, отправленные сервером (SSE), предлагают эффективный и простой подход к обмену данными в реальном времени, у него есть некоторые ограничения, которые следует учитывать:

• Однонаправленная связь: SSE поддерживает только связь сервер-клиент. Клиенты не могут отправлять данные или взаимодействовать с сервером через соединение SSE. Если требуется двусторонняя связь, следует рассмотреть альтернативные технологии, такие как WebSocket.
• Отсутствие поддержки двоичных данных: SSE в первую очередь предназначен для отправки текстовых данных. Он изначально не поддерживает передачу двоичных данных. Если вам нужно передать двоичную информацию, вам нужно будет закодировать ее в текстовом формате (например, Base64) перед отправкой через SSE.
• Ограниченная поддержка браузерами. Хотя большинство современных веб-браузеров поддерживают SSE, все еще могут существовать некоторые старые браузеры или нишевые платформы, не поддерживающие возможности SSE. При принятии решения об использовании SSE важно учитывать требования целевой аудитории и совместимости браузера.
• Ограничения на количество подключений: SSE имеет ограничение на максимальное количество открытых подключений, что может быть особенно болезненным при открытии нескольких вкладок, поскольку ограничение действует для каждого браузера и установлено на очень низкое число (6). Это ограничение на браузер + домен, что означает, что вы можете открыть 6 подключений SSE на всех вкладках к www.example1.com и еще 6 подключений SSE к www.example2.com.При использовании HTTP/2 максимальное количество одновременных потоков HTTP согласовывается между сервером и клиентом (по умолчанию 100).

🍃 Интеграция с Spring MVC — Spring Boot

• Настроить зависимости. Включите в проект необходимые зависимости. Для поддержки SSE вам понадобится модуль spring-web, который обычно является частью среды Spring Web MVC.

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>

• Создание контроллера SSE. В Spring вы можете создать контроллер, предназначенный для обработки запросов SSE. Аннотируйте класс контроллера с помощью @RestController или @Controller и соответствующих аннотаций сопоставления запросов (@RequestMapping, @GetMapping и т. д.).
• Реализовать конечную точку SSE. В контроллере SSE определите метод, который будет служить конечной точкой SSE. Аннотируйте этот метод с помощью @GetMapping или соответствующей аннотации сопоставления и верните объект SseEmitter из метода.

@Slf4j
@RestController
@RequiredArgsConstructor
@RequestMapping("/api/v1/sse")
public class SseController {

  private final SseService sseService;

  @GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
  public SseEmitter subscribeToSseEvents() {
    return this.sseService.subscribe();
  }

}

• Сохраните эмиттер, чтобы позже отправлять различные события, сгенерированные приложением, в те точки кода, где это необходимо.

private final CopyOnWriteArrayList<SseEmitter> emitters = new CopyOnWriteArrayList<>();

@Override
public SseEmitter subscribe() {
  final SseEmitter emitter = new SseEmitter(Long.MAX_VALUE);
  this.emitters.add(emitter);

  emitter.onCompletion(() -> this.emitters.remove(emitter));

  return emitter;
}

Значение, указанное в конструкторе класса SseEmitter, представляет собой время ожидания в миллисекундах, обычно оно имеет довольно короткое значение по умолчанию, в примере мы установили значение Long.MAX_VALUE, чтобы установить максимальное время, чтобы осталось время, но это значение которые вы можете адаптировать в зависимости от потребностей вашего приложения. 🚩

В документации указано: По умолчанию не задано, и в этом случае используется значение по умолчанию, настроенное в конфигурации Java MVC или пространстве имен MVC, или, если это не задано, время ожидания зависит от значения по умолчанию базового сервера.

• Наконец, нам нужно инициировать событие только в тех случаях, когда мы хотим отправить информацию клиенту. Для этого я определил метод в нашем SseService:

public void sendEvent(final String message) {

  this.emitters.forEach(emitter -> {
    try {
      emitter.send(SseEmitter.event()
          .name("event-test")
          .data(SseMessage.builder()
              .description(message)
              .build()));
    } catch (final Exception e) {
      emitter.complete();
    }
  });

Здесь мы просто прокручиваем список ранее сохраненных подписчиков и отправляем соответствующее событие. Поле «имя» события указывает имя события (мы можем настроить это так, чтобы мы могли фиксировать его персонализированным способом в клиенте, в противном случае значение по умолчанию — «сообщение»), поле «данные» — это тело события, здесь мы можем отправить объект Java, чтобы мы могли отправить информацию, которая важна в каждом случае. (в моем случае я отправляю только обычный текст, строку).

https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/servlet/mvc/method/annotation/SseEmitter.html

🎨 Интеграция с JavaScript

Чтобы интегрировать Server-Sent Events (SSE) с JavaScript, вы можете выполнить следующие шаги:

1. Создайте объект EventSource: создайте новый объект EventSource в своем коде JavaScript, указав URL-адрес конечной точки SSE в качестве параметра. Например:

const eventSource = new EventSource('http://localhost:8080/api/v1/sse/stream');

2. Регистрация прослушивателей событий. Присоедините прослушиватели событий для обработки различных типов событий SSE. Объект EventSource поддерживает три основных события: open, message и error. Например:

eventSource.addEventListener('open', () => {
  // Connection is established
});

eventSource.addEventListener('event-test', (event) => {
  // Handle SSE event data
  const eventData = JSON.parse(event.data);
  console.log(eventData);
  // Process and use the received data
});

eventSource.addEventListener('error', () => {
  // Handle SSE connection errors
});

3. Получить события SSE: когда сервер отправляет события SSE, будет запущен прослушиватель event-testevent (это имя события, которое я указываю в Spring Integration, но по умолчанию это «сообщение»). Получите доступ к данным события с помощью event.data и выполните необходимые действия с полученными данными. Вы можете обновлять пользовательский интерфейс, запускать определенные функции или обрабатывать данные любым удобным для вас способом.

4. Закройте соединение. Когда вы закончите работу с SSE, обязательно закройте соединение, чтобы освободить ресурсы. Вы можете использовать метод close() объекта EventSource, чтобы закрыть соединение SSE:

eventSource.close();

Выполнив следующие действия, вы сможете интегрировать SSE с JavaScript и получать обновления с сервера в режиме реального времени. Не забудьте обработать все необходимые случаи ошибок, очистить соединение SSE, когда оно больше не нужно, и убедиться, что конечная точка SSE на стороне сервера правильно настроена для отправки событий SSE подключенным клиентам.

https://developer.mozilla.org/en-US/docs/Web/API/EventSource

🏁 Заключение

События, отправленные сервером (SSE), обеспечивают простой и эффективный подход к обмену данными между серверами и клиентами в режиме реального времени. С помощью SSE сервер может отправлять обновления данных клиентам через одно долгоживущее HTTP-соединение, что устраняет необходимость в постоянном опросе.

Интеграция SSE с Spring позволяет разработчикам расширять коммуникационные возможности своих приложений в реальном времени. Настраивая конечные точки SSE, отправляя события SSE и используя API EventSource на стороне клиента, разработчики могут обеспечивать беспрепятственные обновления, уведомления и синхронизацию данных в режиме реального времени.

При использовании SSE с JavaScript, например, в приложении React, создание объекта EventSource, регистрация прослушивателей событий и обработка событий SSE становятся простыми. Затем полученные данные SSE можно обработать и использовать в приложении для обновления пользовательского интерфейса или запуска определенных действий.

Хотя у SSE есть некоторые ограничения, такие как однонаправленная связь и ограниченная поддержка браузера, он остается мощным инструментом для доставки обновлений в реальном времени простым и совместимым способом.

Используя возможности SSE в сочетании с такими фреймворками, как Spring, и библиотеками JavaScript, такими как React, разработчики могут создавать интерактивные и адаптивные приложения, предоставляющие своим пользователям возможность работы в режиме реального времени.

УДАЧНОГО КОДИРОВАНИЯ! 🎯