Mengenal WebSocket, cara kerjanya, perbedaan dengan HTTP, serta contoh penerapannya untuk chat, notifikasi, monitoring, live score, dan aplikasi web real-time.
WebSocket: Bagaimana Website Bisa Menampilkan Data Secara Real-Time?
Pernah menggunakan aplikasi chat dan melihat pesan baru muncul tanpa perlu melakukan refresh halaman?
Atau pernah membuka dashboard monitoring yang menampilkan perubahan data secara langsung? Hal serupa juga dapat ditemukan pada aplikasi live score, notifikasi real-time, hingga berbagai aplikasi yang membutuhkan pembaruan data secara cepat.
Lalu, bagaimana website bisa mengetahui bahwa ada data baru dan langsung menampilkannya kepada pengguna?
Salah satu teknologi yang dapat digunakan untuk kebutuhan tersebut adalah WebSocket.
Berbeda dengan komunikasi HTTP biasa yang umumnya dilakukan berdasarkan request dari client, WebSocket memungkinkan komunikasi dua arah secara terus-menerus antara client dan server setelah koneksi berhasil dibuat.
Dengan mekanisme tersebut, server dapat mengirimkan data kepada client ketika terjadi perubahan tanpa harus menunggu pengguna melakukan request baru.
Apa Itu WebSocket?
WebSocket adalah protokol komunikasi yang memungkinkan terjadinya komunikasi dua arah secara real-time antara client dan server melalui satu koneksi yang tetap terbuka.
Pada website biasa, browser biasanya mengirimkan request kepada server ketika membutuhkan data.
Contohnya ketika pengguna membuka halaman produk:
Browser → Request → Server → Response → Browser
Setelah response diberikan, komunikasi tersebut pada dasarnya selesai sampai browser mengirimkan request berikutnya.
WebSocket menggunakan pendekatan yang berbeda.
Setelah koneksi WebSocket dibuat, koneksi tersebut dapat tetap terbuka sehingga client dan server dapat saling mengirimkan data kapan saja.
Secara sederhana:
Client ↔ Server
Koneksi tetap terbuka sehingga kedua pihak dapat berkomunikasi secara dua arah.
Bagaimana Cara Kerja WebSocket?
Secara sederhana, proses WebSocket dapat dibagi menjadi beberapa tahap.
1. Client Meminta Koneksi
Ketika pengguna membuka aplikasi web, browser dapat meminta koneksi WebSocket kepada server.
2. Server Menerima Permintaan
Server memproses permintaan tersebut dan melakukan proses handshake untuk membangun koneksi WebSocket.
3. Koneksi Berhasil Dibuat
Setelah proses handshake berhasil, koneksi WebSocket tetap terbuka.
4. Data Dapat Dikirim Secara Dua Arah
Pada tahap ini, client dan server dapat saling mengirimkan data.
Misalnya pada aplikasi chat:
User A → Server → User B
User B dapat menerima pesan tersebut tanpa harus melakukan refresh halaman.
WebSocket vs HTTP: Apa Bedanya?
WebSocket dan HTTP sama-sama dapat digunakan dalam pengembangan website, tetapi mekanisme komunikasinya berbeda.
| HTTP | WebSocket |
|---|---|
| Menggunakan konsep request dan response | Menggunakan komunikasi dua arah |
| Request dibuat ketika client membutuhkan data | Koneksi dapat tetap terbuka |
| Cocok untuk komunikasi berbasis request | Cocok untuk komunikasi real-time |
| Server merespons request | Server dapat mengirim data ke client |
| Tidak dirancang khusus untuk komunikasi real-time | Mendukung komunikasi dua arah berkelanjutan |
Sebagai contoh, ketika membuka halaman artikel, HTTP sudah sangat cukup.
Namun, jika sebuah aplikasi harus menampilkan pesan baru, notifikasi, atau perubahan status secara langsung, WebSocket dapat menjadi pilihan yang sesuai.
Contoh Penggunaan WebSocket
WebSocket tidak hanya digunakan untuk aplikasi chat. Teknologi ini dapat diterapkan pada berbagai jenis aplikasi yang membutuhkan pembaruan data secara real-time.
1. Aplikasi Chat
Aplikasi chat merupakan salah satu contoh paling mudah untuk memahami penggunaan WebSocket.
Ketika seseorang mengirim pesan, server dapat meneruskan pesan tersebut kepada penerima melalui koneksi yang sudah terbuka.
Pengguna tidak perlu melakukan refresh halaman untuk melihat pesan baru.
2. Notifikasi Real-Time
WebSocket juga dapat digunakan untuk sistem notifikasi.
Misalnya sebuah website memiliki sistem pemesanan.
Ketika status pesanan berubah:
Pesanan Dibuat → Diproses → Dikirim → Selesai
Website dapat mengirimkan perubahan status tersebut kepada pengguna secara langsung.
3. Dashboard Monitoring
WebSocket juga berguna untuk dashboard yang membutuhkan data terbaru secara terus-menerus.
Contohnya:
- Monitoring server
- Monitoring transaksi
- Monitoring perangkat IoT
- Dashboard operasional
- Sistem pemantauan produksi
Daripada melakukan request berkali-kali untuk memeriksa apakah ada perubahan, server dapat mengirimkan data ketika terjadi perubahan.
4. Live Score
Website yang menampilkan skor pertandingan juga dapat memanfaatkan komunikasi real-time.
Ketika skor berubah, server dapat mengirimkan informasi terbaru kepada pengguna sehingga tampilan website dapat diperbarui tanpa reload.
5. Aplikasi Kolaborasi
WebSocket juga dapat digunakan pada aplikasi yang memungkinkan beberapa pengguna bekerja secara bersamaan.
Misalnya ketika beberapa pengguna sedang mengedit data atau berinteraksi dalam satu ruang kerja.
Perubahan yang dilakukan oleh satu pengguna dapat dikirimkan kepada pengguna lain secara langsung.
Kelebihan WebSocket
Ada beberapa alasan mengapa WebSocket digunakan pada aplikasi yang membutuhkan komunikasi real-time.
1. Data Dapat Diterima Secara Langsung
Server dapat mengirimkan informasi kepada client ketika terjadi perubahan.
2. Komunikasi Dua Arah
Client maupun server dapat mengirimkan data melalui koneksi yang sama.
3. Cocok untuk Aplikasi Real-Time
WebSocket dapat digunakan untuk berbagai aplikasi yang membutuhkan pembaruan data secara cepat.
4. Mengurangi Polling Berulang
Tanpa WebSocket, salah satu pendekatan yang dapat digunakan adalah polling, yaitu client secara berkala bertanya kepada server:
“Apakah ada data baru?”
Dengan WebSocket, server dapat langsung mengirimkan informasi ketika memang ada perubahan.
Apa Kekurangan WebSocket?
Meskipun memiliki banyak manfaat, WebSocket bukan berarti selalu menjadi pilihan yang tepat untuk setiap website.
Beberapa hal yang perlu diperhatikan antara lain:
1. Infrastruktur Lebih Kompleks
Aplikasi dengan koneksi WebSocket membutuhkan pengelolaan koneksi yang tetap terbuka.
2. Membutuhkan Pengelolaan Koneksi
Developer perlu memperhatikan kondisi ketika pengguna kehilangan koneksi internet, berpindah jaringan, atau menutup browser.
3. Tidak Semua Website Membutuhkan WebSocket
Untuk halaman blog, company profile, landing page, atau website yang sebagian besar berisi konten statis, menggunakan WebSocket mungkin tidak diperlukan.
Pemilihan teknologi sebaiknya disesuaikan dengan kebutuhan aplikasi.
WebSocket, Polling, dan Long Polling
Selain WebSocket, terdapat beberapa pendekatan lain untuk mendapatkan data terbaru dari server.
Polling
Client secara berkala mengirimkan request.
Client → Server → Tidak ada perubahan
Kemudian beberapa detik kemudian:
Client → Server → Ada data baru
Cara ini cukup sederhana, tetapi dapat menghasilkan banyak request yang sebenarnya tidak diperlukan.
Long Polling
Pada long polling, server dapat menahan request sampai terdapat data baru atau sampai batas waktu tertentu tercapai.
WebSocket
WebSocket mempertahankan koneksi sehingga server dapat mengirimkan data ketika diperlukan.
Client ↔ Server
Pemilihan antara ketiganya bergantung pada kebutuhan aplikasi, jumlah pengguna, frekuensi perubahan data, dan arsitektur sistem.
