Membuat Aplikasi Realtime Tanpa Web Socket Dengan Livewire Polling

Membuat Aplikasi Realtime Tanpa Web Socket – Haloo semuanya.. Assalaamualaikum wr wb..

Seperti yang sudah kita ketahui, bahwasanya dalam pembuatan aplikasi realtime, kita butuh yang nama nya web socket..

Web socket sendiri adalah standar baru untuk komunikasi realtime pada Web dan aplikasi mobile. WebSocket dirancang untuk diterapkan di browser web dan server web, tetapi dapat digunakan oleh aplikasi client atau server. WebSocket adalah protokol yang menyediakan saluran komunikasi full-duplex melalui koneksi TCP tunggal..

Untuk lebih memahami definisi tentang web socket, bisa kalian kunjungi disini..

Membuat Aplikasi Realtime Tanpa Web Socket

Sebetulnya ada beberapa metode yang bisa digunakan untuk membuat aplikasi realtime selain dengan menggunakan websocket, diantara nya yaitu ada yang nama nya polling..

Cara kerja dari metode polling ini yaitu dengan mengirimkan request kepada server secara terus menerus, maka jika kalian menggunakan metode ini, maka harus dipastikan request yang dikirim adalah yang ringan2 saja..

Laravel Livewire Polling

Di livewire sendiri sebetulnya sudah tersedia fitur polling untuk pembuatan aplikasi realtime, dan fitur polling pada livewire ini hanya me refresh component tertentu dalam setiap 2 detik, jadi tidak perlu ada kekhawatiran resource server akan membengkak..

Berikut adalah kutipan mengenai Livewire Polling yang saya ambil langsung dari halaman resmi nya:

Polling for changes over Ajax is a lightweight, simpler alternative to something like Laravel Echo, Pusher, or any WebSocket strategy.

Oh yaa.. Jika kalian belum mengenal apa itu livewire, serta ingin mempelajari nya, kalian bisa kunjungi postingan sebelumnya, Membuat CRUD dalam 1 halaman dengan Livewire..

Contoh sederhana untuk penggunaan livewire polling adalah seperti berikut:

<div wire:poll>

    Current time: {{ now() }}

</div>

Coba kalian perhatikan script diatas, kita mencetak waktu sekarang, yang mana waktu tersebut dibungkus kedalam sebuah element yang memiliki direktif wire:poll..

Dan waktu tersebut akan terus berubah sesuai dengan waktu yang sekarang..

Jadi cara kerja dari wire:poll seperti ini, setiap terdapat element yang di tempeli dengan direktif wire:poll, maka element/component tersebut akan di refresh setiap 2 detik sekali..

Kalo interval waktu nya ingin kalian percepat, kalian bisa gunakan perintah seperti berikut:

<div wire:poll.750ms>

    Current time: {{ now() }}

</div>

Dengan perintah diatas, maka Component tersebut akan di refresh setiap 750ms..

Polling in the background

Secara default, ketika kita sedang berada pada halaman tab lain yang bukan halaman web polling nya..

Maka livewire tidak akan menjalankan polling tersebut secara normal, livewire akan memperlambat nya dengan tujuan untuk membatasi server dari kegiatan request polling yang tidak perlu..

Nah kalo kalian ingin tetap menjalankan polling nya meskipun kalian sedang membuka tab lain, kalian bisa tambahkan perintah keep-alive seperti berikut:

<div wire:poll.keep-alive>

    Current time: {{ now() }}

</div>

Polling only when element is visible

Kalau kalian menambahkan direktif polling pada suatu element yang mana element tersebut memiliki kemungkinan untuk muncul atau tidak, dan kalian ingin menjalankan polling nya hanya saat element tersebut muncul saja..

Maka kalian bisa gunakan perintah seperti berikut:

<div wire:poll.visible></div>

Support Us

Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid

Terima kasih..