Handle reconnections in a UI node

Hi folks,

Some time ago there was a discussion, 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 !!!

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.

1 Like

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:

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.

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

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

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

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

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

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

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

1 Like