# Handle reconnections in a UI node

**URL:** <https://discourse.nodered.org/t/handle-reconnections-in-a-ui-node/32974>\
**Category:** Developing Nodes\
**Created:** [16 September 2020 20:47 UTC](https://discourse.nodered.org/t/handle-reconnections-in-a-ui-node/32974 "2020-09-16T20:47:22Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [16 September 2020 20:47 UTC](https://discourse.nodered.org/t/handle-reconnections-in-a-ui-node/32974/1 "2020-09-16T20:47:22Z")

</div>

Hi folks,

Some time ago there was a [discussion](https://discourse.nodered.org/t/ui-template-doesnt-show-old-data/30932/2), but unfortunately it is now closed for comments. It contained a nice quote from @dceejay:

> the template can optionally save the last date sent to it... but for a chart that is tricky as that means you would have to either send all the data a one blob - so that it has all the data to re-plot - or you have to cache the data points yourself and resend them on a reconnection.

@Paul-Reed and myself are building a UI chart node, and we cache the data points in the server side of our UI node. Does anybody know how we can resend these data points on a reconnection? So we are _ **not** _ talking about resending the last input message!

Thanks a lot !!!  
Bart

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 September 2020 00:16 UTC](https://discourse.nodered.org/t/handle-reconnections-in-a-ui-node/32974/2 "2020-09-17T00:16:39Z")

</div>

As I think the control node is able to know when a client connects, I assume that this is available somewhere to custom UI nodes too?

You need the connection event along with the websocket id so that you can send the data only to that client when it (re)connects. Remembering that a client will reconnect (and therefore get a new id) when a page/tab is reloaded or sometimes even if there is a network glitch that temporarily disconnects the socket.

uibuilder, of course, deals with this using a separate output channel for control messages.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [17 September 2020 06:03 UTC](https://discourse.nodered.org/t/handle-reconnections-in-a-ui-node/32974/3 "2020-09-17T06:03:26Z")

</div>

Hi @BartButenaers  
As huge fan of data visualization, that makes me curious. What kind of chart it will be?

As it is not your first node you'll probably recognize those (pseudo code) constructions:

```auto
var html = HTML(config);

function HTML(config) {
var data = JSON.stringify(config);
<div .... ng-init='init(` + data + `)'>
}

```

But the configuration parameters is bunch data as any. So you can bring in what ever data you like.

```auto
var html = HTML(config,laststate);

function HTML(config,state) {
var conf = JSON.stringify(config);
var data = JSON.stringify(state);
<div .... ng-init='init(` + data + `)'>
}

```

And at front-tend part (`initController: function ($scope)`) you can use the collected data

```auto
$scope.init = function (data) {	
	// init layout with provided data
}

```

But there will be many situations you'll need to deal with...  
You'll probably need to wait the html elements to be ready in DOM.  
At some moment the node will receive the replayMessage.  
Node may get new message also before the initialization is completed.  
If nodes configuration can be changed that much so the old data is not valid for new configuration, that may need some extra attention..

Those will make that init phase a bit complicated but it is doable.

And for chart the amount of data is probably quite heavy so be prepared..

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [17 September 2020 10:11 UTC](https://discourse.nodered.org/t/handle-reconnections-in-a-ui-node/32974/4 "2020-09-17T10:11:06Z")

</div>

> [@hotNipi](#):
>
> What kind of chart it will be?

Hey @hotNipi, it is a UI node for Plotly...

> [@hotNipi](#):
>
> At some moment the node will receive the replayMessage.

Yes I will ignore those, since we will implement our own replay mechanism.

> [@hotNipi](#):
>
> As it is not your first node you'll probably recognize those (pseudo code) constructions

I'm not at my computer, so cannot verify this now...  
I think I'm completely messing up things in my head, about server-side (when e.g. a new dashboard session connects) and client-side (when the browser refresh button is clicked in an existing dashboard session) replay of messages.  
But indeed - since I will ignore replayed messages anyway - I could solve it that way. Of course _ **at condition that the HTML function is called when a browser's refresh button is clicked???** _ Not sure about that. Need to test it tonight. Now I have lunch break at work, and my head is exploding at the moment by job related issues 💥

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [17 September 2020 11:09 UTC](https://discourse.nodered.org/t/handle-reconnections-in-a-ui-node/32974/5 "2020-09-17T11:09:57Z")

</div>

> [@hotNipi](#):
>
> `function HTML(config) {`

@hotNipi, have been able during lunch break to do 3 quick tests:

- `HTML` function (server-side) is only called when I deploy new changes. So cannot use that.
- `$scope.initController` is called when I click Chrome's refresh button.
- `$scope.init` is called when I click Chrome's refresh button.

So I assume I have to use the latter one, and get shared config from the server...

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [18 September 2020 06:05 UTC](https://discourse.nodered.org/t/handle-reconnections-in-a-ui-node/32974/6 "2020-09-18T06:05:10Z")

</div>

BTW when I call (in `$scope.init`) my http endpoint to get the server-side state, everything works well (both for new dashboard sessions that are connected and existing dashboard sessions where the browser refresh button is clicked)...

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [17 November 2020 06:05 UTC](https://discourse.nodered.org/t/handle-reconnections-in-a-ui-node/32974/7 "2020-11-17T06:05:13Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.