Discuss

Realtime Data Update with NodeJS and WebSockets

On this page

Intro

Realtime Data Updates are here! Thanks to the NodeJS and Socket.IO integration in Wappler now you can build realtime apps! WebSockets is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. If you want to get updates in real-time, WebSockets allows a persistent connection between your browser and the server. The server is constantly waiting (listening) for new data/information and whenever received, it automatically sends it to the client through the socket - which allows the data in your browser to be updated automatically!

There are many example use cases - real time feeds, data visualization, charts, location apps, chats, sport or other events updates etc.

Using WebsSockets with Wappler

In our example we will show you a page which displays a sports game results, which will be updated in real time.

You already know how to display data on the page - by creating a database query and listing the results on the page using Server Connect component.

Set up Client Side

So we have a server action, which contains a database query:

Screenshot_1|690x430

And we are using this server action on the page, to list the results:

Screenshot_2|690x430

Nothing unusual so far.

The next step is to enable realtime data refresh for this server connect. Add New Dynamic Attribute:

Screenshot_3|690x430

Under Server Connect select Live Data Refresh with Sockets:

Screenshot_4|690x430

And save your page! Now the Server Connect component on the page will automatically refresh the data on the page, when the server sends the new data!

Set up Serve Side

As we have our client side part ready, we now have to setup the server side. We created a regular update record action, which is used to update the data in our database:

Screenshot_6|690x430

And generated an update record form on another page (i.e. different than the results page):

Screenshot_7|690x430

Again - nothing unusual, you already know how to do this.

What we need to do now is to setup the server to send the new data, when there's a change. In our case this happens after we update the results - so after the Update Record step runs.

Right click the Update Record step runs:

Screenshot_8|690x430

Open Sockets and select Refresh Server Action:

Screenshot_9|690x430

Click the server action picker:

Screenshot_10|690x430

And select the server action, which we are using on the results page (where we enabled the live data refresh a few steps above):

Screenshot_11|690x430

Click Select and you are done!

Screenshot_1|690x430

Save your server action. Now when the update record step runs, our server will send the updated data to all the clients browsers who have the results page loaded.

So this way you can create any kind of realtime data updates - not only using update record - but also after insert or delete, or any other kind of data refresh.

Results

Here's an example of 3 different clients who loaded our page in their browsers (we opened the results page in 3 different browsers). As soon as we update the data in the database, the results are immediately refreshed in the users browsers:

results|690x465

That's how to do Realtime Data Refresh with Wappler!