Γιατί μία δωρεά προκαλεί δύο alerts μετά την ενημέρωση της πηγής browser

Γιατί μία δωρεά προκαλεί δύο alerts

Μετά την ενημέρωση της πηγής browser, η σελίδα ξεκινά από την αρχή. Το script συνδέεται ξανά στον server, εγγράφεται σε events και δημιουργεί handlers για την εμφάνιση ειδοποιήσεων. Αν ο παλιός handler δεν έχει αφαιρεθεί ή αν λειτουργούν ταυτόχρονα δύο συνδέσεις, ένα event δωρεάς επεξεργάζεται πολλές φορές.

Η ίδια η ενημέρωση δεν είναι απαραίτητα η αιτία της βλάβης. Συχνά απλώς αποκαλύπτει ένα σφάλμα στη λογική της σύνδεσης. Για παράδειγμα, η συνάρτηση αρχικοποίησης μπορεί να εκτελείται κατά τη φόρτωση της σελίδας, μετά κατά την επανασύνδεση και άλλη μία φορά μετά τη λήψη ενός μηνύματος υπηρεσίας. Κάθε εκτέλεση προσθέτει μια νέα συνδρομή στο event donation.

Ως αποτέλεσμα, ο server στέλνει ένα αντικείμενο δωρεάς, αλλά ο browser καλεί την ίδια συνάρτηση δύο φορές. Μερικές φορές ο διπλασιασμός συμβαίνει στην πλευρά του server: η εφαρμογή θεωρεί τη νέα σύνδεση ξεχωριστό παραλήπτη και στέλνει το event και στην παλιά και στη νέα συνεδρία. Γι' αυτό πρώτα πρέπει να προσδιοριστεί πού εμφανίζεται η επανάληψη: στην πηγή, στον handler ή στο στάδιο της εμφάνισης.

Πώς να εντοπίσετε το σημείο όπου δημιουργείται το διπλό

Ξεκινήστε με ένα απλό τεστ. Ανοίξτε τον σύνδεσμο της πηγής browser σε ξεχωριστό παράθυρο ή καρτέλα, αφήστε μόνο ένα στιγμιότυπο της σελίδας και στείλτε ένα δοκιμαστικό event. Αν το alert εμφανίζεται μία φορά, η αιτία πιθανότατα σχετίζεται με τις ρυθμίσεις της σκηνής ή με πολλαπλά στιγμιότυπα της πηγής. Αν διπλασιάζεται ήδη σε ξεχωριστή καρτέλα, ελέγξτε τον κώδικα της σελίδας και τον μηχανισμό συνδρομής.

Είναι χρήσιμο να χωρίσετε την επεξεργασία της δωρεάς σε several στάδια: λήψη event, έλεγχος event, τοποθέτηση του alert σε ουρά και απόδοση. Στο log ή στην κονσόλα εμφανίστε προσωρινά μια ένδειξη σε κάθε στάδιο. Αν η εγγραφή για τη λήψη εμφανίζεται δύο φορές, το πρόβλημα βρίσκεται πριν από το οπτικό επίπεδο. Αν το event λήφθηκε μία φορά, αλλά στην ουρά υπάρχουν δύο στοιχεία, το σφάλμα είναι στον handler. Αν η ουρά περιέχει ένα στοιχείο, αλλά στην οθόνη εμφανίζονται δύο alerts, ελέγξτε τη συνάρτηση εμφάνισης και το HTML container.

Για διάγνωση, προσθέστε σε κάθε event το αναγνωριστικό του, αν αυτό μεταδίδεται στα δεδομένα της δωρεάς. Καταγράψτε αυτό το αναγνωριστικό κατά τη λήψη και πριν από την εμφάνιση. Το ίδιο αναγνωριστικό σε δύο κλήσεις δείχνει ότι ένα event έχει υποστεί επεξεργασία ξανά. Δύο διαφορετικά αναγνωριστικά υποδεικνύουν δύο παραδόσεις, που πρέπει να εξεταστούν χωριστά.

Ελέγξτε όχι μόνο τον αριθμό των καρτελών. Στο OBS δύο στιγμιότυπα μπορεί να εμφανιστούν μετά την αντιγραφή σκηνής, την προσθήκη ένθετης σκηνής ή την εκ νέου προσθήκη πηγής browser με την ίδια διεύθυνση. Μερικές φορές μία πηγή παραμένει σε ξεχωριστό layer και η δεύτερη προστίθεται πάνω της. Οπτικά αυτό φαίνεται ως διπλό alert, αν και το event ήρθε μία φορά.

Επανασυνδρομή μετά την επανασύνδεση

