Syncing frontend instances?
So I have a project that involves OBS browser source as an overlay and I need a dashboard as a backup control of the overlay. Is the best solution using websockets and having dashboard and overlay instances on separate web servers? Both instances would be ran on the host computer.
18 Replies
you may want to look at that particle demo that floated around a while ago, it used localstorage I think?
https://twitter.com/_nonfigurativ_/status/1727340311490265209 I thought they went into more detail than this
I guess i can use local storage yeah
looks like they just store data in localstorage, and listen to the storage event to update local state: https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
MDN Web Docs
Window: storage event - Web APIs | MDN
The storage event of the Window interface fires when a storage area (localStorage or sessionStorage) has been modified in the context of another document.
if it's guaranteed to run on the same machine, in different windows of the same browser, it's probably by far the easiest way. Sockets would be very complicated just to share a little data for an overlay
Hmm i wonder how I would have to execute the events
oh nvm i can just have data in a variable and if something changes in the local storage update and that will act as an event
yup, the window.storage event fires whenever there's a change in localstorage
oh i didnt even know that
yeah its a desktop app, I just have webserver cuz i run svelte
and the url is the way you add the overlay into OBS
the event even tells you what changed, so that's extra nice
thanks for the help ❤️
no problem!
also this way its probably better to have two webservers right?
one only write to local storage
other to only read
I wouldn't call it webservers, the page in your browser is the one interacting with localstorage... But you could probably get away with both writing in this particular case, cause you won't be clicking on buttons at the exact same time anyway
Cuz the way i originally thought of doing it was having it all in the same frontend just adding a class to all the controls that would just get display:hidden css applied in OBS
that'll likely be fine, yeah
eh now that i think of it I do have to have them separate
I need to make api calls to the game api to fetch data
having it on both instances would make double the calls
ah, yeah
you could put a little flag in your localstorage for the first one that starts up, so that it knows its the one that does the api calls, and then just don't do that on the other
you can differentiate the logic by using url query params maybe
or having two routes as im using svelte
but both inherit the UI components