WebSocket & Real-time Communication — Web Fundamentals

WebSocket adalah protokol yang memungkinkan komunikasi dua arah (full-duplex) antara client dan server melalui satu koneksi TCP yang persisten. Masalah dengan…

WebSocket adalah protokol yang memungkinkan komunikasi dua arah (full-duplex) antara client dan server melalui satu koneksi TCP yang persisten.

Masalah dengan HTTP biasa: HTTP adalah request-response — client harus bertanya dulu baru server menjawab. Untuk aplikasi real-time (chat, notifikasi, live data), ini tidak efisien.

Solusi sebelum WebSocket:

Teknik Cara Kerja Kelemahan
Polling Client kirim request setiap N detik Boros bandwidth, delay
Long Polling Server tahan response sampai ada data baru Kompleks, resource heavy
SSE Server kirim event stream ke client Hanya satu arah (server → client)
WebSocket Koneksi persisten dua arah Butuh server khusus

Bagaimana WebSocket bekerja:

1. HTTP Upgrade Request:
GET /chat HTTP/1.1
Upgrade: websocket
Connection: Upgrade

2. Server menyetujui:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket

3. Koneksi WebSocket terbuka — kirim data bolak-balik tanpa HTTP overhead

Menggunakan WebSocket di JavaScript:

// Membuat koneksi
const ws = new WebSocket("wss://chat.example.com");

// Event saat koneksi terbuka
ws.addEventListener("open", () => {
  console.log("Terhubung!");
  ws.send(JSON.stringify({ type: "join", room: "general" }));
});

// Event saat menerima pesan
ws.addEventListener("message", (event) => {
  const data = JSON.parse(event.data);
  console.log("Pesan baru:", data);
});

// Event saat koneksi tertutup
ws.addEventListener("close", (event) => {
  console.log("Koneksi ditutup:", event.code, event.reason);
});

// Event saat error
ws.addEventListener("error", (error) => {
  console.error("WebSocket error:", error);
});

// Menutup koneksi
ws.close(1000, "Selesai");

Server-Sent Events (SSE) — alternatif yang lebih sederhana:

SSE cocok jika kamu hanya butuh server mengirim data ke client (satu arah):

const source = new EventSource("/api/notifications");

source.addEventListener("message", (event) => {
  console.log("Notifikasi:", JSON.parse(event.data));
});

Kelebihan SSE: auto-reconnect, lebih sederhana, bisa melewati firewall yang blokir WebSocket.

Kapan pakai apa: