Dasar-Dasar WebSocket di Browser
Buka koneksi WebSocket, kirim pesan, dan tangani event dengan API WebSocket bawaan.
Dasar-Dasar WebSocket di Browser adalah pelajaran React 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.
Apa Itu WebSocket?
WebSocket adalah protokol yang menyediakan komunikasi dupleks penuh melalui satu koneksi TCP. Tidak seperti HTTP, koneksi tetap terbuka sehingga server dapat mengirim data ke klien kapan saja.
Membuka Koneksi
Buat objek WebSocket dengan URL ws:// atau wss://. Koneksi dibuka secara asinkron.
const ws = new WebSocket('wss://api.example.com/ws');
ws.onopen = () => {
console.log('Connection established');
};Mengirim Pesan
Gunakan ws.send() untuk mengirim data. Anda dapat mengirim string atau data biner (ArrayBuffer atau objek biner). Enkode objek sebagai JSON sebelum mengirimkannya.
ws.onopen = () => {
ws.send(JSON.stringify({ type: 'join', room: 'general' }));
ws.send('Hello, server!');
};Menerima Pesan
Peristiwa onmessage dipicu setiap kali server mengirim data. Data tersebut berada di event.data sebagai string atau jenis biner.
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('Received:', data);
};Menangani Kesalahan dan Penutupan
Tangani peristiwa onerror dan onclose. Peristiwa penutupan mencakup kode dan alasan yang menjelaskan mengapa koneksi berakhir.
ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
ws.onclose = (event) => {
console.log(`Closed: ${event.code} ${event.reason}`);
if (event.wasClean) {
console.log('Clean disconnect');
} else {
console.log('Connection lost — will retry');
}
};Kode Penutupan
Kode penutupan WebSocket standar: 1000 = normal, 1001 = akan meninggalkan koneksi, 1006 = tidak normal (tanpa bingkai penutupan), 1008 = pelanggaran kebijakan.
readyState
ws.readyState memberi tahu status koneksi saat ini: CONNECTING (0), OPEN (1), CLOSING (2), atau CLOSED (3). Selalu periksa statusnya sebelum mengirim.
function sendSafely(ws, data) {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(data));
} else {
console.warn('WebSocket not open, dropping message');
}
}Menutup Koneksi
Panggil ws.close(code, reason) untuk memulai penutupan yang bersih. Server menerima bingkai penutupan tersebut dan dapat merespons dengan bingkainya sendiri.
// Normal close
ws.close(1000, 'User logged out');
// Close from a cleanup effect
return () => ws.close();Data Biner
Atur ws.binaryType = 'arraybuffer' (atau 'blob') untuk menerima pesan biner. Ini berguna untuk audio, gambar, atau protokol khusus.
ws.binaryType = 'arraybuffer';
ws.onmessage = (event) => {
if (event.data instanceof ArrayBuffer) {
const view = new Uint8Array(event.data);
console.log('Binary message, bytes:', view.length);
} else {
console.log('Text message:', event.data);
}
};Heartbeat / Ping-Pong
API WebSocket di browser tidak mengekspos bingkai ping, tetapi Anda dapat menerapkan heartbeat tingkat aplikasi: kirim pesan ping setiap N detik dan harapkan respons pong.
function startHeartbeat(ws) {
return setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'ping' }));
}
}, 30_000);
}WebSocket vs Peristiwa yang Dikirim Server
Gunakan WebSocket untuk komunikasi dua arah (obrolan, permainan). Gunakan Server-Sent Events (SSE) hanya untuk aliran dari server ke klien (notifikasi, umpan langsung)—SSE bekerja melalui HTTP biasa dan tersambung kembali secara otomatis.
Pemeriksaan Singkat
Nilai readyState WebSocket berapa yang menunjukkan bahwa koneksi terbuka dan siap mengirim?
Rangkuman
Buat koneksi dengan new WebSocket(url), kirim objek yang diubah menjadi string JSON melalui ws.send(), lalu tangani peristiwa onmessage, onerror, dan onclose. Periksa readyState sebelum mengirim, dan tutup koneksi dengan bersih menggunakan ws.close(1000).
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Dasar-Dasar WebSocket di Browser” gratis?
Ya — teks lengkap “Dasar-Dasar WebSocket di Browser” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Dasar-Dasar WebSocket di Browser”?
Buka koneksi WebSocket, kirim pesan, dan tangani event dengan API WebSocket bawaan. Kamu berlatih React 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 React Academy?
Tidak diperlukan pengalaman sebelumnya. React 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 “Dasar-Dasar WebSocket di Browser” 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 React Academy ini?
Ya. Setiap pelajaran React 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
- Dasar-Dasar WebSocket di Browser
- Menggunakan Socket.IO dengan React
- Membangun Komponen Obrolan Waktu Nyata
- Penyambungan Kembali, Penanganan Kesalahan & Pembersihan