Membuat Aplikasi Data Realtime Dengan Tiga Cara(Polling, Server-Sent Events dan WebSocket)

Pada artikel sebelumnya kita pernah membahas bagaimana membuat aplikasi realtime data di bahasa pemrogramman php dengan rachet websocket yang tentu saja cara yang digunakan adalah dengan menggunakan websocket. Namun tidak afdol kayanya kalo kita tidak mencoba cara yang lain. Walaupun cara tersebut(selain websocket) bisa dibilang cara kuno, tapi pada kondisi tertentu kita tidak bisa selalu menggunakan websocket sebagai jalan untuk membuat realtime data karena berbagai alasan. Lalu apa saja caranya?

Metode Polling

Apa itu polling?

advertisement

Polling adalah cara memperbarui data dari sisi client dengan cara melakukan request ke server secara terus menerus dengan jeda waktu tertentu. Polling adalah metode lama untuk menampilkan data secara realtime sebelum adanya websocket. 

Jika kita katogorikan, polling terbagi menjadi dua, yaitu,

Short Polling

Short polling adalah metode dimana client melakukan request ke server dengan jeda waktu yang singkat antara request pertama, kedua, ketiga dan seterusnya. Sehingga data yang diperoleh dari server benar-benar uptodate, namun beban server akan lebih berat karena harus menangani request dari client jika client cukup banyak.

Long Polling

Kebalikan dari short polling, loong polling memiliki jeda waktu yang lebih lama. Ini mungkin baik pada sisi client karena karena bekerja lebih ringan, namun data yang di dapat oleh client tidak lagi bisa dikatakan uptodate. Namun jika kalian memang sedang membangun sebuah aplikasi realtime data dengan pembaharuan berkala dan jeda waktu yang lama, kalian bisa menggunakan long polling.

advertisement

Sebagai cara lama yang sudah jarang digunakan, polling memiliki kelebihan dan kekurungan

Kelebihan polling

Polling adalah cara paling mudah dilakukan, karena kita tidak perlu merubah apapun dari sisi server. Kita hanya perlu membuat fungsi request didalam infinite loop dengan jeda waktu yang bisa kita tentukan.

Kekurangan polling

Kekurangan ini timbul jika server menerima banyak request dari banyak client yang melakukan polling ini. Akibatnya server di banjiri oleh request yang terus-menerus dan dalam waktu yang bersamaan. Ini bisa membuat server down. Jika kamu pernah dengar DDOS attact, ya metodenya hampir sama.

Kapan kita menggunakan polling

Bukan karena kekurangannya yang menjadi masalah utamanya sehingga kita meninggalkan metode polling ini. Polling tetap bisa kita implementasikan, jika kita hanya membuat sedikit client dan memastikan server cukup handal untuk menanganinya. Bahkan polling menjadi satu-satunya cara jika kita tidak punya hak untuk mengubah-ubah server.

Contoh implementasi polling

Disini Saya coba membuat polling dengan menggunakan ajax jquery.

setInterval(function(){
    $.ajax({url: "index.php", success: function(result){
    	$("#div").html(result);
  }});
}, 30000);//Jeda waktu request 30 detik

Code tersebut hanya kita letakan di sisi client saja

Metode Server-Sent Events

Sever-Sent Event atau  SSE adalah cara untuk memperbarui data dari sisi client dengan cara server mengirim pembaharuan data secara terus menerus. Berbeda dengan metode polling, pada sse client tidak melakukan request secara terus menerus,  namun client harus mengecek pembaharuan yang dikirim server.

Sever-sent event tentu punya kelebihan dan kekurangan, yaiut

Kelebihan SSE

Karena server sendiri yang mempush pembaharuan. Data yang didapat benar benar uptodate. Selain itu beban server juga lebih rendah karena tidak perlu menangani request yang terus menerus dari client

Kekurangan SSE

SSE bisa dikatakn one way messangin atau pesan satu arah, dimana server terus menerus melakukan send data kepada client dengan cara broadcast tanpa ada permintaan dari client. Mirip seperti kita buka siaran televisi atau radio.

Kapan kita menggunakan SSE

SSE bisa kita gunakan untuk membuat aplikasi yang seperti live chart data yang dimana client tidak perlu melakukan request apapun selain request awal.

advertisement

Contoh implementasi SSE

*Pada sisi client (Code javascript).

var source = new EventSource("idex.php");
source.onmessage = function(event) //Callback ketika sever mengirim event
{
  document.getElementById("result").innerHTML += event.data + "
";
};

*Pada sisi sever (Contoh dengan code php)

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

Metode WebSocket

WebSocket adalah cara yang paling banyak digunakan untuk membuat aplikasi realtime data karena low latency dan server hanya mengirim data ketika dibutuhkan client, selain itu data yang dikirim juga bersifat peer to peer bukan broadcast karena websocket adalah implementasi dari TCP/IP. 

Kelebihan websocket

Websocket memungkinkan komunikasi dua arah(full duplex) dengan latensi yang rendah dan koneksi terikat antara server dan client.

Kekurangan websocket

Kekurangan dari websocket adalah tidak semua server dan browser mendukung teknologi ini. Atau memang dari server sendiri seperti share hosting, memblok koneksi ke server melalui socket dengan tujuan untuk menjaga keamanan server dari peretas.

Kapan menggunakan websocket

Websocket menjadi pilihan terbaik ketika kita ingin membuat sebuah sistem realtime dan dengan komunikasi dua arah namun dengan latency yang rendah. Semisal aplikasi chat online, push notification dan lain sebagainya.

Contoh implementasi websocket

*Pada sisi sever (Contoh dengan node js)

const app = require('express')();
const server = require('http').createServer(app);
const options = { /* ... */ };
const io = require('socket.io')(server, options);
io.on('connection', socket => { /* ... */ });
server.listen(3000);

Websocket atas menggunakan library socket.io dengan framework express.js, untuk lebih jelasnya kalian bisa kunjungi situs socket.io atau jika menggunakan php bisa baca artikel rachet websocket

*Pada sisi client (Code javascript).

let socket = new WebSocket("wss://localhost:3000");
socket.onopen = function(e) {
   console.log(e);
   socket.send("My name is John");
};

socket.onmessage = function(e) {
   console.log(e.data);
};

socket.onclose = function(event) 
{
   console.log(e);
}

Kesimpulan

Ketiga cara di atas memiliki kelebihan dan kekurangan masing-masing. Tergantung kondisi dan karakteristik sistem yang ingin kamu buat. 

Jika hanya membuat aplikasi realtime sederhana untuk pembelajaran saya rasa polling sudah cukup atau jika kalian tidak punya hak untuk merubah code dari sisi server. 

Namun jika kalian sedang membangun sebuah sistem yang memperhitungkan beban kerja server, latency dan komunikasi dua arah. Maka websocket menjadi pilihan yang tepat.

Jika kalian hanya membuat aplikasi satu arah dimana sever membroadcast data tanpa request, maka sse adalah pilihan yang tepat.

advertisement

Sekian dulu artikel membuat data realtime dengan tiga cara. Jangan lupa di share jika kalian merasa artikel ini bermanfaat, kalau ada pertanyaan silahkan tulis di kolom komentar. Good Luck!