Web Socket Hilfsfunktionen

Die websocket Komponente ermöglicht Echtzeit-Aktualisierungen über WebSocket-Verbindungen. Sie nutzt die HTMX-WebSocket-Erweiterung für von HTMX verwaltete DOM-Aktualisierungen.

Standardmäßig erwartet die Komponente HTML-Fragmente, welche HTMX in das DOM einfügen kann. Nicht-HTML-Frames werden als Browser-Ereignisse zur benutzerdefinierten Verarbeitung bereitgestellt.

WCAG AA
JavaScript
HTMX

Funktionen

  • Echtzeit-Updates: Live-Inhalte über eine WebSocket-Verbindung.

  • HTMX-Integration: DOM-Aktualisierungen werden über den HTMX-Swap-Mechanismus abgewickelt.

  • Initialer Inhalt: Inhalt, welcher während des Verbindungsaufbaus angezeigt wird.

HTML
JS

Verwendung

Die Komponente wird über das web_socket Tag eingebunden.

{% load insight_tags %} {% websocket config=websocket_config %} <!-- or --> {% websocket tag_id="demo-websocket" request_url="/ws/ticker/" initial_content="<p>Connecting...</p>" %}

Parameter

Laden…

config (WebSocketConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
request_url str

URL des Websocket-API Endpunkts.

 None True
tag_id str

Container-ID zum Ansprechen von Unterelementen anhand ihrer ID (z. B. über HTMX-Out-of-Band-Swaps). Optional; ohne diese ID funktioniert die Verbindung zwar weiterhin, der Server kann jedoch keine bestimmten Unterelemente anhand ihrer ID ansprechen.

 "" False
initial_content str

Initialer Inhalt.

 "" False
WebSocketConfig( request_url="/ws/chat/", tag_id="chat-stream", initial_content="Connecting...", )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Das Element für den Verbindungsstatus verfügt über die Attribute role='status' und aria-live='polite', um Änderungen anzukündigen.

  • Statusmeldungen sind lesbarer Text, welcher den Verbindungsstatus beschreibt (Verbunden, Getrennt, Fehler, Wird verbunden).

  • Der Ausgabecontainer verfügt über die Attribute role='log' und aria-live='polite', um neue Nachrichten anzukündigen.

  • Die Angabe aria-atomic='false' stellt sicher, dass nur neue Nachrichten angesagt werden, nicht der gesamte Verlauf.

  • Bei Statusänderungen und Meldungen werden benutzerdefinierte Ereignisse ausgelöst, wodurch Host-Anwendungen eine barrierefreie Benutzeroberfläche implementieren können.

Verwandte Themen