Belajar WebSocket - Native WebSocket API: Client Side (Browser)

#Pendahuluan

Semua konsep protokol yang kita bedah di episode 2 dan 3 kini memiliki wujud praktis: WebSocket API bawaan browser. Kalian tidak perlu install library apa pun — setiap browser modern sudah mengimplementasikan RFC 6455.

Episode 4 mengajak kalian menguasai API ini dari awal: membuat instance WebSocket, mendaftarkan empat event handler, memakai method send dan close, membaca properti readyState dan bufferedAmount, hingga menyusun logika reconnection. Di akhir episode kalian punya klien WebSocket utuh yang siap diajak bicara dengan server mana pun.

#Membuat Instance WebSocket

#URL dan Subprotokol

Membuka koneksi cukup satu baris:

Membuat instance WebSocket

const ws = new WebSocket("wss://example.com/ws");
 
const wsChat = new WebSocket("wss://example.com/chat", ["chat-v1", "chat-v2"]);

Parameter kedua adalah daftar subprotokol yang diminta. new WebSocket(url, protocols) membuat instance dan langsung memulai handshake. Server boleh memilih satu dari daftar itu lewat header Sec-WebSocket-Protocol.

#Properti yang Langsung Terlihat

Segera setelah instance dibuat:

• ws.readyState berisi state koneksi (0 sampai 3).
• ws.bufferedAmount berisi jumlah byte yang belum terkirim.
• ws.url menampilkan URL final setelah redirect.

#Empat Event Handler

#onopen

Dipanggil saat handshake selesai dan koneksi siap dipakai:

Handler onopen

ws.onopen = () => {
  console.log("koneksi terbuka");
  ws.send("halo server");
};

Pastikan semua pesan awal dikirim dari dalam onopen — mengirim sebelum event ini bisa gagal karena koneksi belum OPEN.

#onmessage

Dipanggil setiap kali frame data tiba. Ini jantung dari aplikasi real-time:

Handler onmessage

ws.onmessage = (event) => {
  const data = event.data;
  if (typeof data === "string") {
    renderText(data);
  } else {
    renderBinary(data);
  }
};

event.data bisa berupa string untuk text frame, atau Blob dan ArrayBuffer untuk binary frame. Perilaku default binary adalah Blob; bisa diubah dengan ws.binaryType = "arraybuffer".

#onerror dan onclose

Error dan penutupan perlu ditangani terpisah:

Handler onerror dan onclose

ws.onerror = (event) => {
  console.error("terjadi error", event);
};
 
ws.onclose = (event) => {
  console.log("koneksi ditutup", event.code, event.reason);
};

onclose menerima objek dengan event.code dan event.reason. Perhatikan: onerror tidak selalu diikuti penutupan, tapi onclose hampir selalu datang setelah error fatal.

#Method dan Properti Penting

#send() dan close()

Dua method utama:

send dan close

ws.send("pesan teks");
ws.send(new Blob([data]));
ws.send(new Uint8Array([1, 2, 3]));
 
ws.close(1000, "tutup normal");

ws.send() menerima string, Blob, atau ArrayBufferView. ws.close(code, reason) memulai penutupan yang sopan: close frame dikirim, lalu state bergerak ke CLOSED.

#readyState dan bufferedAmount

Kedua properti ini penting untuk debugging:

Membaca bufferedAmount

function kirimPelan(ws, teks) {
  ws.send(teks);
  if (ws.bufferedAmount > 0) {
    console.log("masih ada data tertunda:", ws.bufferedAmount);
  }
}

ws.bufferedAmount memberi tahu berapa byte yang belum sampai ke jaringan — sinyal awal adanya backpressure yang akan kita bahas di episode 13.

#Logika Reconnection Sederhana

#Menyambung Kembali Setelah Putus

Koneksi WebSocket bisa putus kapan saja. Pola minimum yang wajib ada:

Reconnection sederhana

let ws;
 
function hubungkan() {
  ws = new WebSocket("wss://example.com/ws");
 
  ws.onclose = () => {
    setTimeout(hubungkan, 3000);
  };
}
 
hubungkan();

Memanggil hubungkan() dari dalam onclose dengan setTimeout(hubungkan, 3000) adalah inti reconnection. Episode 12 akan memperlengkapi pola ini dengan exponential backoff dan batas percobaan.

#Feature Detection dan Fallback

Semua browser modern mendukung WebSocket, tapi kode defensif tetap layak:

Deteksi dukungan WebSocket

if (window.WebSocket) {
  // jalan normal
} else {
  // fallback ke polling atau SSE
}

Cek window.WebSocket sebelum memakai API. Untuk browser lama, fallback yang umum adalah SSE atau long polling — persis seperti pilihan di episode 1.

#Penutup

Episode 4 membekali kalian klien WebSocket native: pembuatan instance, empat event handler, method send dan close, properti readyState dan bufferedAmount, serta pola reconnection sederhana untuk menahan putusnya koneksi.

Inti yang harus dibawa pulang:

• WebSocket API ada di browser tanpa install library.
• Empat event handler: onopen, onmessage, onerror, dan onclose.
• send menerima string, Blob, atau typed array; binaryType mengontrol format binary.
• close memakai kode dan reason untuk penutupan yang rapi.
• readyState dan bufferedAmount adalah alat debugging utama.
• Reconnection harus dipasang sejak awal, bukan setelah production bermasalah.

Di episode 5 selanjutnya kita pindah ke sisi server: WebSocket server dengan Node.js dan library ws — instalasi, pembuatan server, event connection, broadcast, hingga manajemen klien yang terhubung. Kalian akan memiliki pasangan lengkap klien dan server.