Repeatedly receiving messages for a single event: Server-sent event

Currently, I am developing a Web app to manage light control through the openHab API and utilizing SSE. However, an issue arises when the light is turned on as I receive three messages simultaneously.

One message contains the value 100, while the other two messages contain the current brightness level of the light (e.g., 45). This value corresponds to the percentage of brightness for the light.

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

The issue lies in my progress bar displaying the light's position reaching 100% before adjusting to the actual value. Is there a way to prevent or update the value only for the most recent message received?

Thank you.

Answer №1

In the case that we suspect a server-side bug or network issue, a potential workaround could be to introduce a 0.1-second delay before executing any actions. By doing this, if three messages are received simultaneously, only the third message will initiate any user interface modifications. The code snippet below provides an example of how this could be implemented (please note that it is untested and adjustments may be needed for the this.light reference within the changeUI() function):

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for building an effective delete function in Angular for eliminating a single record from a table

I've been working on creating a method to delete an employee by their ID, and I've tried various approaches in my VS Code. Unfortunately, all of them have resulted in errors except for this specific method. Whenever I click on the delete button, ...

Analyzing elements within an array using Angular 4

I have an array filled with various Objects such as: [ {"id":1,"host":"localhost","filesize":73,"fileage":"2018-01-26 09:26:40"}, {"id":2,"host":"localhost","filesize":21,"fileage":"2018-01-26 09:26:32"}, {...} ] These objects are displayed in the fol ...

The Formly form is experiencing a glitch where it does not reflect the updated default value of

My goal is to dynamically update the Formly form rendering based on changes made in the form scheme (which consists of an array of FormlyFormConfig objects). I have noticed that the updating works when adding a new object or modifying a field label, but it ...

What is the best way to approach writing a shared value that is utilized across multiple files in Angular?

I am currently implementing Angular for the front end of my project. One challenge I'm facing is managing a single value, such as a 'role id', that needs to be used in multiple .ts files within Angular. Can anyone suggest an efficient way ...

Dynamic addition of a Javascript script to a component leads to malfunctioning

I am facing an issue with a dynamically created component where I added the script tag, but unfortunately, the code inside is not functioning properly. Despite trying multiple solutions, none seem to work for me. Could you please review the code? https:// ...

Tips for formatting dates in Angular 6

I am currently working on a function that displays real-time dates based on user input. Currently, when the user enters the input, it is displayed in the front end as follows: 28.10.2018 10:09 However, I would like the date to change dynamically based on ...

The art of connecting models in Angular 2

Hey there! I've got a setup that seems to be giving me some unexpected results. Whenever I make changes to either the Kelvin or Celsius field, I end up with strange outputs like multiplying by 1000 or other inexplicable numbers. I'm new to Angula ...

Transform HTML elements within an *ngFor iteration based on a specific variable in Angular 4

In my current project using Angular 4, I am faced with the task of dynamically modifying HTML tags within an *ngFor loop based on a variable. Here is the code snippet that represents my approach: <mat-card-content *ngFor="let question of questionGrou ...

"Storing a collection of PDF files in an array in TypeScript Angular - A step-by-step

Here we have an HTML code snippet that includes an input file element with Angular: <input type="file" class="btn btn-info" id="archivoPDF" #PDFfile value="Seleccionar PDF(s)" accept="application/pdf" multiple /> And this is the TypeScript code sni ...

The error message "Uncaught ReferenceError: exports is not defined and require" indicates that

I am currently developing an app using angularjs and typescript, but I've encountered a persistent error that has me stumped. Below is the snippet of my code: export var NgApp = new application.Startup(); ///<reference path="../../../../../typin ...

The ActivatedRoute.routeConfig object appears to be empty in an Angular 2 project built with Angular-cli

Two projects I've created using angular-cli are working perfectly fine. However, in one of them, the routeConfig is showing as null and I can't figure out what's causing this issue. Both projects have identical package.json files, so there ...

Is it necessary to unsubscribe from an Angular HTTP-Request when using switchMap?

I have a question about managing subscriptions in my Angular application. I'm currently using the combineLatest operator to create an observable from two Angular observables, route.params and route.queryParams. This combined observable is then used as ...

Use leaflet.js in next js to conceal the remainder of the map surrounding the country

I'm currently facing an issue and would appreciate some assistance. My objective is to display only the map of Cameroon while hiding the other maps. I am utilizing Leaflet in conjunction with Next.js to showcase the map. I came across a helpful page R ...

How To Retrieve the Index of a Specific Row and Column in AgGrid (Angular)

Right now, I can retrieve the row data using the gridApi but I am struggling to determine the column index of the selected row. The method this.gridApi.getSelectedRows() does not provide any information about the column index. I would greatly appreciate ...

Enhance user experience by implementing accessibility features in Angular 5 using

Our team is currently working on an Angular 6 application and we need to make it more accessible. I have tried adding aria-live="polite" to our angular-components, but we are experiencing issues with the Chromevox reader interrupting itself during data l ...

What is the process for incorporating personalized variables into the Material Ui Theme?

In the process of developing a react app with TypeScript and Material UI, I encountered an issue while attempting to define custom types for my themes. The error message I received is as follows: TS2322: Type '{ mode: "dark"; background: { default: s ...

Replacing child routes with an Angular wildcard route

I'm facing an issue with integrating a module named "host" into the app-routing.module. The problem I encountered is that the wildcard route takes precedence over loading the Host component, leading to the display of the PageNotFoundComponent instead. ...

Discover the outcome of clicking on an object (mock tests)

I am just starting out with React and I'm unsure about when to use mocking. For instance, within the 'ListItem' component, there is a 'click me' button that reveals a dropdown for 'cameras'. Should I focus on testing what ...

Encountering the error message "Unable to connect to this site" while attempting to run Angular 8 using Docker Compose

After successfully running npm start for my angular UI application, I encountered an issue when moving API and UI into docker. Every time I tried to access the site, it displayed "This site can’t be reached". Can someone please assist me in identifying w ...

What could be causing this error in a new Next.js application?

After multiple attempts, my frustration and disappointment in myself are causing a headache. Can someone please assist me? I am trying to create an app using the following command: npx create-next-app@latest --ts Immediately after running next dev, I enco ...