Server Sent Event (SSE)

Hi there!

My application-in-progress in simple words is an industrial sensor monitor. Every time a new product is produced an operator pushes a button (ie, a post to losant) to increase a counter.
When operator starts working in a production order that counter needs to be reset to zero, then while producing it has to increase, and finally to stop at a given value (production order completed).
Example of indicator: 3/10 units produced. 30%

One option I thought of is to use Indicator block but I couldn’t find a way of setting custom starting moment on which Historical time starts to count. Also a downside of this option is that is slow due to dashboard refreshing rate (5 seconds at most, so the operator would perceive a delay when he/she pushes the button).

The other option I thought of is to use Losant API. My intention is that when device posts its state, losant updates counter in the cloud, and then notifies client of that update passing a JSON object. So communication would start from server to client. I dug through documentation and I found that I can attach to device state stream.
I tried the example with curl and had no problem,


but I’m having trouble to implement it on javascript (I’m a begginner with that language).
How can I subscribe to device state updates from client side? I tried using HTML5 EventSource with no luck.
Using a polyfill is a possible solution for Authorization Header support?

Any suggestions will be welcome,
Nahuel

@nahuel,

Before we start. Keep in mind, if you use this in client-side JS, you are exposing the token to access this device’s state stream.

So, the library I’ve used in the past is this:

Then, you can do something like this:

var myDevice = new EventSourcePolyfill('https://api.losant.com/applications/APP_ID/devices/DEVICE_ID/stateStream', {
  headers: {
    'Authorization': 'Bearer KEY'
  }
});

myDevice.addEventListener("open", listener);
myDevice.addEventListener("deviceState", deviceStateListener);
myDevice.addEventListener("error", listener);

I’m still unsure of why a real-time Indicator Block wouldn’t work to solve your problem. Could you elaborate on that?

Hi @anaptfox,

Okay, so it would be a security issue to expose the token. How do Indicator block works when set to Live Stream? I guess that I could use the API behind the block to get instant update as the block does.

Well I need that the device post get reflected “instantly” in the Indicator block. To do that I’d have to set it to Live Stream but then I couldn’t use any aggregation method and instead of displaying a counter I’d be a displaying true all the time. (Device attribute is a boolean that is true when a button is pushed).
Also, if I’d set it to Historical (forgetting for a moment about refreshing issue) then I’d need to set a custom moment (ie, a start time) from which boolean attribute is being aggregated because operator needs to see just the number of produced objects in his/her session not the entire history.

If you have any doubts, please let me know and I’ll try to clarify. :slight_smile:

So, @nahuel,

I would make count / totalCount number attributes on that device. You can still have the boolean attribute, but when that state triggers a workflow, you can calculate the count/totalCount in real time and report it as state for that device. Then, in the Indicator Block, you can simply display those values, and when you update them in the workflow, they will reflect on the Dashboard.

Does that makes sense? I can answer any follow up questions or explain more if needed.

1 Like

Thanks Taron! I wasn’t seeing all losant possibilities.

1 Like

My pleasure :slight_smile: