JavaScript Academy · Pelajaran

Siklus Hidup dan Error Koneksi

Tangani peristiwa open, close, dan error.

Siklus Hidup dan Error Koneksi adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Siklus Hidup Lengkap

Socket bergerak melalui CONNECTING → OPEN → CLOSING → CLOSED. Empat kejadian memetakan transisi ini: open, message, error, dan close.

Kejadian onclose

onclose dijalankan saat koneksi berakhir, baik secara normal maupun tidak. Kejadian tersebut membawa code, reason, dan wasClean.

socket.onclose = (event) => {
  console.log("Closed", event.code, event.reason, event.wasClean);
};

Kode Penutupan

Kode standar mencakup 1000 (normal), 1001 (akan pergi), 1006 (tidak normal, tanpa bingkai penutupan), dan 1011 (kesalahan server). Kode 4000–4999 ditentukan oleh aplikasi.

socket.onclose = (e) => {
  if (e.code === 1000) console.log("normal close");
  else console.log("unexpected", e.code);
};

Menutup dengan Sengaja

socket.close(code, reason) memulai penghentian yang tertib. Gunakan 1000 untuk penutupan normal; string alasan harus berukuran kurang dari 123 bytes.

socket.close(1000, "user logged out");

Kejadian onerror

onerror dijalankan saat terjadi kegagalan. Demi keamanan, kejadian kesalahan sengaja dibuat minim — kejadian tersebut tidak membawa alasan terperinci. Kejadian close hampir selalu menyusul.

socket.onerror = (event) => {
  console.log("Socket error — a close will follow");
};

Membedakan Penutupan Normal dan Tidak Normal

event.wasClean hanya bernilai true saat kedua sisi telah saling menukar bingkai penutupan. Jaringan yang terputus menghasilkan wasClean: false dan kode 1006.

socket.onclose = (e) => {
  if (!e.wasClean) console.log("Connection dropped unexpectedly");
};

Membersihkan Sumber Daya

Saat koneksi ditutup, hapus pengatur waktu (sinyal detak), tolak permintaan yang masih menunggu, dan perbarui status antarmuka pengguna agar aplikasi mencerminkan pemutusan koneksi.

socket.onclose = () => {
  clearInterval(heartbeatTimer);
  pending.forEach((reject) => reject(new Error("disconnected")));
  pending.clear();
};

Menghapus Penangan

Jika Anda memasang penangan dengan addEventListener, hapus penangan tersebut saat koneksi ditutup untuk menghindari kebocoran, terutama saat membuat ulang socket.

function cleanup() {
  socket.removeEventListener("message", onMessage);
  socket.removeEventListener("close", onClose);
}

readyState Selama Penghentian

Di antara pemanggilan close() dan kejadian onclose, readyState bernilai CLOSING (2). Pengiriman dalam rentang ini diabaikan.

socket.close();
console.log(socket.readyState); // 2 (CLOSING)

Batas Waktu Menganggur dari Server

Server dan proksi sering menutup koneksi yang menganggur setelah 30–60 detik. Sinyal detak menjaga koneksi tetap aktif dan membantu Anda mendeteksi pemutusan dengan cepat.

Mendeteksi Koneksi yang Terputus

Gabungkan sinyal detak dengan pengawas: jika tidak ada pong yang tiba dalam jangka waktu tertentu, anggap socket telah terputus lalu tutup socket tersebut untuk memicu koneksi ulang.

let pongTimer;
function ping() {
  socket.send(JSON.stringify({ type: "ping" }));
  pongTimer = setTimeout(() => socket.close(4000, "no pong"), 5000);
}
socket.onmessage = (e) => {
  if (JSON.parse(e.data).type === "pong") clearTimeout(pongTimer);
};

Pemeriksaan Cepat

Uji penanganan siklus hidup.

Rangkuman: Siklus Hidup dan Kesalahan

Anda telah menangani onclose beserta code/reason/wasClean, mempelajari kode penutupan standar, menutup koneksi dengan sengaja, menangani onerror yang minim informasi, membersihkan pengatur waktu dan penangan, serta membuat pengawas sinyal detak. Selanjutnya: strategi koneksi ulang.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Siklus Hidup dan Error Koneksi” gratis?

Ya — teks lengkap “Siklus Hidup dan Error Koneksi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Siklus Hidup dan Error Koneksi”?

Tangani peristiwa open, close, dan error. Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 3 dari 4.

Berapa lama pelajaran “Siklus Hidup dan Error Koneksi” 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 JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript 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

← Kembali ke JavaScript Academy