Live Update mode

Live Update is a mode that provides synchronous data update in real time. When someone of users 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 (updates just a component it's applied to).

Live update can be applied to 4 components:

1. Grid.
2. TreeGrid.
3. Scheduler.
4. Dataview.

When you run the app with the enabled live update mode the following happens:

1. The app connects clients to the server which links them with the data storage.
2. Then, the app establishes a two-way connection with the Node.js server (opens a socket for the app and keeps it opened for the whole time the app is running) .
   
   
   
   
3. When a client makes some change, the related request immediately goes to the server which processes it and sends the answer to the app. If the answer is affirmative ( the request was performed successfully), the app passes the message to the Node.js server informing that some change was made and the details of this change. Node.js, in its turn, sends this message to all other clients running the app.
   The Live Update library helps to process the obtained information and make the related updates on the clients.
   
   
   
   

To activate Live Update for a component you should do the following steps:

1. Set up the Node.js server:
   • Install Node.js;
   • Install the cookiejar module;
   • Locate server files on server;
   • Open server directory and execute in command line: node server.js
     
     
2. Include 2 files:
   • live_update.js (a file located locally);
   • sync.js (a file located on the Node.js server).
     
     

     <script type="text/javascript" src="http://localhost:8008/sync.js"></script>
     <script src="../codebase/live_update.js" type="text/javascript" charset="utf-8"></script>

3. Initialize dataProcessor for the appropriate component and call method live_update.
   
   

   var myDP = new dataProcessor("myconnector.php");
    
   myDP.live_update("http://localhost:8008/sync");// the path to the JS Server
   myDP.init(mygrid);

To make it easy to learn the topic, you can go through step-by-step tutorial - Live updating in DHTMLX .

As you follow the tutorial, you will create a simple grid that accepts a user’s text input and updates it in real time. The simple steps introduce common information and useful tips needed for using the mode in app development.