Recraftory

WebSocket

Memahami komunikasi real-time dengan WebSocket

Apa itu WebSocket

  • Protokol komunikasi untuk koneksi dua arah antara client dan server
  • Memungkinkan data dikirim kapan saja tanpa perlu request baru
  • Cocok untuk aplikasi real-time seperti chat dan live notification

Perbedaan WebSocket dan HTTP

HTTP

  • Client harus mengirim request untuk mendapatkan data
  • Server hanya bisa merespons setelah ada request
  • Setiap request memerlukan koneksi baru atau mengikuti aturan keep-alive
  • Cocok untuk halaman web statis dan API biasa

WebSocket

  • Koneksi tetap terbuka setelah handshake awal
  • Server dan client bisa saling mengirim data kapan saja
  • Mengurangi overhead karena tidak perlu buka-tutup koneksi
  • Lebih efisien untuk data yang sering berubah

Cara Kerja WebSocket

  1. Client mengirim request handshake ke server via HTTP
  2. Server merespons dengan kode 101 Switching Protocols
  3. Koneksi HTTP diupgrade menjadi WebSocket
  4. Koneksi tetap terbuka untuk komunikasi dua arah
  5. Data dikirim sebagai frame-frame kecil

Kapan Menggunakan WebSocket

  • Aplikasi chat real-time
  • Notifikasi langsung di browser
  • Live update data seperti dashboard atau harga saham
  • Multiplayer online game
  • Kolaborasi dokumen seperti Google Docs

Keuntungan WebSocket

  • Latensi rendah karena tidak perlu buka koneksi berulang
  • Menghemat bandwith dibanding polling HTTP
  • Server bisa push data ke client tanpa diminta
  • Mendukung komunikasi dua arah secara simultan

Keterbatasan WebSocket

  • Tidak semua proxy dan firewall mendukung WebSocket
  • Lebih kompleks dibanding HTTP biasa
  • Koneksi yang terbuka lama bisa membebani server
  • Memerlukan mekanisme reconnect jika koneksi terputus

Alternatif WebSocket

Server-Sent Events (SSE)

  • Server mengirim data ke client satu arah
  • Lebih sederhana dan menggunakan HTTP biasa
  • Cocok untuk notifikasi dan live update yang tidak perlu input user

Long Polling

  • Client meminta data dan server menunda respons sampai ada data baru
  • Lebih kompatibel dengan infrastruktur lama
  • Kurang efisien dibanding WebSocket untuk komunikasi intensif

Implementasi di Development

  • Backend: banyak framework mendukung WebSocket seperti Socket.io, ws (Node.js), Django Channels
  • Frontend: browser memiliki WebSocket API bawaan
  • const ws = new WebSocket('wss://example.com/socket')
  • ws.onmessage = (event) => { console.log(event.data) }