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…

Dengan HTTP biasa, browser selalu mulai duluan: kirim request, server membalas, selesai. Server gak bisa mengirim pesan tanpa ditanya, padahal chat dan notifikasi butuh pesan sampai begitu ada. WebSocket adalah koneksi (jalur antara browser dan server) yang dibuka sekali, tetap terbuka, dan dua arah: dua-duanya bisa kirim pesan kapan saja.

🧪 Tebakan cepat: aplikasi chat bertanya ke server "ada pesan baru?" tiap 1 detik, dan dalam semenit cuma datang 3 pesan. Berapa request yang pulang kosong? Jawabannya ada di bagian "Polling lawan satu koneksi terbuka".

Polling lawan satu koneksi terbuka

Sebelum ada WebSocket, caranya polling: browser bertanya ke server berulang-ulang dengan jeda tetap. Bandingkan dua cara menunggu pesan chat ini:

Polling: browser bertanya tiap 3 detik
detik 3   browser → server: ada pesan baru?    server → browser: belum
detik 6   browser → server: ada pesan baru?    server → browser: belum
detik 9   browser → server: ada pesan baru?    server → browser: "Halo!"

WebSocket: satu koneksi yang tetap terbuka
detik 0   browser ⇄ server: koneksi dibuka, sekali saja
detik 7   server → browser: "Halo!"
detik 8   browser → server: "Hai juga!"

Di polling, tiap baris adalah request baru. Dua yang pertama pulang kosong, jadi terbuang.
Pesan "Halo!" sudah ada di server sejak detik 7, tapi browser baru tahu di detik 9, saat bertanya lagi. Telat 2 detik.
Di WebSocket, koneksi dibuka sekali, dan server langsung mengirim pesan begitu ada. Gak ada request kosong, gak ada telat.
Browser juga bisa membalas lewat koneksi yang sama. Itu arti dua arah (full-duplex).

Jawaban tebakannya: 60 request semenit, 57 pulang kosong. Jedanya dipercepat, request terbuang makin banyak. Jedanya diperlambat, pesan makin telat. Polling gak bisa menang di dua-duanya.

Cara WebSocket dibuka: minta upgrade

WebSocket dimulai sebagai request HTTP biasa yang minta ganti protokol. Tandanya header (baris keterangan di request) Upgrade: websocket, ditemani Connection: Upgrade:

GET /chat HTTP/1.1
Host: contoh.com
Upgrade: websocket
Connection: Upgrade

Kalau server setuju, dia menjawab dengan status 101 Switching Protocols, dan sejak itu koneksinya jadi WebSocket. Beberapa header pengaman lain ditambahkan browser otomatis. Alamatnya pakai ws://, atau wss:// yang terenkripsi (kayak http:// dan https://).

Memakai WebSocket di JavaScript

const ws = new WebSocket("wss://chat.contoh.com");

ws.addEventListener("open", () => {
  ws.send("Halo, server!");
});

ws.addEventListener("message", (event) => {
  console.log("Pesan baru:", event.data);
});

new WebSocket(alamat) membuka koneksi. Request upgrade-nya dikirim browser otomatis.
Event open jalan saat koneksi siap. Baru setelah itu send() boleh dipanggil.
Event message jalan setiap kali server mengirim pesan, isinya di event.data. ws.close() menutup koneksi.

SSE: kalau cuma server yang kirim

Notifikasi atau feed berita cuma butuh satu arah, server ke browser. Untuk itu ada Server-Sent Events (SSE): satu request HTTP yang dibiarkan terbuka, dan server mengirim event lewat situ.

const sumber = new EventSource("/api/notifikasi");
sumber.addEventListener("message", (event) => console.log(event.data));

SSE lebih sederhana dan menyambung lagi sendiri kalau putus, tapi browser gak bisa membalas lewat situ. Jadi:

WebSocket: dua arah. Chat, game multiplayer, edit dokumen bareng.
SSE: cuma server yang kirim. Notifikasi, feed live, progress.
Polling: data yang jarang berubah dan boleh sedikit telat.
HTTP biasa: ambil dan simpan data yang gak perlu real-time.

⚠️ Jebakan yang sering ketemu

Pakai ws:// di website asli. ws:// gak dienkripsi, isinya bisa diintip. Pakai wss://.
Kirim sebelum open. send() sebelum koneksi siap bikin error. Tunggu event open.
Lupa koneksi bisa putus. Wi-Fi ganti atau server restart, dan WebSocket gak menyambung sendiri. Dengarkan event close, lalu buka koneksi baru.
WebSocket buat semuanya. Menyimpan form cukup pakai HTTP biasa. Tiap WebSocket bikin server menjaga satu koneksi tetap terbuka.

💡 Long polling, jalan tengah. Browser bertanya, tapi server menahan jawabannya sampai ada data baru, lalu browser langsung bertanya lagi. Lebih hemat dari polling biasa, dan masih dipakai sebagai cadangan kalau jaringan memblokir WebSocket.

TL;DR: HTTP biasa cuma menjawab saat ditanya, jadi polling bertanya terus: banyak request kosong, dan pesan telat sampai giliran bertanya berikutnya. WebSocket dibuka sekali lewat request HTTP dengan header Upgrade: websocket (server menjawab 101 Switching Protocols), lalu koneksinya tetap terbuka dan dua arah. Kalau cuma server yang perlu kirim, SSE (EventSource) lebih sederhana.