hx-sse

Примечание: Этот атрибут будет перенесен в расширение в htmx 2.0, которое уже доступно. Пожалуйста, посетите страницу расширения SSE, чтобы узнать о новой реализации SSE в виде расширения.

Атрибут hx-sse позволяет работать с событиями с сервера EventSource напрямую из HTML. Значение атрибута может содержать одно или несколько следующих значений, разделенных пробелом:

• connect:<url> - URL для установления EventSource
• swap:<eventName> - Замена содержимого сообщения SSE в узел DOM при совпадении имен событий

Замена содержимого сообщения

После установления подключения SSE (используя ключевое слово connect) содержимое сообщений SSE можно заменить в DOM, используя ключевое слово swap. Это можно сделать как на элементе, создающем подключение SSE, так и на любом его дочернем элементе. Несколько элементов могут использовать swap для прослушивания событий с сервера.

Вот пример:

<div hx-sse="connect:/event_stream swap:eventName">
  ...
</div>

В этом примере устанавливается подключение к потоку событий с сервера и начинается замена событий с именем eventName в том же элементе.

Вот еще один пример:

<div hx-sse="connect:/event_stream">
  <div hx-sse="swap:eventName1">
    ...
  </div>
  <div hx-sse="swap:eventName2">
    ...
  </div>
</div>

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

Вызов обратных вызовов сервера

После установления подключения для событий с сервера дочерние элементы могут прослушивать эти события, используя специальный синтаксис hx-trigger sse:<event_name>. Это, в сочетании с hx-get или аналогичным, запустит запрос от элемента.

Вот пример:

  <div hx-sse="connect:/event_stream">
    <div hx-get="/chatroom" hx-trigger="sse:chatter">
      ...
    </div>
  </div>

В этом примере устанавливается подключение SSE к конечной точке event_stream, что затем вызывает GET к URL /chatroom всякий раз, когда появляется событие chatter.

Именованные события

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

event: EventName
data: <div>Content to swap into your HTML page.</div>

<div hx-sse="connect:/server-url swap:eventName"></div>

Только данные события

В качестве альтернативы, серверы могут предоставить события только с данными, не имеющие имени. В этом случае JavaScript (и HTMX) используют имя «message» так:

data: <div>Content to swap into your HTML page.</div>

<div hx-sse="connect:/server-url swap:message"></div>

Тестовый сервер SSE

Htmx включает тестовый сервер SSE с множеством дополнительных примеров использования событий с сервера. Загрузите исходный код htmx с GitHub и перейдите в /test/ws-sse, чтобы провести эксперимент.

Примечания

• hx-sse не наследуется