Realtime Data Update with NodeJS and WebSockets

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:

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

Nothing unusual so far.

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

Under Server Connect select Live Data Refresh with Sockets:

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:

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

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:

Open Sockets and select Refresh Server Action:

Click the server action picker:

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

Click Select and you are done!

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:

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

21 Likes

YAAAAYYYYY thank you sooooooo much!!! :grin: :grin:

1 Like

:bomb: :bomb: :bomb: :bomb: :bomb: :bomb: :bomb: :bomb: :bomb: :bomb: :mechanical_arm: :mechanical_arm: :mechanical_arm: :mechanical_arm: :muscle: :muscle: :muscle: :muscle: :muscle: :dancer: :dancer: :dancer: :dancer: :dancer: :dancer:

thanks @patrick , @Teodor , @George

2 Likes

OMG!!! AWESOMEEEE!!! Thanks Guys!

8 posts were split to a new topic: Sockets features available in PHP

Resource wise, how does this feature compared to using action scheduler to update data every few seconds or milliseconds. Asking since this isn’t available in php.

1 Like

Great new feature guys :+1:

There is a huge difference between scheduler and websockets realtime update.

Action Scheduler has to poll for new changes each minute for example, so it runs query very often from each client browser, so many queries get fired very often, and they fetch the same data again and again even if not changed.

While the websockets don’t have to do any polling because they just gets a refresh event when data really changes - and notify directly the connected clients via their open channel. So this is very fast and efficient. Also very lightweight!

4 Likes

It seems like Wappler is going in the direction of Node.JS which is great.

However, those of us building apps in PHP before Node.JS was available are stuck in the past. We (at least I) can’t easily switch to Node.JS where all the new fancy features are coming out.

Are there any plans on creating some a conversion tool? It would be great if there was, however I would understand if it’s too much effort for something that will have a fixed shelf life.

If it’s the latter and there is no Wappler way to convert from PHP to Node.JS has anyone converted PHP to Node.JS? Is it even feasible?

Hello @nepatriot

The problem with PHP is not we don’t like it or we are ignoring it or we don’t want to develop it. It’s not a thing of the past and it’s perfectly fine to use it.

It’s actually that:

A one-click-magic tool which translates php to node.js could be possible for some simpler actions probably, but for more complex server actions, routing etc. it would be more difficult.
Also some features are only possible to be added in Node.js and exist only for it, because of the reasons I quoted above.

1 Like

Unfortunately, it’s the availability of Node.js hosting and relatively cheaply that is severely lagging.

The best tried & true hosting companies that I have settled on provide the latest PHP & mysql version on linux based servers. But NODE.JS hosting is comparatively rare across the universe.

Especially where they’ve made it easy to deploy, manage and scale your Node.js apps, integrating with Git and Heroku.

And that really is a problem right now for apps that a client wants to install on their own hosted domains after development.

For instance, one of the best Shared hosting providers I’ve settled on after 20 years of trying everybody on 2 continents, is Siteground.

I use the most expensive shared hosting plan that even allows using different geo-based servers.
However – " Shared hosting plans do not support Node.js." So I have many mysql databases & tables at Siteground that I want to query because they hold forms data, but to implement a mobile version using Node.js that I can configure in my dashboard is out unless I want to pay for a big leap in price just to get NODE.JS

@Teodor is it working on mobile projects?

Yes if they connect to a NodeJS powered server connect from a web site.

1 Like

@Teodor this is very exciting and demonstrates that Wappler is really shining.

A question from a newbie: What is the difference between this feature and webhooks?

Thx

Webhooks are usually ‘messages’ sent from other services to your server endpoints. For example, sending an email through a web provider, their servers may send a read receipt to your server. Your server can then process it and mark the corresponding message as read.

Websockets open a connection between the user and the data on your server to it is updated in near real-time. For example, new messages on a chat can be sent from one user to your server and then seen straight away by the recipient (without having to set up a timed polling to check for new messages)

3 Likes

Any docker hosting will not do the trick? 5$ a t vultr for example?

A post was split to a new topic: dmx.Socket is missing

Is there any wappler property using websocket, where server side SA refreshes a query API that is in another project?
I have 2 projects with Customer Portal and Admin Portal, whenever a customer do any transaction in Customer Portal, it should be automatically refreshes the live transaction in Admin Portal using same DB.

not the best solution… but you could always use scheduler to refresh the data… if you don’t need Realtime data… if the project are on two different portals.

Did you already try it?

You could use your query from the customer portal in the admin portal.

Just paste the full URL from your SA in the Server Connect Properties on the App Connect side .

I have to admit that I didn’t try to do this on the server side. It should work the same way.