Partage
  • Partager sur Facebook
  • Partager sur Twitter

EventSource bloque les nouvelles requetés

Sujet résolu
    20 décembre 2024 à 11:01:24

    Bonjour,

    J'utilise les EventSource sur la page de chat de mon site pour charger continuellement les nouveaux messages et mettre à jour l'UI mais j'ai un souci. Lorsque je réactualise la page ou que je change tout juste de page(clic sur un lien) ça ne se charge jamais. Ca tourne indéfiniment(l'icone de chargement du navigateur) et donc je ne peux rien faire d'autres. Je suis contraint de fermer l'onglet, ouvrir un nouveau et faire ce que je voulais. C'est assez embêtant et je ne connais pas la cause.

    var event_source, interval;
    function initEventSource() {
      event_source = new EventSource(`${host}/charger-messages`)
      event_source.addEventListener('updated', (event) => {
        /** @type [[]] */
        let all_messages = JSON.parse(event.data).messages_pack
        let user_id = JSON.parse(event.data).user_id
    
        if (all_messages.length > 0) {
          all_messages.forEach(function (messages) {
            updateDiscussion(messages, user_id, messages[0].discussion)
          })
        }
      })
      event_source.onopen = function () {
        clearInterval(interval)
      }
      event_source.onerror = function () {
        event_source.close()
        interval = setInterval(initEventSource, 10000)
      }
    }
    initEventSource()

    Je viens de rajouter ceci:

    window.addEventListener('beforeunload', cleanup);
    
    cleanup(){
          event_source.close();
          event_source = null;
    }

    Mais rien. Vos avis s'il vous plait ? 

    En plus, quand je fais une action le serveur affiche bien, mais aucun résultat. Lle probleme est en php(serveur) ou js d'après vous ?

    [Fri Dec 20 10:54:29 2024] 192.168.1.121:59860 Closing
    [Fri Dec 20 10:54:29 2024] 192.168.1.121:59863 Accepted
    [Fri Dec 20 10:56:25 2024] 192.168.1.121:59862 [200]: GET /charger-messages
    [Fri Dec 20 10:56:25 2024] 192.168.1.121:59862 Closing
    [Fri Dec 20 10:56:25 2024] 192.168.1.121:59864 Accepted
    [Fri Dec 20 10:58:20 2024] 192.168.1.121:59863 [200]: GET /charger-messages
    [Fri Dec 20 10:58:20 2024] 192.168.1.121:59863 Closing
    [Fri Dec 20 10:58:20 2024] 192.168.1.121:59865 Accepted # Quand je recharge la page ou une autre action, mais plus rien apres. 
    # Et dans le navigateur rien aussi
    • Partager sur Facebook
    • Partager sur Twitter
      22 décembre 2024 à 7:48:00

      J'ai une version plus propre, mais aucun changement évidemment
      const SSE_CONFIG = {
        RETRY_INTERVAL: 10000,
        ENDPOINT: `${host}/charger-messages`,
        EVENT_NAME: 'updated'
      };
      
      class MessageEventHandler {
        constructor() {
          this.eventSource = null;
          this.retryInterval = null;
          this.isConnected = false;
        }
      
        /**
         * Initialisation la connexion EventSource
         * @returns {void}
         */
        init() {
          this.cleanup();
      
          try {
            this.eventSource = new EventSource(SSE_CONFIG.ENDPOINT);
            this.setupEventListeners();
          } catch (error) {
            console.error('Initialisation echouée:', error);
            this.scheduleReconnect();
          }
        }
      
        /**
         * Configurer des écouteurs d'événements pour EventSource
         * @private
         */
        setupEventListeners() {
          this.eventSource.addEventListener(SSE_CONFIG.EVENT_NAME, this.handleMessage.bind(this));
      
          this.eventSource.onopen = this.handleOpen.bind(this);
      
          this.eventSource.onerror = this.handleError.bind(this);
      
          window.addEventListener('beforeunload', this.cleanup.bind(this));
        }
      
        /**
         * Gérer les messages entrants
         * @param {MessageEvent} event 
         */
        handleMessage(event) {
          try {
            const { messages_pack, user_id } = JSON.parse(event.data);
      
            if (Array.isArray(messages_pack) && messages_pack.length > 0) {
              messages_pack.forEach(messages => {
                if (messages?.[0]?.discussion) {
                  updateDiscussion(messages, user_id, messages[0].discussion);
                }
              });
            }
          } catch (error) {
            console.error('Une erreur est survenue:', error);
          }
        }
      
        /**
         * Gérer une connexion réussie
         */
        handleOpen() {
          this.isConnected = true;
          this.clearRetryInterval();
          console.log('SSE connexion reussie');
        }
      
        /**
         * Gérer une connexion échouée
         * @param {Event} error 
         */
        handleError(error) {
          console.error('SSE connection error:', error);
          this.isConnected = false;
          this.cleanup();
          this.scheduleReconnect();
        }
      
        /**
         * Planifier une tentative de reconnexion
         */
        scheduleReconnect() {
          if (!this.retryInterval) {
            this.retryInterval = setInterval(() => {
              if (!this.isConnected) {
                this.init();
              }
            }, SSE_CONFIG.RETRY_INTERVAL);
          }
        }
      
        clearRetryInterval() {
          if (this.retryInterval) {
            clearInterval(this.retryInterval);
            this.retryInterval = null;
          }
        }
      
        cleanup() {
          if (this.eventSource) {
            this.eventSource.close();
            this.eventSource = null;
          }
          this.isConnected = false;
        }
      }
      
      const messageHandler = new MessageEventHandler();
      messageHandler.init();

      .
      • Partager sur Facebook
      • Partager sur Twitter
        23 décembre 2024 à 8:58:56

        Resolu: https://openclassrooms.com/forum/sujet/sse-vs-long-polling-9872e#message-95215373
        • Partager sur Facebook
        • Partager sur Twitter

        EventSource bloque les nouvelles requetés

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown