コツコツ拡張Cloud9。サーバにデータを送信してみる。

Cloud9 IDEを拡張して、サーバと通信をしてみます。

サーバと通信するには、クライアント側、サーバ側の双方にextensionを追加します。

大まかな処理の流れです。

1. クライアント側で拡張で ide.send(data) でサーバにデータを送信。
2. クライアント側の ide.js 内の ide.socket.json.send(data) でサーバにデータ送信される。
3. サーバ側の ide.js の onUserMessage イベントハンドラが起動。
4. サーバ側の workspace.js の execHook が起動。引数hookに文字列「command」。
5. execHook内で、サーバ側のプラグインを検索。プラグイン内の command プロパティを起動。
6. サーバ側のプラグイン内で sendResult(data)でクライアントにデータ送信。
7. クライアント側の socketMessage イベントハンドラが起動。

クライアント側の拡張では、ide.send(data)でデータ送信。socketMessageイベントハンドラを実装。サーバ側のプラグインでは、commandプロパティを実装。sendResult(data)でクライアントに送信。ということになります。

インストールボタンを押したら、サーバにデータを送信して、その返信をデータグリッドに表示してみます。

まず、クライアント側。Viewは変わらないので省略。

cloud9/client/ext/datagrid_test/datagrid_test.js

define(function(require, exports, module) {
    var ide = require('core/ide');
    var ext = require('core/ext');
    var panels = require("ext/panels/panels");
    var markup = require('text!ext/datagrid_test/datagrid_test.xml');
    var util = require("core/util");
    
module.exports = ext.register('ext/datagrid_test/datagrid_test', {
    name   : "Datagrid Test",
    dev    : "Tomoyuki Inoue",
    alone  : true,
    type   : ext.GENERAL,
    markup : markup,
    command : "datagrid_test",
    desp   : [panels],

    nodes  : [],
        
    hook : function(){
        var _self = this;

        this.nodes.push(
            mnuWindows.insertBefore(new apf.item({
                caption : "Datagrid Test",
                onclick : function(){
                    ext.initExtension(_self);
                    // モデルを作成
                    var model = new apf.model();
                    // datagridのmodel属性にmodelを設定
                    dgList.setModel("model", model);
                    // data要素を作成
                    var data = winDatagrid.ownerDocument.createElement("data");
                    // dataをロード
                    model.load(data);
                    // modelを設定
                    dgList.setModel(model);
                    // ボタンクリック時のイベントハンドラ
                    btnInstall.addEventListener("click", function(e){
                        if(tbPackage.value.length > 0){
                            var data = {
                                command:"datagrid_test",
                                message:tbPackage.value
                            };
                            // サーバにデータを送信。
                            ide.send(data);
                        }
                    });
                    // datagridを表示
                    winDatagrid.show();
                }
            })
        ), mnuWindows.firstChild);
        // サーバから受信した時の処理を記述。
        ide.addEventListener("socketMessage", this.onMessage.bind(this));
    },
    
    // 受信時の処理。
    onMessage: function(e) {
            // datagrid_test以外なら何もしない。
            if(e.message.type !== "result" 
            && e.message.subtype !== "datagrid_test")
                return;
            
            var message = e.message;
            
            // モデルを取得
            var m = dgList.getModel();
            // member要素を作成
            var member = winDatagrid.ownerDocument.createElement('member');
            // name属性を設定
            member.setAttribute('name', message.body.message);
            // cv属性を設定
            member.setAttribute('cv', 'CV1');
            // data要素の子要素としてmember要素を追加
            m.data.appendChild(member);
    },
        
    init : function(apfNode){},
        
    nable : function(){
        if (!this.disabled) return;
        
        this.nodes.each(function(item){
            item.enable();
        });
        this.disabled = false;
    },
    
    disable : function(){
        if (this.disabled) return;
        
        this.nodes.each(function(item){
            item.disable();
        });
        this.disabled = true;
    },
    
    destroy : function(){
        this.nodes.each(function(item){
            item.destroy(true, true);
        });
        this.nodes = [];
    }
});

});

次にサーバ側。

cloud9/server/ext/datagrid_test/datagrid_test.js

var Plugin = require("cloud9/plugin");
var sys    = require("sys");

// 初期設定
var DataGridTestPlugin = module.exports = function(ide) {
    this.ide   = ide;
    // hooksに「command」を追加する
    this.hooks = ["command"];
    // 自分の名前
    this.name  = "datagrid_test";
};

// Pluginクラスを継承する。
sys.inherits(DataGridTestPlugin, Plugin);

(function() {

    // command を実装。workspaceから実行される。
    this.command = function(user, message, client) {
        // 自分以外のコマンドは受け付けない。
        if(message.command != "datagrid_test")
            return false;
        
        // クライアントに送信。受信した文字列に「Hello World!」を追加。
        this.sendResult(0, message.command, {
            message: message.message + ' Hello World!'
        });
        console.log('sendResult.');
        
        // trueを返す。
        return true;
    };

    // サーバ終了時に起動。
    this.dispose = function(callback) {
        // TODO kill all running processes!
        callback();
    };

}).call(DataGridTestPlugin.prototype);

実行結果。