Angular 多次接收同一事件服务器发送的事件的消息

我正在开发一个Web应用程序，使用openHab API和SSE控制一些灯光，但当灯光亮起时，我同时收到3条消息

值为100的一个 以及另外两条与灯光实际值相同的消息（ex 45） 该值对应于灯光亮度的百分比

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;
      }
    };

问题是，我的progressbar（显示灯光位置）显示为100%，然后下降到它应该达到的值，我想避免出现这种情况。是否有任何措施可以阻止该消息或仅为收到的最后一条消息更新该值

---

谢谢。

如果我们认为这是服务器端的错误或网络问题，您可以通过在采取任何操作之前添加0.1s等待来解决。然后，如果三条消息同时到达，则只有第三条消息会触发任何UI更改。大致如下（未测试的代码，以及

changeUI（）

中的

this.light

肯定需要整理）：

---

如果我们假设这是服务器端的错误或网络问题，您可以通过在采取任何操作之前添加0.1s等待来解决它。然后，如果三条消息同时到达，则只有第三条消息会触发任何UI更改。大致如下（未测试的代码，以及

changeUI（）

中的

this.light

肯定需要整理）：

---

这是一个可怕的想法，它不仅会跳过合法的消息，它还将允许更多的副本在100毫秒后通过-如果有更多的副本。我们试图在这里修补的行为似乎是一个合法的bug，在Chrome中，每次重新连接后，它都会以指数级的方式重复消息；因此，根据服务器关闭连接所需的时间，达到1mil副本只需几分钟时间。@你是说这是一个已知的Chrome错误？你能链接到错误报告吗？（我仍然怀疑，正如OP所描述的，这听起来更像是发送方的一个bug。）（顺便说一句，100ms只是一个例子：它只是第一条消息和第三条消息之间的差异——事实上，第三条消息只是第二条消息的重复，第一条消息（bug值）和第二条消息（正确值）之间的差异我还没有发现任何错误报告能够准确描述这一点；然而，正如前面提到的：“它似乎”确实是一个bug，因为我已经测试过它，并且可以确认发送重复消息的不是服务器。我已经将输出缓冲区转储到一个文本文件中，就像它发送到客户端一样，在文件中显示得非常完美。。是的，我在缓冲之前完全清理了输出缓冲区。您的想法似乎合乎逻辑，但是，最好将消息与消息时间戳（包括毫秒）一起散列，并在指定（短）时间段内，根据已接收的消息寄存器测试每个事件的消息。尽管这是一个相当恶劣的黑客行为；它可能比简单地跳过更“安全”，因为不同的浏览器处理API的方式不同。@您是否也在使用OpenHAB，并看到完全相同的行为？或者另一个SSE设置，在那里您可以看到重复的问题（在这种情况下，如何开始一个新问题）？OP问题的关键特征不是重复：它在发送正确的“45”值之前发送了一个虚假的“100”值。这是一个可怕的想法，它不仅会跳过合法消息，而且还会允许更多的重复在100毫秒后通过-如果有更多的重复。我们试图在这里修补的行为似乎是一个合法的bug，在Chrome中，每次重新连接后，它都会以指数级的方式重复消息；因此，根据服务器关闭连接所需的时间，达到1mil副本只需几分钟时间。@你是说这是一个已知的Chrome错误？你能链接到错误报告吗？（我仍然怀疑，正如OP所描述的，这听起来更像是发送方的一个bug。）（顺便说一句，100ms只是一个例子：它只是第一条消息和第三条消息之间的差异——事实上，第三条消息只是第二条消息的重复，第一条消息（bug值）和第二条消息（正确值）之间的差异我还没有发现任何错误报告能够准确描述这一点；然而，正如前面提到的：“它似乎”确实是一个bug，因为我已经测试过它，并且可以确认发送重复消息的不是服务器。我已经将输出缓冲区转储到一个文本文件中，就像它发送到客户端一样，在文件中显示得非常完美。。是的，我在缓冲之前完全清理了输出缓冲区。您的想法似乎合乎逻辑，但是，最好将消息与消息时间戳（包括毫秒）一起散列，并在指定（短）时间段内，根据已接收的消息寄存器测试每个事件的消息。尽管这是一个相当恶劣的黑客行为；它可能比简单地跳过更“安全”，因为不同的浏览器处理API的方式不同。@您是否也在使用OpenHAB，并看到完全相同的行为？或者另一个SSE设置，在那里您可以看到重复的问题（在这种情况下，如何开始一个新问题）？OP问题的关键特征不是重复：它在发送正确的“45”值之前发送了一个虚假的“100”值。

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;
      }
    }