Η πιο συχνή αιτία είναι ότι ο handler προστίθεται σε κάθε σύνδεση, αλλά δεν αφαιρείται κατά την αποσύνδεση. Απλοποιημένα, το πρόβλημα μοιάζει έτσι: η συνάρτηση εκτελεί socket.on με handler εμφάνισης alert, μετά η σύνδεση διακόπτεται, η εφαρμογή συνδέεται ξανά και επαναλαμβάνει το socket.on. Μετά από αυτό, μία εισερχόμενη δωρεά καλεί δύο συναρτήσεις. Στην επόμενη επανασύνδεση μπορεί να γίνουν ακόμη περισσότερες.

Το ίδιο σφάλμα συναντάται και με το συνηθισμένο addEventListener. Αν η συνάρτηση αρχικοποίησης καλείται πολλές φορές, ο browser προσθέτει πολλούς listeners για το ίδιο event. Ο έλεγχος με flag «η αρχικοποίηση έχει ήδη εκτελεστεί» δεν βοηθά πάντα: σε πλήρη ενημέρωση της σελίδας οι μεταβλητές επαναφέρονται, ενώ κατά την επανασύνδεση μέσα στην ίδια σελίδα το πρόβλημα παραμένει.

Η συνδρομή πρέπει να δημιουργείται μία φορά για τον κύκλο ζωής της σύνδεσης, και η παλιά συνδρομή πρέπει να αφαιρείται ρητά πριν από τη νέα. Για τους handlers events χρησιμοποιείται το removeEventListener και η ίδια αναφορά στη συνάρτηση που είχε μεταδοθεί κατά τη σύνδεση. Για βιβλιοθήκες με sockets συνήθως χρειάζεται η μέθοδος off, unsubscribe ή αντίστοιχος τρόπος αποσύνδεσης.

Ένα ελάχιστο σχήμα για το socket μπορεί να μοιάζει έτσι: 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);

Εδώ δεν έχει σημασία η συγκεκριμένη βιβλιοθήκη, αλλά η σειρά των ενεργειών. Ο handler αποθηκεύεται σε μεταβλητή, ώστε να μπορεί να αφαιρεθεί με την ίδια αναφορά. Πριν από τη νέα συνδρομή αφαιρείται η παλιά, και κατά το κλείσιμο της σελίδας ή τη διακοπή της πηγής εκτελείται το cleanup. Αν σε κάθε εκτέλεση δημιουργείται νέο socket, πρώτα πρέπει να κλείσει το παλιό και μόνο μετά να δημιουργηθεί το νέο. Διαφορετικά, και οι δύο συνδέσεις μπορεί να συνεχίσουν να λαμβάνουν τα ίδια δεδομένα.

Κατά την επανασύνδεση κλείνετε επίσης την παλιά σύνδεση και καθαρίζετε τα σχετικά timers. Διαφορετικά, το παλιό socket μπορεί να συνεχίσει να λαμβάνει δεδομένα ενώ το νέο λειτουργεί ήδη. Αυτό συμβαίνει ιδιαίτερα συχνά αν ο κώδικας ξεκινά νέο timer επανασύνδεσης χωρίς να ακυρώνει τον προηγούμενο.

Τι να ελέγξετε στο OBS και στην πηγή browser

Αν το ξεχωριστό παράθυρο εμφανίζει το alert μία φορά, προχωρήστε στη σκηνή. Σταματήστε την προεπισκόπηση, αφαιρέστε προσωρινά τα περιττά layers και αφήστε μία πηγή browser. Στη συνέχεια ελέγξτε τη συμπεριφορά στη σκηνή που χρειάζεστε. Αυτό το τεστ είναι ταχύτερο από τον ταυτόχρονο έλεγχο όλων των σκηνών και φίλτρων.

• Αναζητήστε δύο πηγές με την ίδια διεύθυνση σελίδας.
• Ελέγξτε αντίγραφα σκηνών και ένθετες σκηνές, όπου μπορεί να βρίσκεται το ίδιο overlay.
• Βεβαιωθείτε ότι το alert δεν εμφανίζεται ταυτόχρονα από πηγή browser και από άλλο layer με την ίδια σελίδα.
• Μετά την αλλαγή ρυθμίσεων επανεκκινήστε πλήρως την πηγή, όχι μόνο αλλάξτε σκηνή.

Μερικές φορές στο OBS παραμένει παλιά καρτέλα της πηγής browser μετά την ενημέρωση URL ή παραμέτρων. Το κλείσιμο και η εκ νέου προσθήκη της πηγής βοηθά να ελεγχθεί η υπόθεση, αλλά δεν αντικαθιστά τη διόρθωση του κώδικα. Αν μετά από κάθε ενημέρωση το πρόβλημα επανέρχεται, αναζητήστε εκ νέου εγγραφή του handler ή διπλή σύνδεση.

