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

Question

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

一个值为 100 和另外两个具有实际光值的相同消息（例如 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;
      }
    };

问题是我的进度条显示光的位置达到 100% 然后下降到它应该的值，我想避免有任何东西可以阻止消息或更新值仅针对收到的最后一条消息？

谢谢。

Answer 1

如果我们假设这是服务器端的错误或网络问题，您可以通过在采取任何操作之前添加 0.1 秒的等待时间来解决它。然后，如果三个消息同时到达，则只有第 3 个消息会触发任何 UI 更改。大致是这样（未经测试的代码，changeUI()中的this.light肯定需要整理一下）：

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

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

Receiving message multiple time for same event Server sent event

server-sent-events

typescript

openhab

eventsource

angular