dhtmlx/live_updates

みかんせい

dhtmlxとnode.jsで複数クライアントで同期するwebアプリを作ってみた。
参照：http://docs.dhtmlx.com/dataprocessor__live_update.html
Grid、TreeGrid、Scheduler、DataViewの４つで利用可能です。

ここではGridを例にします。

node.jsを用意†

[root@c ~]# yum --enablerepo=epel install nodejs

↑

gridLive_nodejs.zip のserver.js†

この圧縮ファイルは下記のページに置かれている
http://docs.dhtmlx.com/dataprocessor__live_update.html

これを取得して、展開します

[root@c src]# pwd
/opt/src
[root@c src]# ls -l gridLive_nodejs.zip
-rw-r--r-- 1 root root 40119  5月  9 22:31 gridLive_nodejs.zip
 
[root@c src]# unzip -d /opt/gridLive_nodejs gridLive_nodejs.zip

まだ早いけど、この中のserver.jsを動かしておきます。

[root@c src]# cd /opt/gridLive_nodejs/
[root@c gridLive_nodejs]#
[root@c gridLive_nodejs]# node nodejs/server.js
Server running

これをデーモン起動にすればいいのだが、、まだ方法が分からん。

↑

live_updates.js†

こちらは、Forumページにありました。
http://forum.dhtmlx.com/viewtopic.php?f=6&t=38711

↑

dhtmlx本体†

「Standard Edition v.4.6」をダウンロードします

↑

live_updatesサンプルページ†

下準備はそろいました。
簡単なサイトを準備します。基本はdataProcessor APIを使って、Grid表の修正、追加、行削除がそのままDB側にも反映できる形にして、
それからnodejsによるlive_update.jsを組み込むっていう感じです。

ここでは /var/www/lv を基点にページを作ります。
まずは dhtmlx をここに展開します。

[root@c ~]# mkdir /var/www/lv  && cd /var/www/lv
[root@c lv]# unzip /opt/src/dhtmlxSuite_v46_std.zip  codebase/*

[root@c lv]# vi index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
        <title>For demo purpose only :: &1</title>

  <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
  <script src="codebase/dhtmlx.js"></script>
  <script src="codebase/live_updates.js" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript" src="http://localhost:8008/sync.js"></script>
<script>
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("codebase/imgs/");
    mygrid.setHeader("Column A, Column B");
    mygrid.setInitWidths("100,*");
    mygrid.setColTypes("edtxt,ed");
    mygrid.setColSorting("connector,connector");
    mygrid.enableMultiselect(true);
    mygrid.setSkin("dhx_skyblue");
    mygrid.init();
    mygrid.loadXML("php/get.php");
    var dp = new dataProcessor("php/update.php");
    dp.live_updates("http://localhost:8008/sync");
    dp.init(mygrid);
</script>
</head>
<body >
   <div id="gridbox" width="350px" height="550px" style="background-color:white;overflow:hidden"></div>
</body>
</html>
[root@c lv]#