hx-ws

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

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

• connect:<url> или connect:<prefix>:<url> - URL для установления WebSocket соединения.
• Префиксы ws или wss могут быть указаны необязательно. Если они не указаны, HTMX по умолчанию добавляет схему, хост и порт местоположения, чтобы браузеры отправляли куки через websockets.
• send - Отправляет сообщение ближайшему вебсокету, основанному на значении триггера для элемента (либо естественное событие, либо событие, указанное в [hx-trigger])

Вот пример:

  <div hx-ws="connect:/chatroom">
    <div id="chat_room">
      ...
    </div>
    <form hx-ws="send">
        <input name="chat_message">
    </form>
  </div>

В этом примере устанавливается WebSocket-соединение с chatroom конечной точкой. Содержимое, отправленное через вебсокет, будет анализироваться как HTML и подставляться свойством id, используя ту же логику, что и внешние обмены.

Форма использует синтаксис send, чтобы указать, что при отправке формы значения формы должны сериализоваться в JSON и отправляться ближайшему включающему WebSocket.

Сериализованные значения будут включать поле HEADERS, содержащее заголовки, обычно отправляемые с запросом htmx.

После неожиданной потери соединения из-за Abnormal Closure, Service Restart или Try Again Later, попытки переподключения будут выполняться до успешного подключения. Интервал переподключения по умолчанию реализован с алгоритмом экспоненциального отката с полным джиттером. Собственные реализации могут быть предоставлены путём установки htmx.config.wsReconnectDelay в функцию с retryCount в качестве единственного параметра.

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

Htmx включает тестовый сервер WebSockets с множеством дополнительных примеров использования Server Sent Events. Скачайте исходный код htmx с GitHub и перейдите в /test/ws-sse для экспериментов.

Примечания

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