I have a client who is trying to create an interactive game on his site due to COVID. The idea is multiple users are using the site simultaneously and any action one user takes should reflect on the other user’s screens in real-time.
For example, if there are 5 users, User 1, checks a box on their screen. The other 4 users should see their screen update and the box selected by User 1.
I already have it locked down where only one user can make a change at a time (all users are logged in site members and I restrict the UI based on an identified user) and all actions taken by each user are immediately saved to the database.
Question is, what is the best way to update everyone else’s screens? The only thing I’ve been able to come up with is to use a denounce function and constantly go back to the database and retrieve the most recent data.
Is this the best way to accomplish it, and if so at what internal should I refresh the data to not cause immense performance data?
Looking for creative solutions.
TIA!
So what your looking for is a webApp and not a website. By how websites function its a “load on enter” premise. so everything is loaded by client as you enter the page.
scenario 1. You keep asking to refresh/reload data from databases. Expectation, If the page have any SEO it will tank the whole sites SEO score, since this is code that never stops running. Also after a while a timeout should force stop the process breaking the functionality.
Scenario 2. You use location to constantly force people to reload the page.
Expectation, no one would ever be able to use anything, even with caching its like a constant interuption that takes time before is fully loaded.
Scenario 3, you build a “checker” element so it only updates if something new have happened.
Expectation, It will still timeout.
Scenario 4, Using embeded you build it as external service and show it on a wix site.
Expectation, fully possible but takes external service. Imagene embedding a google doc document, it would work, though i would never suggest it to a client.
Scenario 5, the wix Webcomponent (not sure if this is still limited access beta object) could run a scenario of code which i believe does not care about timeout. This could communicate with the backend.
Expectation, Could actually work i believe. Since the webcomponent can run code that does not follow standard website logic.
Scenario 6, You make buttons for each user that they click when they are ready for an update. Everytime someone clicks it checks if all is ready.
Expectation, you need to find a method for someone else to press a button and then force refresh other peoples current sessions. but believe its possible.
Scenario 7, Simply make a button to refresh from database.
Expectation, If no one can touch each others areas, seeing what everyone else have done is not needed constantly, but rather at intervals. So a simple button that reloads what you see at that point could be all you need.
So that should be some food for thought on it all. But again, if you want shared interactions, working on a website is not the correct choice.
Claes
Claes, thanks for your detailed insight.
You’ve articulated what I’ve tried explaining to my client as the difference between a website and webapp. I don’t disagree that a website is the wrong solution. None the less, the client want to explore it…
I am very against setting a timer to refresh the data at intervals. If they commercialize this it could have serious consequences depending on the user’s computer. The fact that a timer’s code is constantly running in the background is never a good idea in my opinion.
Another user on Facebook pointed out the wix-realtime API. I’m starting to think this might be a solution. If I subscribe all the users playing together to a channel or sub-channel when the user’s who’s turn it takes an action (e.g., checks a box, or pushes a button) I could then publish a message to that channel. If I understand that API correctly, I don’t necessarily have to display an actual message (though that might work too), but I could use the contents of the message in a logic-step to re-query the database and update the page’s elements (e.g., message=‘refresh: true’ if (refresh){fetch updated data}).
What are your thoughts on that?
Also, could you share any references to the " wix Webcomponent" you mentioned?
Im using the wix-realtime API, same as the other Promises it can fail (internal server error, unknown error, etc). And sometimes it has a delay. For my usecase works fine, as “some delay” or an “error” are not critical. So you have to weight in ur use case how critical the handicaps can be
An idea for your game could be, whenever theres a delay of X time, or an error, the users looses the turn, or they do something else, like an extra card. this way the users wont feel the error, and they will see it as a small random luck-program inside the game
Thanks! I was wondering about the stability and confidence of that API.
I had the same thought about doing something if an error is detected.
There are functions in the API like onDisconnected( ) or onError() that I could leverage. In actuality if an error occurred, all I would need to do is refresh the data to get the latest.
How would you do the delay of x time? The only way I know how to use that with a debounce, but that constantly scares me as it is constantly running. Maybe I’m overly paranoid, but I’m always worried about timeouts and memory leaks/consumption.
@neffdesign yhea scrap the timming stuff, call the api, and if it works then all good, and if it fails then you do the other thing (extra move next round, loose round or alike). You can also create a recall function, this way you will recall the function for up to max N times.
EDIT: about the delay, i haven’t experience a horrible delay, some seconds yes, so it depends on ur game. If the promises times out (14s) , then they fail and u catch them, so all ok