Λάβετε επίσης υπόψη την καθυστέρηση αποσύνδεσης. Κατά την ενημέρωση, η παλιά συνεδρία μπορεί να μην κλείσει αμέσως. Αν ο server τη θεωρεί ενεργή για μερικά δευτερόλεπτα, ένα event που έρχεται σε αυτό το διάστημα μπορεί να φτάσει σε δύο συνεδρίες. Η σωστή λογική του server πρέπει να αφαιρεί τις ανενεργές συνδέσεις και να μην αφήνει συνδρομή μετά το κλείσιμο της σελίδας.

Προστασία από επανάληψη παράδοσης του ίδιου event

Ακόμη και με σωστή λειτουργία της πηγής browser, ένα event μπορεί περιστασιακά να παραδοθεί ξανά. Αυτό είναι δυνατό κατά την επανασύνδεση, την εκ νέου αποστολή μηνύματος ή ένα σφάλμα μεταξύ λήψης του event και επιβεβαίωσης της επεξεργασίας του. Γι' αυτό ο handler του alert πρέπει να είναι ανθεκτικός στις επαναλήψεις.

Ο καλύτερος τρόπος είναι ο έλεγχος του μοναδικού αναγνωριστικού της δωρεάς. Πριν από την τοποθέτηση του event στην ουρά, αποθηκεύστε το αναγνωριστικό του σε ένα σύνολο ήδη επεξεργασμένων events. Αν το ίδιο αναγνωριστικό έχει εμφανιστεί ξανά, η επανάληψη πρέπει να παραλείπεται. Η λίστα πρέπει να διατηρείται για περιορισμένο χρόνο, ώστε να μην αυξάνεται απεριόριστα.

Μη χρησιμοποιείτε γι' αυτό μόνο το ποσό, το όνομα του αποστολέα ή το κείμενο του μηνύματος. Δύο διαφορετικές δωρεές μπορεί να έχουν ίδια δεδομένα. Ο έλεγχος με βάση τον χρόνο επίσης δεν είναι αξιόπιστος: πολλές διαφορετικές δωρεές μπορεί να φτάσουν σχεδόν ταυτόχρονα. Αν δεν υπάρχει αναγνωριστικό, μπορείτε προσωρινά να συγκρίνετε συνδυασμό πεδίων και χρόνου, αλλά αυτή είναι εφεδρική λύση με κίνδυνο να ενωθούν λανθασμένα δύο events.

Η προστασία από διπλά πρέπει να βρίσκεται πριν από την εμφάνιση του alert, όχι μέσα στην animation. Διαφορετικά, η δεύτερη κλήση θα προσθέσει ούτως ή άλλως στοιχείο στη σελίδα, θα αναπαραγάγει ήχο ή θα βάλει άλλη μία εγγραφή στην ουρά. Ελέγχετε ξεχωριστά την ουρά: ένα event πρέπει να προστίθεται σε αυτή μία φορά και η επαναλαμβανόμενη κλήση δεν πρέπει να ξεκινά δεύτερη ανεξάρτητη ουρά.

Αν το event μεταδίδεται μεταξύ πολλών καρτελών ή components, ελέγξτε αν το επεξεργάζονται ταυτόχρονα πολλοί παραλήπτες. Ένα κοινό κανάλι μηνυμάτων μπορεί να είναι συνδεδεμένο με πολλούς handlers. Σε αυτή την περίπτωση, είτε αφήστε έναν μόνο καταναλωτή είτε ορίστε ρητά ποιο component είναι υπεύθυνο για την εμφάνιση του alert.

Γιατί ο καθαρισμός της cache δεν βοηθά πάντα

Μετά την ενημέρωση της πηγής browser συχνά συνιστάται καθαρισμός της cache. Αυτό μπορεί να διορθώσει την κατάσταση αν φορτώθηκε παλιά έκδοση του script, αλλά η cache δεν αφαιρεί περιττούς handlers σε μια σελίδα που λειτουργεί ήδη ούτε κλείνει το δεύτερο αντίγραφο της πηγής. Αν το διπλό επαναλαμβάνεται σταθερά μετά από κάθε επανασύνδεση, η αιτία βρίσκεται σχεδόν σίγουρα στη λογική της σύνδεσης ή στη δομή της σκηνής.

Ελέγξτε αν πράγματι φορτώνεται η νέα έκδοση των αρχείων. Αλλάξτε προσωρινά τη διεύθυνση του πόρου ή χρησιμοποιήστε τον προβλεπόμενο μηχανισμό ενημέρωσης και μετά επανεκκινήστε την πηγή browser. Στη συνέχεια εκτελέστε ξανά το τεστ με ένα παράθυρο και ένα στιγμιότυπο της πηγής. Μην προσθέτετε τυχαίες παραμέτρους στον σύνδεσμο μόνιμα: αυτό μπορεί να δημιουργήσει πολλές παραλλαγές cache και να δυσκολέψει τη διάγνωση.

