Live Updates Mode (Legacy)

Live Update is a mode that provides synchronous data updates in real time.

When one user makes a change, it becomes visible to all others immediately.

The mode uses the Faye socket library to make the process as fast and flexible as possible and doesn't require page refreshes (it updates only the component to which it's applied).

In this article, we will give you a step-by-step tutorial to quickly dive into the topic.

Basic Principle

Live updates are achieved by broadcasting changes made by one connected client to all other connected clients. This is done by utilizing a WebSocket connection for two-way message exchange between connected clients and the backend.

In this version of the Live Updates module, it is implemented by extending the DataProcessor module to use the Faye library client, along with an additional backend application that dispatches messages between clients.

The solution consists of three parts:

1. The frontend with Scheduler and the DataProcessor module.
2. The backend that implements CRUD operations on the persistent storage.
3. The live-updates hub that is responsible for connecting clients.

When a user makes changes to the data:

• The frontend sends the update to the backend.
• At the same time, the frontend sends the same update to the live-updates hub.
• The live-updates hub broadcasts the update to all connected clients.
• When the frontend receives the update from the live-updates hub, it applies it to the Scheduler data in a way that doesn't trigger changes to the CRUD backend.

Before You Begin

To start this tutorial, you must have a fully functional dhtmlxScheduler application integrated with server-side logic - one that loads data from a database and saves changes back. (See details here.)

A basic example of such an application might look like this:

<script>
    function init() {
        scheduler.init('scheduler_here', new Date(2025,5,24), "week");
        scheduler.load("api/scheduler");
 
        const dp = scheduler.createDataProcessor({
            url: "/events",
            mode: "REST"
        });
    }
</script>

Configuring Live Updates

Step 1. Setup

1. Download the Live Updates plugin for the Scheduler: download link
2. Download the Live Updates backend app: download link
3. Start the Live Updates backend by following the instructions in the included readme file.

Step 2. Configuring the Front-End

To work with the Live Update mode, include two additional files in the frontend app:

• live_updates.js - the file downloaded in the previous step
• client.js - a file that is dynamically generated by the WebSocket backend app

<script src="./lib/dhtmlxscheduler/live_updates.js"></script>
<script src="http://localhost:8008/client.js"></script>

In the code sample above, we connect directly to the WebSocket app. Usually, you'll want to route this URL through your main app to avoid exposing the address and port of the secondary app. This can be done by using a reverse proxy.

Proxying requests through the main app (Node.js):

const httpProxy = require('http-proxy');
const proxy = httpProxy.createProxyServer({});
 
module.exports = function(app){
    app.all("/liveUpdates*", function(req, res) {
        proxy.web(req, res, {target: "http://localhost:8008"});
    });
}

Front-End:

<script src="./lib/dhtmlxscheduler/live_updates.js"></script>
<script src="/liveUpdates/client.js"></script>

Step 3. Enabling Live Updates

The mode is enabled by calling the live_updates() method on the DataProcessor instance. For this to work, you must have the DataProcessor initialized first. As a parameter, the method takes the URL of the WebSocket entry point.

const dp = scheduler.createDataProcessor({
    url: "/events",
    mode: "REST"
});
 
dp.live_updates("/liveUpdates");

You can download a complete demo application here.

Back to top