# Server Sent Event (SSE)

**URL:** <https://forums.losant.com/t/server-sent-event-sse/1869>\
**Category:** Help\
**Tags:** experience\
**Created:** [June 11, 2019, 12:07am UTC](https://forums.losant.com/t/server-sent-event-sse/1869 "2019-06-11T00:07:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![nahuel](https://avatars.discourse-cdn.com/v4/letter/n/8dc957/32.png) [@nahuel](https://forums.losant.com/u/nahuel)\
**Post date:** [June 11, 2019, 12:07am UTC](https://forums.losant.com/t/server-sent-event-sse/1869/1 "2019-06-11T00:07:47Z")

</div>

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](https://docs.losant.com/rest-api/device/#state-stream).  
I tried the example with curl and had no problem,

 ![imagen](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/e/e9dbc3013fac443f9f98b5b6a6d67e8562f68f6d.png)  
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](https://stackoverflow.com/a/32440307) is a possible solution for Authorization Header support?

Any suggestions will be welcome,  
Nahuel

---

<div class="post-metadata">

**Author:** ![anaptfox](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/anaptfox/32/873_2.png) [@anaptfox](https://forums.losant.com/u/anaptfox)\
**Post date:** [June 11, 2019, 3:23pm UTC](https://forums.losant.com/t/server-sent-event-sse/1869/2 "2019-06-11T15:23:43Z")

</div>

@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:

> **[Yaffle/EventSource](https://github.com/Yaffle/EventSource/)**
>
> a polyfill for http://www.w3.org/TR/eventsource/. Contribute to Yaffle/EventSource development by creating an account on GitHub.

Then, you can do something like this:

```auto
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?

---

<div class="post-metadata">

**Author:** ![nahuel](https://avatars.discourse-cdn.com/v4/letter/n/8dc957/32.png) [@nahuel](https://forums.losant.com/u/nahuel)\
**Post date:** [June 11, 2019, 4:55pm UTC](https://forums.losant.com/t/server-sent-event-sse/1869/3 "2019-06-11T16:55:15Z")

</div>

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.

> [@anaptfox](#):
>
> I’m still unsure of why a real-time Indicator Block wouldn’t work to solve your problem. Could you elaborate on that?

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. 🙂

---

<div class="post-metadata">

**Author:** ![anaptfox](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/anaptfox/32/873_2.png) [@anaptfox](https://forums.losant.com/u/anaptfox)\
**Post date:** [June 11, 2019, 5:07pm UTC](https://forums.losant.com/t/server-sent-event-sse/1869/4 "2019-06-11T17:07:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nahuel](https://avatars.discourse-cdn.com/v4/letter/n/8dc957/32.png) [@nahuel](https://forums.losant.com/u/nahuel)\
**Post date:** [June 11, 2019, 10:54pm UTC](https://forums.losant.com/t/server-sent-event-sse/1869/5 "2019-06-11T22:54:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![anaptfox](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/anaptfox/32/873_2.png) [@anaptfox](https://forums.losant.com/u/anaptfox)\
**Post date:** [June 12, 2019, 12:34am UTC](https://forums.losant.com/t/server-sent-event-sse/1869/6 "2019-06-12T00:34:36Z")

</div>

My pleasure 🙂

---

<div class="post-metadata">

**Author:** ![JuliaKempf](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/juliakempf/32/2446_2.png) [@JuliaKempf](https://forums.losant.com/u/JuliaKempf)\
**Post date:** [January 13, 2020, 10:18pm UTC](https://forums.losant.com/t/server-sent-event-sse/1869/7 "2020-01-13T22:18:12Z")

</div>

Hi @nahuel,

I wanted to let you know that [Streaming Endpoints](https://docs.losant.com/experiences/streaming-endpoints/) were implemented in our latest [Platform Release](https://www.losant.com/blog/platform-update-application-export-streaming-endpoints-device-list-block#streaming-endpoints), which introduces a new SSE Stream reply type option in the [Endpoint Reply Node](https://docs.losant.com/workflows/outputs/endpoint-reply/) that allows you to reply with a [Server-Sent Event](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) (SSE) response.

As always, thank you for your suggestions and feedback, they are vital in improving the Losant Platform.  
Have a great day,  
Julia