![[PukiWiki]](image/picc.png "[PukiWiki]")
&color(red){みかんせい}; dhtmlxとnode.jsで複数クライアントで同期するwebアプリを作ってみた。 参照：[[http://docs.dhtmlx.com/dataprocessor__live_update.html>+http://docs.dhtmlx.com/dataprocessor__live_update.html]] Grid、TreeGrid、Scheduler、DataViewの４つで利用可能です。 ここではGridを例にします。 ***node.jsを用意 [#s5ec585f] #code(nonumber){{ [root@c ~]# yum --enablerepo=epel install nodejs }} ***gridLive_nodejs.zipのserver.js [#dc85ded9] ***&color(magenta){gridLive_nodejs.zip}; のserver.js [#dc85ded9] この圧縮ファイルは下記のページに置かれている [[http://docs.dhtmlx.com/dataprocessor__live_update.html>+http://docs.dhtmlx.com/dataprocessor__live_update.html]] &ref(2016y05m09d_230347752.png,nolink); これを取得して、展開します #code(nonumber){{ [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を動かしておきます。 #code(nonumber){{ [root@c src]# cd /opt/gridLive_nodejs/ [root@c gridLive_nodejs]# [root@c gridLive_nodejs]# node nodejs/server.js Server running }} これをデーモン起動にすればいいのだが、、まだ方法が分からん。 ***live_updates.js [#m0039ff9] ***&color(orangered){live_updates.js}; [#m0039ff9] こちらは、Forumページにありました。 [[http://forum.dhtmlx.com/viewtopic.php?f=6&t=38711>+http://forum.dhtmlx.com/viewtopic.php?f=6&t=38711]] &ref(2016y05m09d_230646999.png,nolink); ***dhtmlx本体 [#ocf32a55] ***&color(crimson){dhtmlx};本体 [#ocf32a55] 「Standard Edition v.4.6」をダウンロードします ***live_updatesサンプルページ [#o8fed5ee] 下準備はそろいました。 簡単なサイトを準備します。基本はdataProcessor APIを使って、Grid表の修正、追加、行削除がそのままDB側にも反映できる形にして、 それからnodejsによるlive_update.jsを組み込むっていう感じです。 ここでは /var/www/lv を基点にページを作ります。 まずは dhtmlx をここに展開します。 #code(nonumber){{ [root@c ~]# mkdir /var/www/lv && cd /var/www/lv [root@c lv]# unzip /opt/src/dhtmlxSuite_v46_std.zip codebase/* }} #code(html,nooutline,nonumber){{ [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]# }}
