0Pricing
Frontend Academy · Pelajaran

API WebSocket: buka pesan tutup error

Buat koneksi WebSocket, kirim dan terima pesan dalam penangan event message, lalu tangani error koneksi dan penutupan yang bersih.

API WebSocket: buka pesan tutup error adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa WebSockets?

HTTP menggunakan pola permintaan/respons. Untuk aplikasi waktu nyata (obrolan, permainan multipemain, pembaruan langsung), Anda memerlukan komunikasi dua arah yang persisten. WebSockets memberi Anda satu koneksi TCP yang tetap terbuka dan memungkinkan kedua pihak mengirim pesan kapan saja.

Membuat WebSocket

Buat WebSocket dengan URL ws:// atau wss://. Browser menangani jabat tangan peningkatan koneksi.

const ws = new WebSocket('wss://api.example.com/realtime');

// Always use wss:// (secure) in production

Empat Peristiwa

WebSocket memiliki empat jenis peristiwa: open (terhubung), message (data diterima), close (koneksi berakhir), error (masalah).

ws.addEventListener('open', () => {
  console.log('Connected');
  ws.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
});

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

ws.addEventListener('close', (event) => {
  console.log('Closed:', event.code, event.reason);
});

ws.addEventListener('error', (event) => {
  console.error('Error:', event);
});

Mengirim Pesan

Gunakan ws.send(). Ini menerima teks, ArrayBuffers, Blob, atau ArrayBufferView. Untuk data terstruktur, panggil JSON.stringify terlebih dahulu.

ws.send('hello');
ws.send(JSON.stringify({ type: 'chat', text: 'Hi' }));

// Binary:
const buffer = new ArrayBuffer(8);
ws.send(buffer);

Menerima Pesan

Periksa event.data — jenisnya sesuai dengan yang dikirim server. Gunakan JSON.parse untuk payload objek.

ws.addEventListener('message', (event) => {
  // typeof event.data: string | ArrayBuffer | Blob
  if (typeof event.data === 'string') {
    const msg = JSON.parse(event.data);
    handleMessage(msg);
  }
});

Status Koneksi (readyState)

Periksa ws.readyState: CONNECTING=0, OPEN=1, CLOSING=2, CLOSED=3. Jangan mengirim sebelum berstatus OPEN.

if (ws.readyState === WebSocket.OPEN) {
  ws.send(message);
} else {
  console.warn('Not connected yet');
}

Menutup dengan Bersih

Panggil ws.close(code, reason). Kode penutupan standar: 1000 (normal), 1001 (akan pergi), 1008 (pelanggaran kebijakan), 1011 (error server).

ws.close(1000, 'User logged out');

Strategi Penyambungan Kembali

WebSockets terputus saat terjadi perubahan jaringan, server dimulai ulang, dan sebagainya. Terapkan penyambungan kembali dengan jeda eksponensial.

let reconnectDelay = 1000;

function connect() {
  const ws = new WebSocket('wss://api/realtime');
  ws.addEventListener('open', () => { reconnectDelay = 1000; });
  ws.addEventListener('close', () => {
    setTimeout(connect, reconnectDelay);
    reconnectDelay = Math.min(reconnectDelay * 2, 30000);
  });
  return ws;
}

Detak Jantung / Menjaga Koneksi Tetap Aktif

WebSockets yang tidak aktif akan dihentikan oleh proksi dan penyeimbang beban setelah sekitar 60 detik. Kirim ping setiap 25–30 detik untuk menjaga koneksi tetap aktif.

let pingInterval;
ws.addEventListener('open', () => {
  pingInterval = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({ type: 'ping' }));
    }
  }, 25000);
});
ws.addEventListener('close', () => clearInterval(pingInterval));

Autentikasi

WebSockets tidak mendukung header khusus. Pilihan yang tersedia: 1) Lakukan autentikasi melalui token string kueri (?token=jwt) pada URL WS. 2) Kirim pesan autentikasi setelah open. 3) Gunakan cookie (bekerja otomatis untuk asal yang sama).

// Query string:
const ws = new WebSocket(`wss://api/realtime?token=${jwt}`);

// Auth message:
ws.addEventListener('open', () => {
  ws.send(JSON.stringify({ type: 'auth', token: jwt }));
});

Hook React untuk WebSockets

Bungkus siklus hidup WS dalam hook khusus agar koneksi tidak bocor.

function useWebSocket(url) {
  const [messages, setMessages] = useState([]);
  const wsRef = useRef(null);

  useEffect(() => {
    const ws = new WebSocket(url);
    wsRef.current = ws;
    ws.addEventListener('message', (e) => {
      setMessages(m => [...m, JSON.parse(e.data)]);
    });
    return () => ws.close();
  }, [url]);

  return { messages, send: (msg) => wsRef.current?.send(JSON.stringify(msg)) };
}

WebSocket dibandingkan dengan HTTP/2 dan SSE

WebSocket: dupleks penuh, kedua pihak dapat mengirim. Server push HTTP/2: sudah tidak digunakan lagi. Server-Sent Events: hanya dari server ke klien, lebih sederhana, dan tersambung kembali secara otomatis. Pilih WS saat klien juga perlu mengirim (obrolan); gunakan SSE untuk notifikasi satu arah.

Pemeriksaan Singkat

Apa kode penutupan WebSocket standar untuk penutupan normal yang disengaja (misalnya, pengguna keluar)?

Ringkasan: API WebSocket

new WebSocket('wss://...') membuka koneksi. Empat peristiwa: open, message, close, error. send() menerima string/ArrayBuffer/Blob; gunakan JSON.stringify untuk objek. Periksa readyState sebelum mengirim. Gunakan close(1000) untuk penutupan bersih. Sambungkan kembali dengan jeda eksponensial. Kirim detak jantung setiap 25 detik agar koneksi tetap aktif. Lakukan autentikasi melalui string kueri atau pesan autentikasi. Bungkus dalam hook untuk React.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “API WebSocket: buka pesan tutup error” gratis?

Ya — teks lengkap “API WebSocket: buka pesan tutup error” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “API WebSocket: buka pesan tutup error”?

Buat koneksi WebSocket, kirim dan terima pesan dalam penangan event message, lalu tangani error koneksi dan penutupan yang bersih. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “API WebSocket: buka pesan tutup error” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. API WebSocket: buka pesan tutup error
  2. Integrasi Klien Socket.io
  3. Server-Sent Events untuk Streaming Satu Arah
  4. Pola UI Waktu Nyata
← Kembali ke Frontend Academy