One of the coolest features of the Backendless database is its real-time capability. What it does is lets multiple users operating on the same data to stay up to date without any page refreshes or any additional API activity. The RT (real-time) support is very powerful and supports a variety of different use-cases. When you start learning it, it helps to start with something simple and small, this is what I will review in this article.
The sample application that demonstrates the RT capability is a shared shopping list that different family members can access and add anything to the family shopping list. If multiple people use the application concurrently, the system makes sure that everyone has the latest data. Below is a recording of the app in action - notice there are two different browsers:
The database schema used in the example is very simple. It is a single table that has only one custom column that will store the name of the shopping list item:
The layout of the page includes the following three main components:
- Input - this is where a new item is added
- Block (repeater) - contains a list of items in the list
- Text block - sits inside of the repeater block and render the name of each item
The app initialization logic is in the
On Page Enter event handler:
There are two very important things going on here:
- Loading anything already saved in the database. This is done by using the
Load Table objectsblock. The block returns a collection/list of
ShoppingListobjects. The list is placed into
Page Datafor the
- A real-time listener for the
Createevents in the database is registered. This is the only RT-related codeless logic you will see in the example. Notice that with a single block, we get the complete real-time capability to synchronize actions of multiple users.
Let’s review the RT Codeless logic in detail:
The name of the codeless block is
Add RT Data Create Listener with id. What it does is registers some logic (everything inside the codeless block) that will be executed whenever a new object is created in the specified data table (
ShoppingList). Notice you can also specify a
where clause (we don’t use in this example). If a where clause is set, it will be used as a condition that the created objects must match for the real-time listener to trigger the logic.
shoppingListItem variable contains the created object. The object is delivered to the page through a real-time database connection. The connection does not require any polling or additional API calls.
The logic in the listener, adds the newly created object to the collection of objects received from the database (see item 1 above). The rest happens automatically through the data-binding magic.
Adding New Items
The logic added to the Input control checks if the user presses Enter and in that case, saves the object in the database and clears out the input field:
The check for the
Key Codebeing equal 13 is what’s needed to see if the user pressed Enter. The
Save Object in Backendlessblock saves a new object in the
ShoppingListtable. This is what triggers the real-time database event for all connected users.
Repeater and Item Rendering
The block containing the Text component is marked as a Repeater:
Repeater Data Logicuses data-binding for the
shoppingItemsproperty. This is the property used in the App Initialization logic - we load the items from the database into that property:
Finally, the Text block inside of the repeater block has the following data binding for
The bound property name is
item. It references the name of the column in the
ShoppingList database table.
That’s all, guys. It is a simple, but very demonstrative example. One thing I’d like to add is that all real-time database blocks are located in the
Real-Time API category in the Codeless blocks toolbar:
Please fee free to ask any questions.
Happy Codeless Coding!