I don’t have a problem or a bug but just wanted to be pushed in the right directon.
We use backendless 5.0 in our app. Currently the scores in the app are saved to a scores table in backendless. If those scores in the table change we would like them to change on a user facing web leaderboard too. It looks like the realtime database would be ideal. We started using node.js and websockets a while back and never finished it, but it looks like using backendless realtime would kind of do away with using this anyway and be a simpler approach as you have already done a lot of the heavy lifting?
Any suggestions to what kind of approach you might use for this project if we were to go for a backendless solution. Basically anytime a score changes for a user or a new score is created in the iOS or Android app we want to show this on a simple web based leaderboard.
If in terms of your leaderboard table max score can be either CREATED or UPDATED - then you should use both create and update listeners. Basically there are 2types of listeners: conditional and unconditional. Unconditional subscribes to ALL create and update events in a certain table while conditional ones are triggered only when specified condition is met. F.e.:
EventHandler<Map> orderEventHandler = Backendless.Data.of( "LeaderBoard" ).rt();
orderEventHandler.addCreateListener( "maxScore > 1000", new AsyncCallback<Map>()
{
//your handleResponse and handleFault blocks
}
In this case listener will be triggered only in case if maxScore of created object is higher than 1000.
Same for update listener.
In order to keep leaderboard “fresh” - retrieve objects from leaderboard table with DESC sorting by maxScore column. Any update or create event will trigger a listener. Whether the object is created/updated from iOS SDK, Android, REST or even Data console. Nothing special or extra should be done, listeners are just interceptors.
Thanks, any suggestions on any javascript/web libraries for tables to base leaderboard table itself on. Was thinking of datatables.net but wondered if you guys had any recommendations? A whole library might be overkill.
It depends on JS framework you use in your app. The plugin you provided is a jQuery plugin, so if you build your app based on plain JS/HTML using jQuery you can try this one. But if you use React or Angular, I assume, you can take a look at React/Angular Table components.
Backendless provides you a data storing, and a way how to display and manage it you have to choose based on your project architecture.
Thanks Vladimir. Starting with a complete blank canvas for the web leaderboard… Thanks I was just fishing for some personal recommendations in case you had come across something perfect as there are quite a few different options for me to look at otherwise, but this is probably on the edge of the backendless forum brief!!
That really got me into the basics, but something I can’t wrap my head around is this (using the person class in the tutorial)
Lets say someone updates their name in the table - and those changes are changed in realtime in the react - just like in your tutorial. That works perfectly and very quick.
But what I want to do is have another component which will display for example ‘Mike has just changed his name’ or something like that - and then the component should unmount or not be visible after say 30 seconds. I have achieved this (but maybe not in the best way).
However if another person changes their name at say a few seconds after Person 1 changed their name I want that message to be effectively ‘queued’ for delivery and to get displayed only after the Person 1 message/component has finished displaying. and so on and so on… Does that make sense?
Any help on that would be much appreciated. I understand that this is probably more a react question than a backendless question but if you fancied extending your tutorial or giving me some pointers that would be fantastic as I can’t figure it out!
I’m glad to hear that you’ve found the article useful.
If I’ve correctly understood you want to build a notifications/alerts system just for notifying users about some changes, am I right?
If so I can propose you to create some kind of messages pool and display only one message from the pool at the same time. Then after some time you remove the active message from the pool and mark as active another one.
so, in order to implement this you need two react components NotificationsManager (has no visual representation) and Notification (has visual representation)
here are a few main points:
some component subscribes for RT and puts new messages into redux store, or as a messages pool you can define a list in NotificationsManager state
NotificationsManager must keep the list of messages up-to-date, on this stage you can test that everything works, on a new RT message the messages list should just expand.
after that you need to implement an activation mechanism by setting into the component state a message and pass it into Notification component
also you have to run a timer with some timeout (30 seconds for ex.) for changing current activeMessage by the next one
all already displayed messages must be removed for the pool
Also you can make some aggregation before display a message, for example we’ve got two messages:
Mike has just changed his name
Mike has just changed his age
and before display we can combine it into a single message: Mike has just changed his name and age, or for example if Mike has changed his name more than one time we can just show the last notification.
Just would like your insight really. I read a lot about react hooks as an alternative to the react-redux store. This example app uses react-redux, but what would be the merits or disadvantages of using web hooks instead with this backendless example?
I also love to use ReactHooks, however this is not actually an alternative to react-redux stack.
I would say they (ReactHooks) just allows you to use react lifecycle methods in stateless functions, when redux manages data across your app.
So, in my point of view these both technics can be used in react apps. You can try to change some component in the Backendless Example with using the hooks.
Regards, Vlad
but just wanted to be pushed in the right directon.
: