WebSockets & Realtime Systems Programming · บทเรียน

การเชื่อมต่อใหม่อัตโนมัติบนไคลเอนต์

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

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

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Connections Drop

Networks are unreliable. Wi-Fi hiccups, tabs sleep, and servers restart. A good client detects a closed socket and reconnects without the user noticing.

Detecting a Drop

The browser fires close when the connection ends and error on failures. Reconnection logic hooks into close.

ws.addEventListener('close', () => {
  scheduleReconnect();
});

Naive Reconnect Is Risky

Reconnecting instantly in a tight loop can hammer a struggling server. Instead, wait longer after each failed attempt.

Exponential Backoff

Double the delay each attempt, up to a cap, so a recovering server is not overwhelmed.

let attempt = 0;
function delay() {
  return Math.min(1000 * 2 ** attempt, 30000);
}

Adding Jitter

If many clients reconnect at once, they create a thundering herd. Random jitter spreads them out.

function delayWithJitter() {
  return delay() * (0.5 + Math.random() * 0.5);
}

The Reconnect Function

Wrap connection creation so each attempt re-binds handlers and schedules the next retry on failure.

function connect() {
  ws = new WebSocket(url);
  ws.addEventListener('open', onOpen);
  ws.addEventListener('close', scheduleReconnect);
}

Resetting on Success

When a connection opens successfully, reset the attempt counter so future drops start backoff fresh.

function onOpen() {
  attempt = 0;
  flushQueue();
}

Queuing Messages While Down

If the user sends while disconnected, buffer the message and send it once reconnected.

const queue = [];
function send(data) {
  if (ws.readyState === WebSocket.OPEN) ws.send(data);
  else queue.push(data);
}

Flushing the Queue

On reconnect, drain the buffer in order.

function flushQueue() {
  while (queue.length) ws.send(queue.shift());
}

Giving Up Gracefully

After a max number of attempts, surface an error to the user rather than retrying forever.

function scheduleReconnect() {
  if (++attempt > 10) return showOffline();
  setTimeout(connect, delayWithJitter());
}

Best Practices

Build resilient clients:

Use exponential backoff with jitter
Reset state on a successful open
Queue outgoing messages while offline
Cap retries and inform the user

Quick Check

Test your reconnection knowledge.

Recap

You built an auto-reconnecting client:

Hook the close event to schedule retries
Use exponential backoff with jitter
Reset attempts on open
Queue and flush messages around outages

Your client now survives flaky networks.

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

บทเรียน “การเชื่อมต่อใหม่อัตโนมัติบนไคลเอนต์” ฟรีหรือไม่

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

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

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

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน WebSockets & Realtime Systems Programming หรือไม่

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

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

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

ฉันเขียนและรันโค้ดในบทเรียน WebSockets & Realtime Systems Programming นี้ได้ไหม

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

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

← กลับไปที่ WebSockets & Realtime Systems Programming