BAB 36 – WebSocket di JavaScript: Dari Dasar Hingga Aplikasi RealTime

Seiring berkembangnya aplikasi web, kebutuhan akan komunikasi real-time meningkat. Protokol HTTP klasik bersifat stateless dan request-response, sehingga tidak efisien untuk aplikasi chat, game, atau dashboard monitoring.

Untuk mengatasi keterbatasan ini, WebSocket diperkenalkan oleh IETF sebagai standar RFC 6455 pada tahun 2011. WebSocket memungkinkan koneksi persisten antara client dan server dengan komunikasi dua arah (full-duplex).

Keunggulan WebSocket:

• Mengurangi overhead koneksi dibanding polling HTTP
• Data bisa dikirim langsung tanpa menunggu permintaan baru
• Mendukung komunikasi dua arah secara real-time

---

Cara Kerja WebSocket Secara Teknis

2.1 Handshake HTTP

WebSocket menggunakan upgrade handshake HTTP:

1. Client mengirim request HTTP dengan header Upgrade: websocket dan Connection: Upgrade.
2. Server membalas dengan status 101 Switching Protocols.
3. Setelah handshake berhasil, koneksi HTTP berubah menjadi WebSocket.

Contoh header handshake:

Request Client:

GET /chat HTTP/1.1
Host: localhost:8080
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

Response Server:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

2.2 Frame WebSocket

Data dikirim dalam frame. Struktur frame sederhana:

• FIN bit: Menandai akhir pesan
• Opcode: Jenis frame (text, binary, close, ping, pong)
• Payload length: Panjang data
• Masking key: Untuk keamanan dari client ke server

Frame ini memungkinkan server dan client mengirim data secara efisien tanpa overhead HTTP.

---

3. WebSocket di Browser

Browser menyediakan API WebSocket bawaan. Contoh:

const socket = new WebSocket("ws://localhost:8080");

socket.onopen = () => {
    console.log("Koneksi terbuka");
    socket.send("Halo Server!");
};

socket.onmessage = (event) => {
    console.log("Pesan diterima:", event.data);
};

socket.onclose = () => console.log("Koneksi ditutup");
socket.onerror = (error) => console.error("Error:", error);

Mengirim dan Menerima JSON

const data = { user: "Alice", message: "Hai!" };
socket.send(JSON.stringify(data));

socket.onmessage = (event) => {
    const msg = JSON.parse(event.data);
    console.log(msg.user, "mengirim:", msg.message);
};

---

4. Membuat Server WebSocket dengan Node.js

Gunakan library ws:

npm install ws

Contoh Server Sederhana

const WebSocket = require("ws");
const server = new WebSocket.Server({ port: 8080 });

server.on("connection", (ws) => {
    console.log("Client terhubung");
    
    ws.send("Selamat datang!");

    ws.on("message", (message) => {
        console.log("Pesan dari client:", message);
        ws.send(`Server menerima: ${message}`);
    });

    ws.on("close", () => console.log("Client putus"));
});

---

5. Integrasi WebSocket dengan Express

Banyak aplikasi menggunakan Express sebagai HTTP server utama. Kita bisa mengintegrasikan WebSocket:

const express = require("express");
const http = require("http");
const WebSocket = require("ws");

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on("connection", (ws) => {
    ws.send("Terhubung dengan Express + WebSocket!");
});

server.listen(8080, () => console.log("Server berjalan di port 8080"));

---

6. Menggunakan WebSocket di Frontend Modern (React)

Contoh implementasi di React:

import { useEffect, useState } from "react";

function Chat() {
    const [messages, setMessages] = useState([]);
    
    useEffect(() => {
        const socket = new WebSocket("ws://localhost:8080");

        socket.onmessage = (event) => {
            setMessages((prev) => [...prev, event.data]);
        };

        return () => socket.close();
    }, []);

    return (
        <div>
            {messages.map((msg, i) => <p key={i}>{msg}</p>)}
        </div>
    );
}

export default Chat;

---

7. Praktik Terbaik dan Optimasi

7.1 Heartbeat / Ping-Pong

setInterval(() => {
    if (socket.readyState === WebSocket.OPEN) {
        socket.send(JSON.stringify({ type: "ping" }));
    }
}, 30000);

7.2 Auto-Reconnect

function connect() {
    const socket = new WebSocket("ws://localhost:8080");

    socket.onclose = () => setTimeout(connect, 3000);
}
connect();

7.3 Batas Ukuran Pesan

Server sebaiknya membatasi payload untuk mencegah DoS attack.

7.4 SSL / WSS

Gunakan wss:// untuk komunikasi terenkripsi.

---

8. Keamanan WebSocket

• Autentikasi token: Kirim JWT saat handshake atau di frame pertama.
• CORS WebSocket: Batasi origin client yang boleh connect.
• Validasi pesan: Hindari injection dan payload berbahaya.
• Rate-limiting: Batasi frekuensi pesan dari client.

---

9. Kasus Penggunaan Real-Time

1. Chat aplikasi: Pesan dikirim instan ke semua client.
2. Game multiplayer: Posisi pemain dan aksi diupdate langsung.
3. Dashboard monitoring: Sensor atau data keuangan diperbarui real-time.
4. Kolaborasi dokumen: Misalnya editor online seperti Google Docs.
5. Streaming data: Harga saham, cryptocurrency, notifikasi trading.

---

10. Debugging WebSocket

Beberapa tips:

• Gunakan browser DevTools → Network → WS untuk melihat frame.
• Logging server untuk memeriksa koneksi, pesan, dan error.
• Gunakan Wireshark untuk inspeksi frame TCP jika perlu.

---

11. Benchmark dan Performance Tips

• Gunakan binary frame untuk data besar.
• Terapkan compression (permessage-deflate).
• Hindari broadcast besar ke banyak client sekaligus tanpa batching.
• Gunakan cluster Node.js untuk load tinggi.

---

12. Alternatif WebSocket

Teknologi	Kelebihan	Kekurangan
SSE (Server-Sent Events)	Mudah, satu arah	Tidak full-duplex
WebRTC	Peer-to-peer, cocok audio/video	Kompleks
HTTP Polling	Simple	Overhead tinggi

WebSocket tetap unggul untuk komunikasi dua arah real-time.

---

Kesimpulan

WebSocket adalah protokol kunci untuk aplikasi real-time modern. Dengan koneksi persisten, komunikasi full-duplex, dan efisiensi tinggi, WebSocket memungkinkan:

• Chat aplikasi instan
• Game multiplayer lancar
• Dashboard monitoring real-time
• Kolaborasi dokumen online

Menguasai WebSocket meliputi:

1. Memahami handshake dan frame WebSocket
2. Implementasi client di browser / React
3. Server Node.js atau Express
4. Praktik terbaik: heartbeat, reconnect, keamanan, optimasi

Dengan pemahaman mendalam ini, developer bisa membangun aplikasi real-time yang handal, scalable, dan aman.

---