WebSocket Fundamentals

WebSocket membuat koneksi persistent, full-duplex antara client dan server. Setelah handshake HTTP awal, komunikasi dua arah via single TCP connection.

Handshake

// Client request upgrade
GET /ws HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==

// Server accepts
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade

// Setelah ini: WebSocket protocol, bukan HTTP lagi

Server (Node.js with ws)

import { WebSocketServer } from "ws";

const wss = new WebSocketServer({ port: 8080 });

wss.on("connection", (ws) => {
  console.log("Client connected");

  ws.on("message", (data) => {
    const message = JSON.parse(data);
    console.log("Received:", message);

    // Echo back
    ws.send(JSON.stringify({ type: "echo", data: message }));
  });

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

  // Send welcome message
  ws.send(JSON.stringify({ type: "welcome", message: "Connected!" }));
});

Client (Browser)

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

ws.addEventListener("open", () => {
  console.log("Connected!");
  ws.send(JSON.stringify({ type: "hello", name: "Budi" }));
});

ws.addEventListener("message", (event) => {
  const data = JSON.parse(event.data);
  console.log("Server says:", data);
});

ws.addEventListener("close", (event) => {
  console.log("Disconnected:", event.code, event.reason);
  // Reconnect logic here
});

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

Message Protocol

// Define message format
interface WSMessage {
  type: string;    // "chat", "typing", "join", "leave"
  payload: unknown; // message-specific data
  timestamp: number;
}

// Example messages
{ type: "chat", payload: { text: "Hello!" }, timestamp: 1234567890 }
{ type: "typing", payload: { userId: "123" }, timestamp: 1234567891 }