Latihan 1: SSE dan WebSocket — HTMX

Latihan 1 dari materi SSE dan WebSocket di HTMX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah memuat extension sse (<script src="https://unpkg.com/[email protected]">), punya <div hx-ext="sse"> yang membungkus <div>Menunggu pesan...</div>, dan satu contoh stream server: aliran /events yang mengirim satu pesan bernama message berisi Pesanan #12 siap diambil. Biarkan script-nya, hx-ext="sse", teksnya, dan contoh stream-nya, lalu:

Tambahkan sse-connect="/events" di <div> pembungkus (yang punya hx-ext), supaya ia membuka koneksi ke aliran /events.
Tambahkan sse-swap="message" di <div> dalam, supaya isi setiap pesan bernama message ditukar ke situ.
Klik Jalankan. Sebentar kemudian, Menunggu pesan... berganti jadi Pesanan #12 siap diambil.

Yang dicek:

<div> ber-hx-ext punya hx-ext persis sse dan sse-connect persis /events.
Ada <div> ber-sse-swap, dan nilainya persis message.
Kodenya memuat sse-connect dan sse-swap di luar komentar.
Sesudah pesannya datang, <div sse-swap> berisi persis Pesanan #12 siap diambil.

Hint

SSE butuh dua bagian: elemen yang membuka koneksi ke aliran, dan elemen yang menerima isi pesan. Extension-nya sudah dinyalakan di pembungkus.
Koneksinya dibuka sse-connect di pembungkus yang sama dengan hx-ext. Penerimanya memakai sse-swap dengan nama pesannya, dan pesan tanpa nama bernama message.
<div hx-ext="sse" sse-connect="/events"> <div sse-swap="message">Menunggu pesan...</div> </div>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: SSE dan WebSocket — HTMX

Hint

Memperbarui Aplikasi