ทำไมโดเนทหนึ่งครั้งจึงทำให้เกิดการแจ้งเตือนสองครั้งหลังอัปเดตแหล่งข้อมูลเบราว์เซอร์

ทำไมโดเนทหนึ่งครั้งจึงทำให้เกิดการแจ้งเตือนสองครั้ง

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

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

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

วิธีหาตำแหน่งที่เกิดการซ้ำ

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

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

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

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

การสมัครรับข้อมูลซ้ำหลังการเชื่อมต่อใหม่

สาเหตุที่พบบ่อยที่สุดคือตัวจัดการถูกเพิ่มทุกครั้งที่เชื่อมต่อ แต่ไม่ได้ถูกลบออกเมื่อตัดการเชื่อมต่อ แบบง่ายๆ ปัญหามีลักษณะดังนี้: ฟังก์ชันเรียก socket.on พร้อมตัวจัดการแสดงการแจ้งเตือน จากนั้นการเชื่อมต่อขาดหาย แอปพลิเคชันเชื่อมต่อใหม่และเรียก socket.on ซ้ำ หลังจากนั้นโดเนทที่เข้ามาหนึ่งรายการจะเรียกสองฟังก์ชัน ในการเชื่อมต่อใหม่ครั้งถัดไปอาจมีมากขึ้นอีก

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

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

รูปแบบขั้นต่ำสำหรับซ็อกเก็ตอาจมีลักษณะดังนี้: const onDonation = data => showAlert(data); socket.off('donation', onDonation); socket.on('donation', onDonation); function cleanup() { socket.off('donation', onDonation); window.removeEventListener('beforeunload', cleanup); socket.close(); } window.addEventListener('beforeunload', cleanup);

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

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

สิ่งที่ต้องตรวจสอบใน OBS และแหล่งข้อมูลเบราว์เซอร์

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

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

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

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

การป้องกันการส่งเหตุการณ์เดียวกันซ้ำ

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

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

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

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

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

ทำไมการล้างแคชจึงไม่ช่วยเสมอ

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

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

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

สิ่งที่ต้องตรวจสอบในโค้ดการแจ้งเตือน

ก่อนอื่นให้ค้นหาทุกตำแหน่งที่มีการเรียก socket.on, addEventListener, ฟังก์ชันการเชื่อมต่อ และการเริ่มคิว บางครั้งปัญหาไม่ได้อยู่ที่ตัวจัดการเดียว แต่อยู่ที่โมดูลสองโมดูลที่ฟังเหตุการณ์ donation อย่างอิสระและแต่ละตัวเริ่มการแสดงของตัวเอง

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

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

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

เช็กลิสต์การวินิจฉัย: สิ่งที่ต้องทำตามลำดับ

1. เปิด URL ของแหล่งข้อมูลเบราว์เซอร์ในแท็บแยกและส่งโดเนททดสอบหนึ่งรายการ บันทึกว่าการซ้ำปรากฏนอก OBS หรือไม่
2. เหลือแหล่งข้อมูลเพียงอินสแตนซ์เดียวในฉาก ตรวจสอบสำเนาฉาก ฉากซ้อน และเลเยอร์ที่อาจมีที่อยู่เดียวกัน
3. เพิ่มบันทึกพร้อมตัวระบุเหตุการณ์ในขั้นตอนการรับ การนำเข้าคิว และการแสดงผล วิธีนี้จะทำให้เห็นว่าจำนวนออบเจกต์เพิ่มขึ้นที่ใด
4. ค้นหาการเรียก socket.on และ addEventListener ทั้งหมด ตรวจสอบว่าตัวจัดการเก่าถูกลบผ่าน socket.off และ removeEventListener ด้วยการอ้างอิงฟังก์ชันเดียวกันหรือไม่
5. ตรวจสอบการเชื่อมต่อใหม่: ซ็อกเก็ตเก่าถูกปิดหรือไม่ ตัวจับเวลาเก่าถูกยกเลิกหรือไม่ และมีการสร้างการสมัครรับข้อมูลใหม่ทับตัวเดิมหรือไม่
6. เพิ่มการตรวจสอบตัวระบุเฉพาะของโดเนทก่อนเข้าคิว จากนั้นรีสตาร์ทแหล่งข้อมูลอย่างสมบูรณ์และทำการทดสอบซ้ำด้วยเหตุการณ์เดียว

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