Support Topics Documentation Slack YouTube Blog

Realtime Leaderboard

Morning Backendless.

I don’t have a problem or a bug :slight_smile: 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.

Any pointers gratefully received.

Mike

Hi @mike-turner

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.

More about listeners, listeners triggering etc you can read in docs:
JS (for web) - https://backendless.com/docs/js/rt_handlers_and_events.html
Android (just in case) - https://backendless.com/docs/android/rt_handlers_and_events.html
iOS (just in case) - https://backendless.com/docs/ios/rt_handlers_and_events.html

THESE articles also might be helpful, on of them even has leaderboard example :wink: :


Regards,
Anton

Awesome, thanks Anton for that information. I will read through all the links, but seems perfect.

I think I just need to find some sort of javascript table library which will look pretty and backendless can do the work!

Super! If you face any difficulties while working on realtime DB - do not hesitate to ask :wink:

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.

Hi Mike

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.

Regards, Vlad

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!!

Hi @vladimir-upirov

I have used React to build the leaderboard and have followed your (excellent) ‘how to use realtime backendless with reactJS’ tutorials [https://backendless.com/how-to-use-backendless-with-reactjs-pt3/]

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!

Mike

Hi Mike

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
  • to be sure that current component has been hidden you need to use some hander, in the next article it is onExited http://reactcommunity.org/react-transition-group/transition
  • 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.

I hope it is what you are looking for =)

Regards, Vlad

1 Like

Hi Vladimir

Yes this looks exactly what I am looking for. I am new to react (and redux) so this is proving to be a steep but interesting learning curve.

But this approach seems to be what I am searching for.

I will try and make some progress this week.

Thanks very much for pointing me in the right direction.

Mike