Αν χρησιμοποιείται ενδιάμεση cache ή service worker, μπορεί επίσης να επιστρέφει παλιό script. Σε αυτή την περίπτωση συγκρίνετε την έκδοση του φορτωμένου αρχείου με την έκδοση που περιμένετε να δείτε. Αλλά ακόμη και με παλιό αρχείο πρέπει να εξαλειφθεί η αιτία της επανασυνδρομής, διαφορετικά το πρόβλημα θα εμφανιστεί ξανά μετά την επόμενη ενημέρωση.

Τι να ελέγξετε στον κώδικα του alert

Πρώτα βρείτε όλα τα σημεία όπου καλούνται socket.on, addEventListener, συναρτήσεις σύνδεσης και εκκίνηση της ουράς. Μερικές φορές το πρόβλημα δεν είναι σε έναν handler, αλλά στο ότι δύο διαφορετικά modules ακούν ανεξάρτητα το event donation και το καθένα ξεκινά τη δική του εμφάνιση.

Στη συνέχεια ελέγξτε τον κύκλο ζωής του component, αν το alert εμφανίζεται μέσω framework. Η συνδρομή τοποθετείται σε effect ή αντίστοιχο block και επιστρέφεται συνάρτηση καθαρισμού. Δεν πρέπει να δημιουργείται νέος handler σε κάθε ενημέρωση κατάστασης χωρίς αφαίρεση του προηγούμενου. Σε απλό JavaScript είναι σημαντικό να διατηρείτε αναφορά στο ενεργό socket και στον τρέχοντα handler, ώστε κατά τη διακοπή της σελίδας να μπορούν να κλείσουν σωστά.

Ελέγξτε τα timers επανασύνδεσης. Ένα νέο timer δεν πρέπει να ξεκινά πάνω από το παλιό. Διαφορετικά, μετά από αρκετές διακοπές δημιουργούνται παράλληλες προσπάθειες σύνδεσης και μαζί τους πρόσθετες συνδρομές. Για κάθε timer χρειάζεται καθαρισμός μέσω clearTimeout ή clearInterval, αν δεν είναι πλέον απαραίτητος.

Εξετάστε ξεχωριστά τον κώδικα που εμφανίζει το alert. Δεν πρέπει ταυτόχρονα να προσθέτει στοιχείο στην ουρά και να καλεί αμέσως τη συνάρτηση εμφάνισης για το ίδιο αντικείμενο. Ελέγξτε επίσης αν η animation ξεκινά ξανά όταν αλλάζει η κατάσταση του στοιχείου. Αν στο log υπάρχει μία λήψη και μία εγγραφή στην ουρά, αλλά στην οθόνη δύο ειδοποιήσεις, εκεί ακριβώς πρέπει να αναζητήσετε.

Checklist διάγνωσης: τι να κάνετε με τη σειρά

1. Ανοίξτε το URL της πηγής browser σε ξεχωριστή καρτέλα και στείλτε μία δοκιμαστική δωρεά. Καταγράψτε αν το διπλό εμφανίζεται έξω από το OBS.
2. Αφήστε στη σκηνή μόνο ένα στιγμιότυπο της πηγής. Ελέγξτε αντίγραφα σκηνών, ένθετες σκηνές και layers όπου μπορεί να βρίσκεται η ίδια διεύθυνση.
3. Προσθέστε log με το αναγνωριστικό του event στα στάδια λήψης, τοποθέτησης στην ουρά και εμφάνισης. Έτσι θα φαίνεται πού αυξάνεται ο αριθμός των αντικειμένων.
4. Βρείτε όλες τις κλήσεις socket.on και addEventListener. Ελέγξτε αν οι παλιοί handlers αφαιρούνται μέσω socket.off και removeEventListener με την ίδια αναφορά στη συνάρτηση.
5. Ελέγξτε την επανασύνδεση: κλείνει το παλιό socket, ακυρώνεται το παλιό timer και δεν δημιουργείται νέα συνδρομή πάνω από την προηγούμενη.
6. Προσθέστε έλεγχο του μοναδικού αναγνωριστικού της δωρεάς πριν από την ουρά, στη συνέχεια επανεκκινήστε πλήρως την πηγή και επαναλάβετε το τεστ με ένα event.

Αν η ξεχωριστή καρτέλα λαμβάνει το event μία φορά, αλλά το OBS εμφανίζει δύο alerts, αναζητήστε το δεύτερο στιγμιότυπο της πηγής ή διπλασιασμό στις σκηνές. Αν το event έρχεται δύο φορές ήδη σε ξεχωριστή καρτέλα, ελέγξτε συνδρομές, συνδέσεις και παράδοση από τον server. Αν η λήψη και η ουρά καταγράφονται μία φορά, αλλά στην οθόνη εμφανίζονται δύο ειδοποιήσεις, το πρόβλημα βρίσκεται στο οπτικό επίπεδο.