Pola Long Polling dan Logika Penyambungan Kembali

Poling panjang berlangsung dalam satu siklus: klien mengirim permintaan HTTP, peladen mempertahankan koneksi tetap terbuka sampai data baru tersedia (atau batas waktu tercapai, biasanya 30–60 detik), peladen merespons dengan data, dan klien segera mengirim permintaan lain. Ini menghasilkan koneksi yang hampir berkelanjutan dengan karakteristik dorongan dari peladen.

Poling panjang di React menggunakan fungsi asinkron rekursif di dalam useEffect. Fungsi tersebut membuat permintaan pengambilan data, memproses respons, lalu memanggil dirinya lagi. Sinyal AbortController menghentikan rekursi saat komponen dilepas. Fungsi tersebut mengulang selama komponen terpasang dan tidak ada sinyal pembatalan.

Buat AbortController di bagian atas useEffect: teruskan controller.signal ke setiap panggilan pengambilan data. Dalam fungsi pembersihan, panggil controller.abort(). Ini membatalkan permintaan apa pun yang sedang berlangsung ketika komponen dilepas, sehingga mencegah pembaruan keadaan pada komponen yang sudah dilepas dan kebocoran sumber daya jaringan.

Ketika permintaan poling panjang gagal, jangan langsung mencoba lagi—tunggu sebelum percobaan berikutnya. Mundur eksponensial menggandakan jeda pada setiap kegagalan berturut-turut: 1 detik, 2 detik, 4 detik, 8 detik, 16 detik, dengan batas 30 detik. Ini mencegah peladen yang gagal dihantam terus-menerus dan memberinya waktu untuk mengatasi masalah sementara. Atur ulang jeda menjadi 1 detik setelah respons berhasil.

Dengan banyak klien melakukan poling ke peladen yang sama, mundur eksponensial tanpa pengacakan menyebabkan "kerumunan menggelegar": semua klien menunda selama durasi yang sama dan mencoba lagi secara bersamaan, sehingga kembali membebani peladen. Tambahkan pengacakan dengan mengacak jeda: delay + Math.random() * delay. Ini menyebarkan percobaan ulang dalam rentang waktu tertentu dan mengurangi lonjakan beban peladen.

Pertahankan keadaan koneksi untuk mencerminkan siklus hidup poling: isConnecting (koneksi awal atau menyambung kembali setelah kesalahan), isConnected (poling terakhir berhasil), isError (kegagalan berturut-turut, jumlah percobaan ulang maksimum tercapai). Tampilkan status ini di antarmuka pengguna agar pengguna memahami keandalan data waktu nyata.

Selama jeda mundur sebelum percobaan ulang berikutnya, Anda dapat menampilkan hitung mundur: "Menyambung kembali dalam 8 detik..." dengan indikator kemajuan. Hitung stempel waktu percobaan ulang saat mengatur pengatur waktu mundur dan perbarui tampilan setiap detik. Transparansi ini meyakinkan pengguna bahwa aplikasi sedang berusaha memulihkan koneksi.

Gunakan setTimeout rekursif (panggil poling berikutnya di dalam pengendali respons), bukan setInterval untuk poling. setInterval berjalan pada interval tetap terlepas dari durasi permintaan sebelumnya—permintaan yang berlangsung lama dapat menyebabkan poling tumpang tindih. setTimeout rekursif hanya memulai poling berikutnya setelah poling sebelumnya selesai.

Jadikan interval poling sebagai opsi konfigurasi di kait Anda: useLongPoll({ url, interval: 5000 }). Sumber data yang berbeda memerlukan tingkat kesegaran yang berbeda: indikator "siapa yang sedang aktif" mungkin melakukan poling setiap 30 detik, sedangkan status tugas mungkin melakukan poling setiap 5 detik. Hindari menetapkan interval secara permanen dalam kode implementasi.

Seiring API Anda semakin matang, Anda mungkin mengganti poling dengan SSE demi efisiensi yang lebih baik. Komponen React yang menggunakan kait poling sebaiknya diabstraksikan dari lapisan transportasi. Jika kait Anda mengekspos antarmuka yang sama (onData, status, kesalahan), mengganti poling dengan EventSource di baliknya tidak memerlukan perubahan pada komponen yang menggunakan kait tersebut.

Ketika peladen menahan koneksi poling panjang dan tidak ada data yang tiba, peladen harus mengirim respons batas waktu (200 dengan isi kosong, atau 204 Tanpa Konten) agar koneksi tidak menggantung tanpa batas. Klien kemudian segera melakukan poling lagi. Batas waktu di sisi peladen ini (30–60 detik) terpisah dari batas waktu pengambilan data di sisi klien (lebih lama, misalnya 90 detik).

Mengapa poling panjang menggunakan mundur eksponensial saat mencoba lagi setelah kesalahan koneksi?

Poling panjang: klien mengirim permintaan, peladen menahan koneksi sampai data tersedia atau batas waktu tercapai, lalu klien segera mengirim permintaan lagi setelah respons. Terapkan dengan pengambilan data asinkron rekursif di useEffect dan AbortController untuk pembersihan. Saat terjadi kesalahan: mundur eksponensial (1 detik, 2 detik, 4 detik... dibatasi 30 detik) ditambah pengacakan untuk mencegah kerumunan menggelegar. Gunakan setTimeout rekursif, bukan setInterval, untuk mencegah poling tumpang tindih. Lacak keadaan isConnecting/isConnected/isError untuk umpan balik antarmuka pengguna.