un message de réception de temps multiples pour un même événement événement envoyé Serveur

Question

Je travaille sur une application Web pour contrôler la lumière en utilisant l'API openHab et en utilisant SSE, mais lorsque la lumière passe j'ai reçu 3 message en même temps

un avec la valeur 100 et les deux autres même message avec la valeur réelle de la lumière (ex 45) la valeur correspond au% de la luminosité de la lumière

eventSource.onmessage = (event: any) => { 
     this.val = JSON.parse(JSON.parse(event.data).payload).value; 
     console.log("new val " + this.val); 
     slid.value = this.val; 
     if(this.val >= 1){ 
     this.light = true; 
     button.checked= true; 
     } 
     else{ 
     this.light = false; 
     button.checked = false; 
     } 
    }; 

le problème avec cela est que mon progressbar que montrer où la lumière va à 100% puis descendre à la valeur qu'elle devrait et je voudrais pour éviter cela est-il quelque chose pour empêcher le message ou pour mettre à jour la valeur seulement pour le dernier message reçu?

merci.

Answer 1

Si nous supposons qu'il s'agit d'un bogue côté serveur ou d'un problème de réseau, vous pouvez contourner ce problème en ajoutant une attente de 0,1 s avant d'effectuer une action. Ensuite, si trois messages arrivent en même temps, seul le troisième déclenchera toute modification de l'interface utilisateur. À peu près comme ceci (code non testé, et le this.light en changeUI() sera certainement besoin tri):

var timer = null; 

eventSource.onmessage = (event: any) => { 
     this.val = JSON.parse(JSON.parse(event.data).payload).value; 
     console.log("new val " + this.val); 
     if(timer)clearTimeout(timer); 
     timer = setTimeout(changeUI, 100, this.val); 
     }; 

function changeUI(val){ 
    if(timer){clearTimeout(timer);timer=null;} //Redundant but harmless 
    slid.value = val; 
    if(val >= 1){ 
     this.light = true; 
     button.checked= true; 
     } 
    else{ 
     this.light = false; 
     button.checked = false; 
     } 
    }