## Mengapa WebSocket? HTTP adalah protocol yang luar biasa untuk banyak hal, tapi ada satu hal yang tidak bisa dilakukan dengan baik: komunikasi dua arah secara realtime. HTTP bersifat request-response. Client mengirim request, server memberikan response, koneksi ditutup. Kalau server butuh mengirim data ke client tanpa diminta, HTTP tidak bisa melakukannya dengan efisien. Sebelum WebSocket ada, developer menggunakan berbagai workaround: polling (request berulang setiap beberapa detik), long polling (request yang ditahan sampai ada data), atau Flash socket. Semua pendekatan ini boros bandwidth, punya latensi tinggi, atau sudah usang. WebSocket mengatasi masalah ini dengan menyediakan koneksi TCP yang persisten dan full-duplex. Sekali koneksi dibuka, baik client maupun server bisa saling mengirim data kapan saja tanpa harus menunggu request dari sisi lain. ## Protocol WebSocket WebSocket protocol (RFC 6455) bekerja dalam dua fase: handshake dan data transfer. ### Handshake Handshake WebSocket dimulai sebagai HTTP request biasa dengan header khusus: ``` GET /ws HTTP/1.1 Host: contoh.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Version: 13 ``` Server merespons dengan status 101 Switching Protocols: ``` HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= ``` Setelah handshake sukses, koneksi HTTP di-upgrade menjadi koneksi WebSocket. Dari titik ini, komunikasi tidak lagi mengikuti format HTTP melainkan menggunakan frame-based protocol WebSocket yang jauh lebih ringan. ### Data Frame Data dalam WebSocket dikirim dalam bentuk frame. Setiap frame memiliki opcode yang menentukan jenis data: text (1), binary (2), close (8), ping (9), dan pong (10). Ping/pong frame digunakan untuk keep-alive dan deteksi koneksi yang putus. URL scheme untuk WebSocket adalah `ws://` (tidak terenkripsi) dan `wss://` (terenkripsi via TLS). Sama seperti HTTP vs HTTPS, selalu gunakan `wss://` di produksi. ## Native WebSocket API di Browser Browser modern sudah memiliki WebSocket API bawaan. Tidak perlu library tambahan untuk menggunakan WebSocket di sisi client. ```javascript // Membuka koneksi WebSocket const socket = new WebSocket("wss://contoh.com/ws"); // Event: koneksi berhasil dibuka socket.addEventListener("open", (event) => { console.log("Terhubung ke server"); socket.send(JSON.stringify({ type: "join", room: "general" })); }); // Event: menerima pesan dari server socket.addEventListener("message", (event) => { const data = JSON.parse(event.data); console.log("Pesan diterima:", data); }); // Event: error socket.addEventListener("error", (event) => { console.error("WebSocket error:", event); }); // Event: koneksi ditutup socket.addEventListener("close", (event) => { console.log(`Koneksi ditutup. Code: ${event.code}, Reason: ${event.reason}`); }); // Mengirim pesan function sendMessage(text) { if (socket.readyState === WebSocket.OPEN) { socket.send(JSON.stringify({ type: "message", text })); } } ``` Code `readyState` menunjukkan status koneksi: `0` (connecting), `1` (open), `2` (closing), `3` (closed). Selalu cek status sebelum mengirim data. ## Socket.io vs Native WebSocket Socket.io adalah library populer untuk aplikasi realtime. Tapi penting untuk dipahami: Socket.io bukan implementasi WebSocket murni. Socket.io menggunakan WebSocket sebagai transport utama, tapi memiliki protocol sendiri di atasnya. Berikut perbandingan keduanya: **Native WebSocket:** - Protocol standar (RFC 6455) - Tidak ada overhead tambahan - Client dan server bisa berbeda implementasi (cukup ikuti RFC) - Tidak ada fitur bawaan untuk reconnection, room, atau broadcast - Ukuran kecil, tidak ada dependency **Socket.io:** - Auto-reconnection bawaan - Konsep "room" dan "namespace" untuk mengelola koneksi - Broadcasting otomatis ke multiple client - Fallback ke long-polling jika WebSocket tidak tersedia - Acknowledgment (konfirmasi pesan diterima) - Binary streaming - Tapi: client dan server harus sama-sama Socket.io, tidak bisa dicampur dengan native WebSocket client Pilih Socket.io kalau kamu butuh fitur-fitur tingkat lanjut dan tidak keberatan dengan vendor lock-in ke protocol Socket.io. Pilih native WebSocket kalau kamu butuh performance maksimal, kompatibilitas dengan client non-Socket.io, atau hanya butuh komunikasi realtime sederhana. ## Membangun Chat App dengan Node.js dan `ws` Mari kita bangun aplikasi chat sederhana menggunakan library `ws` (native WebSocket untuk Node.js) di sisi server dan Socket.io di sisi browser. Pertama, install dependency: ```bash npm install ws ``` ### Server-side Code ```javascript import { WebSocketServer } from "ws"; import http from "http"; // Buat HTTP server (bisa melayani WebSocket dan HTTP biasa) const server = http.createServer((req, res) => { res.writeHead(200, { "Content-Type": "text/plain" }); res.end("WebSocket Chat Server berjalan"); }); // Buat WebSocket server yang attach ke HTTP server const wss = new WebSocketServer({ server, path: "/ws" }); // Simpan semua client yang terhubung beserta metadata const clients = new Map(); // ws -> { username, room } // Broadcast ke semua client dalam room tertentu function broadcastToRoom(room, message, exclude = null) { const data = JSON.stringify(message); for (const [client, meta] of clients) { if (client.readyState === 1 && meta.room === room && client !== exclude) { client.send(data); } } } wss.on("connection", (ws, req) => { console.log("Client baru terhubung"); let userInfo = { username: "anonim", room: "general" }; clients.set(ws, userInfo); // Kirim pesan selamat datang ws.send( JSON.stringify({ type: "system", text: `Selamat datang! Kamu bergabung di room "${userInfo.room}".`, timestamp: Date.now(), }) ); // Tangani pesan masuk ws.on("message", (raw) => { let data; try { data = JSON.parse(raw.toString()); } catch { ws.send(JSON.stringify({ type: "error", text: "Format JSON tidak valid." })); return; } const meta = clients.get(ws); switch (data.type) { case "set-username": meta.username = data.username || "anonim"; ws.send( JSON.stringify({ type: "system", text: `Username diubah menjadi "${meta.username}".`, timestamp: Date.now(), }) ); break; case "join-room": meta.room = data.room || "general"; ws.send( JSON.stringify({ type: "system", text: `Kamu bergabung di room "${meta.room}".`, timestamp: Date.now(), }) ); // Beri tahu anggota room lain broadcastToRoom(meta.room, { type: "system", text: `${meta.username} bergabung di room ini.`, timestamp: Date.now(), }, ws); break; case "message": if (!data.text?.trim()) break; const message = { type: "message", username: meta.username, text: data.text.trim().slice(0, 500), room: meta.room, timestamp: Date.now(), }; // Broadcast ke semua orang di room yang sama (termasuk pengirim) broadcastToRoom(meta.room, message); break; case "ping": ws.send(JSON.stringify({ type: "pong" })); break; } }); // Tangani koneksi ditutup ws.on("close", () => { const meta = clients.get(ws); if (meta) { broadcastToRoom(meta.room, { type: "system", text: `${meta.username} meninggalkan room.`, timestamp: Date.now(), }); } clients.delete(ws); console.log("Client terputus. Total:", clients.size); }); // Tangani error ws.on("error", (err) => { console.error("WebSocket error:", err.message); }); // Ping interval untuk keep-alive (30 detik) const pingInterval = setInterval(() => { if (ws.readyState === 1) { ws.ping(); } }, 30000); ws.on("close", () => clearInterval(pingInterval)); }); const PORT = process.env.PORT || 3000; server.listen(PORT, () => { console.log(`Server berjalan di port ${PORT}`); }); ``` ### Client-side Code (Browser) ```html Chat Realtime

Chat Realtime

Status: Menghubungkan...

``` ## Strategi Reconnection Reconnection adalah salah satu aspek paling penting dalam aplikasi WebSocket. Koneksi bisa terputus karena banyak alasan: network glitch, server restart, atau timeout. Tanpa reconnection yang baik, pengguna akan kehilangan akses realtime tanpa sadar. Strategi yang umum digunakan adalah **exponential backoff**. Daripada mencoba menghubungkan ulang setiap detik secara konstan (yang bisa membebani server), waktu tunggu dinaikkan secara eksponensial: 1 detik, 2 detik, 4 detik, 8 detik, dan seterusnya, sampai batas maksimum (misalnya 30 detik). ```javascript function calculateDelay(attempt) { const base = 1000; const max = 30000; const jitter = Math.random() * 500; // Tambahkan randomness untuk menghindari thundering herd return Math.min(base * Math.pow(2, attempt), max) + jitter; } ``` Penambahan jitter (randomness) penting kalau banyak client terputus secara bersamaan (misalnya saat server restart). Tanpa jitter, semua client akan mencoba reconnect pada saat yang sama dan bisa membuat server overwhelmed. ## Scaling dengan Redis Adapter Saat aplikasi tumbuh, satu instance server tidak cukup. Kamu perlu menjalankan multiple instance dan menyebar beban dengan load balancer. Tapi ini menimbulkan masalah: WebSocket adalah koneksi stateful. Kalau Client A terhubung ke Instance 1 dan Client B ke Instance 2, pesan dari A tidak akan sampai ke B. Solusinya adalah menggunakan pub/sub message broker sebagai bridge antar instance. Redis adalah pilihan yang paling populer untuk ini. ### Arsitektur dengan Redis ``` Client A ----> Instance 1 ----> Redis Pub/Sub | Client B ----> Instance 2 <---- Redis Pub/Sub ``` Saat Instance 1 menerima pesan dari Client A, pesan dipublikasikan ke channel Redis. Instance 2 yang subscribe ke channel yang sama akan menerima pesan dan meneruskannya ke Client B. ### Implementasi dengan Socket.io dan Redis Socket.io memiliki adapter Redis yang siap pakai. Install dependency: ```bash npm install socket.io @socket.io/redis-adapter redis ``` ```javascript import { Server } from "socket.io"; import { createAdapter } from "@socket.io/redis-adapter"; import { createClient } from "redis"; import http from "http"; const httpServer = http.createServer(); const io = new Server(httpServer, { cors: { origin: "*" }, }); // Buat Redis clients untuk pub dan sub const pubClient = createClient({ url: process.env.REDIS_URL || "redis://localhost:6379" }); const subClient = pubClient.duplicate(); await Promise.all([pubClient.connect(), subClient.connect()]); // Pasang Redis adapter io.adapter(createAdapter(pubClient, subClient)); // Konsep room bawaan Socket.io io.on("connection", (socket) => { console.log("User terhubung:", socket.id); socket.on("join-room", (room) => { socket.join(room); socket.to(room).emit("user-joined", { id: socket.id }); }); socket.on("chat-message", ({ room, text }) => { // io.to() akan broadcast ke semua client di room, // termasuk yang ada di instance lain (via Redis) io.to(room).emit("chat-message", { id: socket.id, text, timestamp: Date.now(), }); }); socket.on("disconnect", () => { console.log("User terputus:", socket.id); }); }); const PORT = process.env.PORT || 3000; httpServer.listen(PORT, () => { console.log(`Socket.io server berjalan di port ${PORT}`); }); ``` Dengan Redis adapter, kamu bisa menjalankan beberapa instance server Socket.io di belakang load balancer. Pesan akan otomatis disinkronkan antar instance melalui Redis. Pengguna tidak perlu tahu instance mana yang menangani koneksi mereka. ### Implementasi dengan Native WS dan Redis Kalau kamu menggunakan native WebSocket (`ws` library), kamu perlu mengimplementasikan pub/sub sendiri: ```javascript import { WebSocketServer } from "ws"; import { createClient } from "redis"; import http from "http"; const httpServer = http.createServer(); const wss = new WebSocketServer({ server: httpServer, path: "/ws" }); const pubClient = createClient({ url: "redis://localhost:6379" }); const subClient = createClient({ url: "redis://localhost:6379" }); await Promise.all([pubClient.connect(), subClient.connect()]); const clients = new Map(); // Subscribe ke channel Redis untuk broadcast antar instance await subClient.subscribe("chat:global", (message) => { const data = JSON.parse(message); for (const [client, meta] of clients) { if (client.readyState === 1 && meta.room === data.room) { client.send(JSON.stringify(data)); } } }); wss.on("connection", (ws) => { clients.set(ws, { username: "anonim", room: "general" }); ws.on("message", async (raw) => { const data = JSON.parse(raw.toString()); if (data.type === "message") { const meta = clients.get(ws); const message = JSON.stringify({ type: "message", username: meta.username, text: data.text, room: meta.room, timestamp: Date.now(), }); // Publish ke Redis, bukan broadcast lokal await pubClient.publish("chat:global", message); } }); ws.on("close", () => { clients.delete(ws); }); }); httpServer.listen(3000); ``` Kuncinya: alih-alih broadcast langsung ke client lokal, server mempublikasikan pesan ke Redis. Semua instance subscribe ke channel yang sama dan meneruskan pesan ke client lokal mereka. ## Tips Produksi 1. **Gunakan sticky sessions di load balancer kalau memungkinkan.** Walaupun Redis adapter menangani cross-instance messaging, menjaga koneksi client ke instance yang sama mengurangi latensi. 2. **Monitor jumlah koneksi aktif.** Setiap koneksi WebSocket mengkonsumsi memori dan file descriptor. Set batas maksimum dan tolak koneksi baru kalau sudah mencapai limit. 3. **Implementasi heartbeat/ping-pong.** Koneksi WebSocket bisa terlihat aktif tapi sebenarnya sudah mati (half-open connection). Ping/pong secara berkala mendeteksi koneksi zombie dan membersihkannya. 4. **Gunakan compression.** Library `ws` mendukung permessage-deflate extension untuk mengkompres pesan. Ini sangat berguna untuk pesan teks yang panjang. 5. **Handle backpressure.** Kalau client menerima data lebih lambat dari yang dikirim server (slow consumer), buffer akan membengkak. `ws` menyediakan properti `bufferedAmount` untuk mendeteksi ini. 6. **Rate limiting.** Batasi jumlah pesan per user per detik untuk mencegah penyalahgunaan. ## Kesimpulan WebSocket adalah fondasi untuk aplikasi realtime di web. Untuk kasus sederhana, native WebSocket API sudah cukup dan memberi kontrol penuh. Untuk aplikasi yang lebih kompleks dengan kebutuhan reconnection otomatis, room management, dan cross-instance communication, Socket.io dengan Redis adapter adalah kombinasi yang sudah teruji. Penting untuk memahami trade-off antara kesederhanaan native WebSocket dan fitur lengkap Socket.io. Apapun yang dipilih, jangan lupa implementasi reconnection dengan exponential backoff dan scaling strategy dengan Redis sejak awal. Memperbaiki arsitektur realtime setelah aplikasi besar jauh lebih sulit daripada merancangnya dengan benar dari awal.