วงจรชีวิตและข้อผิดพลาดของการเชื่อมต่อ
จัดการเหตุการณ์เปิด ปิด และข้อผิดพลาด
วงจรชีวิตและข้อผิดพลาดของการเชื่อมต่อ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
วงจรชีวิตทั้งหมด
ซ็อกเก็ตจะเปลี่ยนสถานะผ่าน CONNECTING → OPEN → CLOSING → CLOSED เหตุการณ์สี่รายการสอดคล้องกับการเปลี่ยนสถานะเหล่านี้ ได้แก่ open, message, error และ close
เหตุการณ์ onclose
onclose จะทำงานเมื่อการเชื่อมต่อสิ้นสุดลง ไม่ว่าจะสิ้นสุดอย่างเรียบร้อยหรือไม่ เหตุการณ์นี้มีข้อมูล code, reason และ wasClean
socket.onclose = (event) => {
console.log("Closed", event.code, event.reason, event.wasClean);
};รหัสการปิดการเชื่อมต่อ
รหัสมาตรฐานได้แก่ 1000 (ปกติ), 1001 (กำลังออกจากระบบ), 1006 (ผิดปกติ ไม่มีเฟรมปิดการเชื่อมต่อ) และ 1011 (ข้อผิดพลาดของเซิร์ฟเวอร์) รหัส 4000–4999 กำหนดขึ้นโดยแอปพลิเคชัน
socket.onclose = (e) => {
if (e.code === 1000) console.log("normal close");
else console.log("unexpected", e.code);
};การปิดการเชื่อมต่อโดยเจตนา
socket.close(code, reason) จะเริ่มการปิดการเชื่อมต่ออย่างเรียบร้อย ใช้ 1000 สำหรับการปิดตามปกติ โดยสตริงเหตุผลต้องมีขนาดน้อยกว่า 123 ไบต์
socket.close(1000, "user logged out");เหตุการณ์ onerror
onerror จะทำงานเมื่อเกิดความล้มเหลว ด้วยเหตุผลด้านความปลอดภัย เหตุการณ์ข้อผิดพลาดนี้จึงมีข้อมูลจำกัดโดยเจตนาและไม่มีเหตุผลโดยละเอียด โดยเกือบทุกครั้งจะมีเหตุการณ์ close ตามมา
socket.onerror = (event) => {
console.log("Socket error — a close will follow");
};การแยกความแตกต่างระหว่างการปิดอย่างเรียบร้อยกับผิดปกติ
event.wasClean จะเป็น true ก็ต่อเมื่อทั้งสองฝ่ายแลกเปลี่ยนเฟรมปิดการเชื่อมต่อกันแล้วเท่านั้น หากเครือข่ายหลุด จะได้ค่า wasClean: false และรหัส 1006
socket.onclose = (e) => {
if (!e.wasClean) console.log("Connection dropped unexpectedly");
};การล้างทรัพยากร
เมื่อปิดการเชื่อมต่อ ให้ล้างตัวจับเวลา (สัญญาณชีพ) ปฏิเสธคำขอที่เป็น pending และอัปเดตสถานะส่วนติดต่อผู้ใช้ เพื่อให้แอปสะท้อนการขาดการเชื่อมต่อ
socket.onclose = () => {
clearInterval(heartbeatTimer);
pending.forEach((reject) => reject(new Error("disconnected")));
pending.clear();
};การนำตัวฟังเหตุการณ์ออก
หากคุณผูกตัวจัดการด้วย addEventListener ให้นำตัวจัดการเหล่านั้นออกเมื่อปิดการเชื่อมต่อ เพื่อป้องกันหน่วยความจำรั่ว โดยเฉพาะเมื่อสร้างซ็อกเก็ตใหม่
function cleanup() {
socket.removeEventListener("message", onMessage);
socket.removeEventListener("close", onClose);
}readyState ระหว่างการปิดระบบ
ระหว่างการเรียก close() กับเหตุการณ์ onclose ค่า readyState จะเป็น CLOSING (2) การส่งข้อมูลในช่วงนี้จะถูกเพิกเฉย
socket.close();
console.log(socket.readyState); // 2 (CLOSING)การหมดเวลาขณะไม่มีการใช้งานจากเซิร์ฟเวอร์
เซิร์ฟเวอร์และพร็อกซีมักปิดการเชื่อมต่อที่ไม่มีการใช้งานหลังผ่านไป 30–60 วินาที สัญญาณชีพช่วยให้การเชื่อมต่อยังทำงานอยู่ และช่วยให้ตรวจพบการหลุดได้อย่างรวดเร็ว
การตรวจจับการเชื่อมต่อที่ขาดหาย
ใช้สัญญาณชีพร่วมกับตัวเฝ้าระวัง หากไม่มี pong เข้ามาภายในช่วงเวลาที่กำหนด ให้ถือว่าซ็อกเก็ตขาดการเชื่อมต่อ แล้วปิดซ็อกเก็ตเพื่อเริ่มการเชื่อมต่อใหม่
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);
};ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบการจัดการวงจรชีวิต
ทบทวน: วงจรชีวิตและข้อผิดพลาด
คุณจัดการ onclose พร้อมข้อมูล code/reason/wasClean เรียนรู้รหัสการปิดมาตรฐาน ปิดการเชื่อมต่อโดยเจตนา จัดการ onerror ที่มีข้อมูลจำกัด ล้างตัวจับเวลาและตัวฟังเหตุการณ์ และสร้างตัวเฝ้าระวังด้วยสัญญาณชีพแล้ว ต่อไป: กลยุทธ์การเชื่อมต่อใหม่
คำถามที่พบบ่อย
บทเรียน “วงจรชีวิตและข้อผิดพลาดของการเชื่อมต่อ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “วงจรชีวิตและข้อผิดพลาดของการเชื่อมต่อ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “วงจรชีวิตและข้อผิดพลาดของการเชื่อมต่อ”
จัดการเหตุการณ์เปิด ปิด และข้อผิดพลาด คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “วงจรชีวิตและข้อผิดพลาดของการเชื่อมต่อ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเปิดการเชื่อมต่อ WebSocket
- การส่งและรับข้อความ
- วงจรชีวิตและข้อผิดพลาดของการเชื่อมต่อ
- กลยุทธ์การเชื่อมต่อใหม่