Tujuan Pembelajaran

Memahami konsep WebSocket dan full-duplex communication
Bisa membuat aplikasi real-time sederhana

Analogi

Diagram


      HTTP = Surat (Kirim → Tunggu → Balasan)
WebSocket = Telepon (Terbuka terus, real-time)

HTTP seperti surat — WebSocket seperti telepon

Penjelasan Konsep

WebSocket

WebSocket adalah protokol komunikasi yang memungkinkan dua arah (full-duplex) antara client dan server melalui satu koneksi yang tetap terbuka.

Analoginya

HTTP = Surat. WebSocket = Telepon.

Kenapa butuh WebSocket?

HTTP tidak cocok untuk real-time:

Polling boros (kirim request terus-menerus).
Latency tinggi.

WebSocket cocok untuk: Chat, live notification, real-time collaboration, live streaming data.

Cara kerja WebSocket

Client kirim HTTP request dengan header Upgrade: websocket.
Server setuju → koneksi di-upgrade jadi WebSocket.
Koneksi tetap terbuka, data bisa mengalir dua arah.
Kirim data dengan ws.send(), terima dengan ws.onmessage.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami konsep WebSocket dan full-duplex communication., dan bisa membuat aplikasi real-time sederhana. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca WebSocket, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

HTTP seperti surat — WebSocket seperti telepon. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa javascript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Baris 2-6: Koneksi dan join room. Baris 8-13: Handle pesan. Baris 26-33: Server broadcast.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sedang membangun skill inti. Setelah bagian ini, kamu bisa memilih spesialisasi sesuai minat: frontend, backend, atau DevOps.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

javascript

// WEBSOCKET CLIENT
const ws = new WebSocket('wss://chat.example.com');

ws.onopen = () => {
  console.log('Connected!');
  ws.send(JSON.stringify({ type: 'join', room: 'general' }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === 'message') {
    console.log(`${data.from}: ${data.text}`);
  }
};

ws.onclose = () => console.log('Disconnected!');

const sendMessage = (text) => {
  ws.send(JSON.stringify({ type: 'message', text }));
};

// WEBSOCKET SERVER
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    const data = JSON.parse(message);
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify(data));
      }
    });
  });
});

Penjelasan Kode

Baris 2-6: Koneksi dan join room. Baris 8-13: Handle pesan. Baris 26-33: Server broadcast.

Prompt AI

Jelaskan bedanya WebSocket dan Server-Sent Events (SSE).

Pertanyaan Reflektif

Buat chat sederhana dengan WebSocket. Buka dua tab. Kirim pesan — apakah real-time?