HTML templates - UPDATE vs websocket use case and questions


#1

Trying to move away from Adobe a bit more - I have formed my first HTML template that is currently using json and the caspar UPDATE command for 60 old field updates per second for live output via a custom client. This seems to work ok and the server seems to cope fine with that volume (both in localhost and a LAN setups).

I have however seen a few comments on here about using websockets to update these type of large data templates- I guess potentially I’m looking to use more than one client to send data to more than one channel at the same time to the server down the line too, and also increase the volume of data points to send per second as well.

some questions;

If I where to switch and use websockets is the below approach the best way to do this?
Use Caspar’s PLAY command to load and animate in the template.
Use websockets to send data updates in place of UPDATE
Use Caspar STOP command to playout the template and unload.

If I where to use more than one client, how could I define data to each channel via websockets? which under UPDATE can be done by defining the channel to the same server.

Do html templates require that all Caspar commands are reference (even if they are empty?).

As a side note when running as above this way I sometimes run into an issue where the caspar server receives data ok, but the screen producer doesn’t show the output of the template (I’m not 100% sure of how to reproduce it - but think it is related to which window is in ‘focus’ on win10 - will try and narrow down under more testing.


#2

Correct.

First, all the clients and and templates should be communicating on one websocket server. The template shouldn’t care which client is sending it data. The client should know what elements to update. I usually use something similar to: {id: “htmlElementId”, data: “blabla”}

Yes.

Don’t use screen consumers my self so haven’t seen this, but might be a win10 thing, I’ve sometimes complained that windows updates for instance are taking a long time, only to wiggle or resize the update window to see it update.


#3

You update 60 fields once a second or updsate it 60 times per second? Just for curiosity: What is the use case of this?


#4

perfect thank you!


#5

60 fields per second (basically 1 json string with 60 fields in html template). This if for live race data streaming.


#6

I made a timecode monitor once which is a update every frame through a websocket.

this worked just fine.

I gues what you mean is 1 json with 60 ‘keys’ every second.

that’s peanuts I guess


#7

So a Bit of an update, I’ve finished building this into the template and client.

Essentially the way I have set it up is as follows I case it is any help to other;

-From custom Caspar client send the AMCP PLAY command to fade in and fade in template.
-With this command send the websocket server location so the template can connect directing update to a function to form a new websocket in the template.

From that point the websocket server and template updates via web sockets direct without Caspar (but interestingly Caspar can still read console.log which is handy!)

Once the template was a finished with close the websocket connection and send STOP /CLEAR commends via AMCP to fade out and stop template.

Seems to work ok- just need to account for and disconnections somewhere.


#8

I’m a bit late to this and maybe this is also off course but have you considered using Socket IO for your websocket needs? They have a polling fallback and other features as well as great backwards compatibility.

I believe you will need to setup a webserver in addition that handles the connections but if you are already serving the HTML this can be down pretty quickly with Express.

Please let me know if these seem like an option and I can post more information.


#9

Thanks ouellettec I’ll take a look I’m actually working with a .Net client and using websocket-sharp for websocket server at the moment.