รูปแบบการสำรวจแบบต่อเนื่องและตรรกะการเชื่อมต่อใหม่

การสำรวจแบบรอการตอบกลับนานทำงานเป็นวงจรดังนี้ ไคลเอนต์ส่งคำขอ HTTP เซิร์ฟเวอร์จะเปิดการเชื่อมต่อค้างไว้จนกว่าจะมีข้อมูลใหม่ (หรือหมดเวลา โดยทั่วไป 30–60 วินาที) จากนั้นเซิร์ฟเวอร์จะตอบกลับพร้อมข้อมูล และไคลเอนต์จะส่งคำขอถัดไปทันที วิธีนี้ทำให้เกิดการเชื่อมต่อที่เกือบต่อเนื่องและมีลักษณะคล้ายการส่งข้อมูลจากเซิร์ฟเวอร์

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

สร้าง AbortController ที่ด้านบนของ useEffect แล้วส่ง controller.signal ไปกับการเรียก fetch ทุกครั้ง ในฟังก์ชันล้างทรัพยากร ให้เรียก controller.abort() วิธีนี้จะยกเลิกคำขอที่กำลังดำเนินการอยู่เมื่อส่วนประกอบถูกถอดออก ป้องกันการอัปเดตสถานะของส่วนประกอบที่ถูกถอดออกแล้วและป้องกันทรัพยากรเครือข่ายรั่วไหล

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

เมื่อไคลเอนต์จำนวนมากสำรวจเซิร์ฟเวอร์เดียวกัน การถอยกลับแบบทวีคูณที่ไม่มีความแปรปรวนจะทำให้เกิดปัญหา “ฝูงชนถล่ม” กล่าวคือ ไคลเอนต์ทุกเครื่องจะรอเป็นเวลาเท่ากันและลองใหม่พร้อมกัน ทำให้เซิร์ฟเวอร์ทำงานหนักเกินไปอีกครั้ง ให้เพิ่มความแปรปรวนด้วยการสุ่มเวลารอ: delay + Math.random() * delay วิธีนี้จะกระจายการลองใหม่ออกไปในช่วงเวลาหนึ่งและลดการพุ่งสูงของภาระงานเซิร์ฟเวอร์

รักษาสถานะการเชื่อมต่อเพื่อสะท้อนวงจรชีวิตของการสำรวจ: isConnecting (กำลังเชื่อมต่อครั้งแรกหรือกำลังเชื่อมต่อใหม่หลังเกิดข้อผิดพลาด), isConnected (การสำรวจครั้งล่าสุดสำเร็จ), isError (ล้มเหลวต่อเนื่องจนลองใหม่ครบจำนวนสูงสุด) แสดงสถานะนี้ในส่วนติดต่อผู้ใช้ เพื่อให้ผู้ใช้เข้าใจความน่าเชื่อถือของข้อมูลแบบเรียลไทม์

ระหว่างช่วงเวลาถอยกลับก่อนการลองใหม่ครั้งถัดไป คุณสามารถแสดงการนับถอยหลัง เช่น “กำลังเชื่อมต่อใหม่ใน 8 วินาที...” พร้อมตัวบ่งชี้ความคืบหน้า คำนวณเวลาที่จะลองใหม่เมื่อเริ่มตัวจับเวลาการถอยกลับ และอัปเดตการแสดงผลทุกวินาที ความโปร่งใสนี้ช่วยให้ผู้ใช้มั่นใจว่าแอปกำลังพยายามกู้คืนการเชื่อมต่ออยู่

ใช้ setTimeout แบบเรียกซ้ำ (เรียกการสำรวจครั้งถัดไปภายในตัวจัดการการตอบกลับ) แทน setInterval สำหรับการสำรวจ setInterval จะทำงานตามช่วงเวลาคงที่โดยไม่สนใจว่าคำขอก่อนหน้าใช้เวลานานเท่าใด คำขอที่ทำงานนานอาจทำให้เกิดการสำรวจซ้อนกัน ส่วน setTimeout แบบเรียกซ้ำจะเริ่มการสำรวจครั้งถัดไปหลังจากครั้งก่อนหน้าเสร็จสิ้นเท่านั้น

เปิดให้กำหนดช่วงเวลาการสำรวจเป็นตัวเลือกการกำหนดค่าในฮุกของคุณ: useLongPoll({ url, interval: 5000 }) แหล่งข้อมูลแต่ละประเภทต้องการความใหม่ของข้อมูลต่างกัน ตัวบ่งชี้ “ใครกำลังออนไลน์” อาจสำรวจทุก 30 วินาที ขณะที่สถานะงานอาจสำรวจทุก 5 วินาที หลีกเลี่ยงการกำหนดช่วงเวลาไว้ตายตัวในโค้ดการทำงาน

เมื่อส่วนติดต่อโปรแกรมของคุณพัฒนาขึ้น คุณอาจเปลี่ยนจากการสำรวจเป็น SSE เพื่อประสิทธิภาพที่ดีขึ้น ส่วนประกอบ React ที่ใช้ฮุกการสำรวจควรแยกออกจากชั้นการส่งข้อมูล หากฮุกของคุณเปิดเผยส่วนติดต่อแบบเดียวกัน (onData, สถานะ, ข้อผิดพลาด) การเปลี่ยนกลไกเบื้องหลังจากการสำรวจเป็น EventSource จะไม่ต้องแก้ไขส่วนประกอบที่ใช้ฮุกนั้น

เมื่อเซิร์ฟเวอร์เปิดการเชื่อมต่อการสำรวจแบบรอการตอบกลับนานค้างไว้และไม่มีข้อมูลเข้ามา เซิร์ฟเวอร์ต้องตอบกลับเมื่อหมดเวลา (200 พร้อมเนื้อหาว่าง หรือ 204 ไม่มีเนื้อหา) เพื่อป้องกันไม่ให้การเชื่อมต่อค้างอย่างไม่มีกำหนด จากนั้นไคลเอนต์จะเริ่มการสำรวจอีกครั้งทันที การหมดเวลาฝั่งเซิร์ฟเวอร์นี้ (30–60 วินาที) แยกจากการหมดเวลาของคำขอเรียกข้อมูลฝั่งไคลเอนต์ (นานกว่า เช่น 90 วินาที)

เหตุใดการสำรวจแบบรอการตอบกลับนานจึงใช้การถอยกลับแบบทวีคูณเมื่อลองใหม่หลังเกิดข้อผิดพลาดของการเชื่อมต่อ

การสำรวจแบบรอการตอบกลับนาน: ไคลเอนต์ส่งคำขอ เซิร์ฟเวอร์รอจนกว่าจะมีข้อมูลหรือหมดเวลา แล้วไคลเอนต์จะส่งคำขอใหม่ทันทีหลังได้รับการตอบกลับ ใช้ fetch แบบอะซิงโครนัสที่เรียกซ้ำภายใน useEffect และใช้ AbortController เพื่อล้างทรัพยากร เมื่อเกิดข้อผิดพลาด ให้ใช้การถอยกลับแบบทวีคูณ (1 วินาที, 2 วินาที, 4 วินาที... จำกัดที่ 30 วินาที) ร่วมกับความแปรปรวนเพื่อป้องกันปัญหาฝูงชนถล่ม ใช้ setTimeout แบบเรียกซ้ำแทน setInterval เพื่อป้องกันการสำรวจซ้อนกัน ติดตามสถานะ isConnecting/isConnected/isError เพื่อแสดงผลในส่วนติดต่อผู้ใช้