JavaScript Academy · บทเรียน

กลยุทธ์การเชื่อมต่อใหม่

เชื่อมต่อใหม่อย่างน่าเชื่อถือหลังการเชื่อมต่อหลุด

กลยุทธ์การเชื่อมต่อใหม่ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องเชื่อมต่อใหม่

เครือข่ายไม่น่าเชื่อถือ Wi-Fi อาจหลุด แล็ปท็อปอาจเข้าสู่โหมดพัก และเซิร์ฟเวอร์อาจเริ่มทำงานใหม่ ไคลเอ็นต์ WebSocket ที่ทนทานจะตรวจจับการปิดการเชื่อมต่อและสร้างการเชื่อมต่อใหม่โดยอัตโนมัติ เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ต่อเนื่องไม่สะดุด

การเชื่อมต่อใหม่แบบง่าย

วิธีที่ง่ายที่สุดคือเปิดการเชื่อมต่อใหม่ทันทีที่ปิดลง อันตรายคือ หากเซิร์ฟเวอร์หยุดทำงาน วิธีนี้จะส่งคำขอซ้ำถี่ ๆ จนรบกวนเซิร์ฟเวอร์

function connect() {
  const socket = new WebSocket(url);
  socket.onclose = () => connect(); // too aggressive!
}

การหน่วงเวลาคงที่

การเพิ่มเวลาหน่วงคงที่จะอ่อนโยนกว่า แต่ยังคงส่งความพยายามอย่างสม่ำเสมอ และอาจทำให้ไคลเอ็นต์จำนวนมากทำงานพร้อมกัน ซึ่งก่อให้เกิดปัญหาฝูงชนถล่ม

socket.onclose = () => {
  setTimeout(connect, 3000);
};

การถอยกลับแบบเอ็กซ์โพเนนเชียล

เพิ่มเวลารอเป็นสองเท่าหลังความพยายามที่ล้มเหลวแต่ละครั้ง: 1 วินาที, 2 วินาที, 4 วินาที, 8 วินาที… โดยจำกัดไว้ที่ค่าสูงสุด วิธีนี้ช่วยกระจายการลองใหม่และลดภาระของเซิร์ฟเวอร์ที่กำลังมีปัญหา

let attempt = 0;
function reconnect() {
  const delay = Math.min(1000 * 2 ** attempt, 30000);
  attempt++;
  setTimeout(connect, delay);
}

การเพิ่มความผันผวนแบบสุ่ม

สุ่มเวลาหน่วงเล็กน้อย เพื่อไม่ให้ไคลเอ็นต์หลายพันรายการเชื่อมต่อใหม่ในขณะเดียวกันทั้งหมด ความผันผวนแบบสุ่มเต็มรูปแบบจะเลือกค่าสุ่มระหว่าง 0 กับค่าขีดจำกัดที่คำนวณได้

function backoffWithJitter(attempt) {
  const cap = Math.min(1000 * 2 ** attempt, 30000);
  return Math.random() * cap;
}

การรีเซ็ตเมื่อสำเร็จ

เมื่อ onopen ทำงาน ให้รีเซ็ตตัวนับ attempt เพื่อให้การขาดการเชื่อมต่อครั้งถัดไปเริ่มการถอยกลับใหม่ตั้งแต่ต้น

socket.onopen = () => {
  attempt = 0;
  console.log("reconnected");
};

ไคลเอ็นต์ที่เชื่อมต่อใหม่ได้อย่างสมบูรณ์

นำส่วนต่าง ๆ มารวมกัน: เชื่อมต่อ รีเซ็ตเมื่อเปิด และใช้การถอยกลับเมื่อปิด

let attempt = 0, socket;
function connect() {
  socket = new WebSocket(url);
  socket.onopen = () => { attempt = 0; };
  socket.onclose = () => {
    const delay = Math.min(1000 * 2 ** attempt++, 30000);
    setTimeout(connect, delay + Math.random() * 1000);
  };
}
connect();

การเคารพสถานะออนไลน์และออฟไลน์

รับฟังเหตุการณ์ออนไลน์และออฟไลน์ของเบราว์เซอร์ หยุดการเชื่อมต่อใหม่ขณะออฟไลน์ และเริ่มความพยายามทันทีเมื่อการเชื่อมต่อกลับมา

window.addEventListener("online", () => {
  attempt = 0;
  connect();
});
window.addEventListener("offline", () => {
  if (socket) socket.close();
});

การจำกัดจำนวนความพยายาม

คุณอาจจำกัดจำนวนครั้งที่ลองใหม่ และแจ้งความล้มเหลวถาวรแก่ผู้ใช้แทนการลองใหม่ตลอดไป

const MAX = 10;
socket.onclose = () => {
  if (attempt >= MAX) { showOfflineBanner(); return; }
  setTimeout(connect, backoffWithJitter(attempt++));
};

การซิงค์สถานะใหม่หลังเชื่อมต่ออีกครั้ง

การเชื่อมต่อใหม่ไม่มีบริบทจากฝั่งเซิร์ฟเวอร์ เมื่อเปิดการเชื่อมต่ออีกครั้ง ให้สมัครรับข้อมูลจากช่องต่าง ๆ ใหม่ และร้องขอข้อความที่พลาดไปขณะขาดการเชื่อมต่อ

socket.onopen = () => {
  attempt = 0;
  socket.send(JSON.stringify({ type: "resubscribe", channels }));
  socket.send(JSON.stringify({ type: "sync", since: lastSeenId }));
};

การหลีกเลี่ยงซ็อกเก็ตซ้ำซ้อน

ป้องกันการเปิดซ็อกเก็ตหลายรายการ หากตรรกะการเชื่อมต่อใหม่ทำงานสองครั้ง ให้ติดตามซ็อกเก็ตปัจจุบันและเพิกเฉยต่อตัวจัดการเก่า

function connect() {
  if (socket && socket.readyState <= WebSocket.OPEN) return;
  socket = new WebSocket(url);
}

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบการออกแบบการเชื่อมต่อใหม่

ทบทวน: การเชื่อมต่อใหม่

คุณพัฒนาจากการเชื่อมต่อใหม่แบบง่ายไปสู่การถอยกลับแบบเอ็กซ์โพเนนเชียลที่มีความผันผวนแบบสุ่ม รีเซ็ตความพยายามเมื่อสำเร็จ เคารพเหตุการณ์ออนไลน์และออฟไลน์ จำกัดจำนวนครั้งที่ลองใหม่ ซิงค์สถานะใหม่หลังเชื่อมต่ออีกครั้ง และหลีกเลี่ยงซ็อกเก็ตซ้ำซ้อนแล้ว ตอนนี้ไคลเอ็นต์ของคุณมีความทนทาน

คำถามที่พบบ่อย

บทเรียน “กลยุทธ์การเชื่อมต่อใหม่” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “กลยุทธ์การเชื่อมต่อใหม่” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “กลยุทธ์การเชื่อมต่อใหม่”

เชื่อมต่อใหม่อย่างน่าเชื่อถือหลังการเชื่อมต่อหลุด คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “กลยุทธ์การเชื่อมต่อใหม่” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy