SSE dan WebSocket — HTMX

HTMX mendukung Server-Sent Events dan WebSocket untuk real-time updates. SSE (Server-Sent Events) Waiting for messages... WebSocket Kirim Server (Laravel SSE) r

HTMX mendukung Server-Sent Events dan WebSocket untuk real-time updates.

SSE (Server-Sent Events)

<div hx-ext="sse" sse-connect="/events">
  <div sse-swap="message">
    <!-- Update saat menerima event "message" -->
    Waiting for messages...
  </div>
  <div sse-swap="notification">
    <!-- Update saat menerima event "notification" -->
  </div>
</div>

WebSocket

<div hx-ext="ws" ws-connect="/chat">
  <div id="messages">
    <!-- Pesan baru muncul di sini -->
  </div>
  <form ws-send>
    <input name="message" />
    <button>Kirim</button>
  </form>
</div>

Server (Laravel SSE)

return response()->stream(function () {
    echo "event: message\n";
    echo "data: <p>Pesan baru!</p>\n\n";
    ob_flush();
    flush();
});

Yang akan kamu pelajari