EWD 3トレーニングコース#7 ewd-xpressメッセージ・パターンを適用する

EWD 3トレーニング・コース　 #7

ewd-xpress のメッセージ・パターンを

適用するM/Gateway Developments Ltd.

Rob Tweed訳 : 日本ダイナシステム株式会社　嶋　芳成

2

ewd-xpress アプリケーションのパターン

• ブラウザ内でイベントを発生する• ewd-xpress のバックエンドにメッセージを

送る• バックエンドで、そのタイプのメッセージに

対するハンドラ関数が、そのメッセージを処理し、通常は応答メッセージを生成する• 応答メッセージをブラウザに返し、それを受

けたブラウザではハンドラ関数がそれを処理し、通常はユーザー・インターフェースを変更する

2016/9/5 EWD 3 トレーニング・コース #6

3

これらをひとつづつ適用してください


4


• ブラウザでイベントを生成します• ボタンをクリックする• 書式の入力フィールドの値を変更する• マウス・ポインタを特定の領域内に入れる• その他 ...

• 求められたイベントが起こったとき、ハンドラ関数が起動できなくてはなりません


5

イベントを生成する

• index.html にボタンを加える• App.js に、そのボタンに対するクリック・イ

ベントのハンドラを加える


6

index.html にボタンを追加する<html> <head> <title>Demo ewd-xpress application</title> </head> <body> <script src=“//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script> <script src=“/socket.io/socket.io.js”></script> <script src=“/ewd-client.js”></script> <script src=“app.js”></script>

<button id=“testBtn”>Click Me</button>

<div id=“content”> Content goes here </div> </body></html>


7

app.js にハンドラを追加する

jQuery のイベント・ハンドラ

最初に、クリック・イベントが処理されることを確認するだけです

document.ready() 関数内で、 EWD を開始する前に、ハンドラを定義することに注意してください


$(document).ready(function() { EWD.on(‘ewd-registered’, function() {

$(‘#testBtn’).on(‘click’, function(e) { console.log(‘button was clicked!’); });

});

EWD.start(‘demo1’, $, io);});

8

実行してみましょう


9


• メッセージを、 ewd-xpress のバックエンドに送ります• EWD.send() 関数を用います• メッセージには必ず type プロパティがなくては

なりません• type プロパティの値は、自由に決められます

• 任意の文字列値• EWD.send() 関数は、登録完了まで利用できませ

ん• EWD.send() 関数は、セッション・トークンを

メッセージに自動的に追加します• この振る舞いは closure 内に保護され、変更できませ

ん• 手動での socket.io メッセージ通信はユーザには利用

できません2016/9/5 EWD 3 トレーニング・コース #6

10

app.js を編集する

type プロパティひとつのみの現時点で最も簡単なメッセージ


$(document).ready(function() { EWD.on(‘ewd-registered’, function() {

$(‘#testBtn’).on(‘click’, function(e) { var message = {type: ‘testButton’}; EWD.send(message); });

});

EWD.start(‘demo1’, $, io);});

11


• ボタンをクリックしても、ブラウザには何も現れません

• しかし、 ewd-xpress が稼働しているコマンド・プロンプト・ウィンドウをチェックしてください


12

バックエンド・ログ

• メッセージはマスター・プロセスで受信され、ワーカーに渡されますworker 2052 received message: {“type”:”testButton”, “token”:”4fb0efcd-458c-4afd-a053-8a19600867c4”}

• セッション・トークンが、 EWD.send() 関数によってメッセージに追加されていることに注意してください。


13


• ワーカー・プロセスは、エラーを報告します

Unable to load handler module for: demo1: Error: Cannot find module ‘demo1’

• ewd-xpress は、このアプリケーション(“demo1”) に対するメッセージ・ハンドラを含むモジュールを見つけられず、読み込めませんでした


14


• このエラー・メッセージは、ワーカーからマスター・プロセスに返されます

master process received response from worker 2052: {”type”:”testButton”, ”finished”:true, ”message”:{”error”:”Unable to load handler module for: demo1”,”reason”:{”code”:”MODULE_NOT_FOUND”}}}

• マスター・プロセスは、このメッセージをブラウザに転送します• しかし、ブラウザ内には何も表示されません !


15

ブラウザ内にメッセージを表示する

• 通常、メッセージを処理し、それを UI 内に表示するのは、開発したアプリケーションによります• 開発中は、送受信した全メッセージ

を、 JavaScript コンソールでトレースして見ることはとても有用です• これをするには、 EWD.log=true; とします


16



$(document).ready(function() { EWD.log = true;

EWD.on(‘ewd-registered’, function() { $(‘#testBtn’).on(‘click’, function(e) { console.log(‘button was clicked!’); }); }); EWD.start(‘demo1’, $, io);});

17

メッセージが表示されます


18

このエラーを修正する

• EWD.send() はうまく作動しています• 期待通りにメッセージをバックエンドに送ってい

ます

• バックエンドでエラーを修正するにはどうしますか、そこで受信したメッセージを処理するにはどうしますか？


19


• バックエンドでは、メッセージの type に対するハンドラ関数がそのメッセージを処理し、通常は応答メッセージを生成します• 各アプリケーションについて、開発者はバックエ

ンド・モジュールを定義します• モジュール名はアプリケーション名と同一

• 例えば、 demo.js• 開発アプリケーションは、各メッセージ type に対して、

ひとつづつハンドラ関数を定義します• データベースの読み書き• セッションの読み書き• 旧来のアプリケーション関数の呼び出し• すなわち、あらゆる形で Caché にアクセスができます


20

バックエンド・モジュールのパターン

• C:\ewd3\node_modules\{applicationName}.js

module.exports = { handlers: { {messageType1}:function(messageObj, session, send, finished){ // 受信メッセージに対して何かをします

// 応答オブジェクトを生成します

// finished() 関数をもちいて処理を終了し、ワーカーを解放します

finished(responseObj); }, {messageType2}:function(messageObj,session,send,finished){ // 同じく ... finished(responseObj); } }}


21

例題のバックエンド・モジュールを作る

• C:\ewd3\node_modules\demo1.js

module.exports = { handlers: { testButton: function(messageObj, session, send, finished){ console.log(‘*** handling the button click message!’); finished({ ok: ‘testButton message was processed successfully!’ }); } }};


22

例題のバックエンド・モジュールを作る


module.exports = { handlers: { testButton: function(messageObj, session, send, finished){ console.log(‘*** handling the button click message!’); finished({ ok: ‘testButton message was processed successfully!’ }); } }};


これが、 EWD.send() 関数内の type プロパティの値でした

EWD.send({type: ‘testButton’});

23



24

バックエンド・ログを見てみましょう

Worker 2000 received message:

{”type”:”testButton”,”token”:”527bd51f-7d6a-4dd7-827d-c1ea8dfa1f43”}

*** handling the button click message!

Master precess received response from worker 2000:

{”type”:”testButton”:,”finished”:true,”message”:{”ok”:”testButton message was processed successfully!”,”ewd_application”:”demo1”}}

*** handleMessage response

{”type”:”testButton”,”finished”:true,”message”:{”ok”:

”testButton message was processed successfully!”,

”ewd_application”:”demo1”}}

sending to socket /#5NdGRfdMn17-vboPAAAC

Master process has finished processing response from worker process

2000 which is back in available pool


この例題のハンドラー関数では、Console.log(‘*** handling the button click message!’);

25

エラーが出ますか ?• バックエンド・ログを確認してください• “Unable to load module” というメッセージで

すか？• これは、そのモジュールに構文上のエラーがあ

るという意味です• どこがエラーかを調べるには？

• Node.js の REPL を用いてください


26

Node.js の REPL を用いるC:\users\Rob Tweed> cd \ewd3

C:\ewd3> node> 　 var x = require(’demo1’) C:\ewd3\node_modules\demo1.js:6 ok:’testButton message was processd successfully!’’ ^SyntaxError: Unexpected token ILLEGAL at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:373:25) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at repl:1:9 at REPLServer.defaultEval (repl.js:262:27) at bound (domain.js:287:14)>


REPL から出るには Ctrl + C を 2 回押下します

27

バックエンドのメッセージ・ハンドラ資源

• バックエンドのメッセージ・ハンドラ関数内では、必要なすべてのものにアクセスできます• testButton: function(messageObj,session,send,finished){...}

• 受信メッセージ : messageObj• EWD セッション : session.data (Read/Write ア

クセス )• Caché データベース (Read/Write/Xecute アクセ

ス )• this.db で cache.node の API にアクセスできます

• 例えば、 this.db.function() で関数やルーチンを実行• this.documentStore で、 EWD 3 による Caché の

抽象化である JavaScript ／ Document データベースにアクセスできます


28

セッションを用いる• C:\ewd3\node_modules\demo1.js

module.exports = { handlers: { testButton: function(messageObj, session, send, finished){ console.log(‘*** handling the button click message!’); session.data.$(‘foo’).value = ‘bar’ finished({ ok: ‘testButton message was processed successfully!’ }); } }};


29


• バックエンドでは、そのメッセージ・タイプに対するハンドラ関数がメッセージを処理し、通常は応答メッセージを生成します• 応答メッセージは JSON オブジェクト• WebSocket を用いるなら、複数のメッセージを送信可能

• send() 関数は中間メッセージで、ワーカーはそのまま• finished() 関数は最終メッセージで、ワーカーは利用可能プールへ戻る

• 応答メッセージには、 type プロパティがあります• デフォルトでは、その type は元々ブラウザから来たメッセージと同一• オプションで、中間メッセージを send() 関数で送ったときは、この type

をオーバーライドできます• finished() メッセージの type はオーバーライドできず、元々受信したメッ

セージと常に同一です

• 応答メッセージは、自動的に、もともとのクライアントまたはブラウザに送り返されます


30


• 応答メッセージは、ブラウザに返されるとそこでハンドラ関数で処理され、通常はユーザー・インターフェースを変更します• 応答メッセージをブラウザ内で処理するには２つの方

法があります• EWD.send() 関数の２つ目の引数で指定するコールバック

関数• EWD.send(messageObj, function(responseObj){…});

• メッセージの type 毎に指定して Pub/Sub 機構を用いる• EWD.on(messageType,function(responseObj){…});

• UI の変更には JavaScript を用います• 必要なら、どのフレームワークを用いるかは開発者により

ます


31




EWD.on(‘ewd-registered’, function() { $(‘#testBtn’).on(‘click’, function(e) {　　　　 var message = {type: ‘testButton’}; EWD.send(message, function(messageObj) { console.log(‘Response received: ‘ + JSON.stringify(messageObj.message.ok)); }); }); }); EWD.start(‘demo1’, $, io);});

応答メッセージを処理するために、 EWD.send() のコールバック関数を用いています

32



33


• 応答メッセージは、ブラウザに返されるとそこでハンドラ関数で処理され、通常はユーザー・インターフェースを変更します• 応答メッセージをブラウザ内で処理するには２つの方法

があります• EWD.send() 関数の２つ目の引数で指定するコールバック関数

• EWD.send(messageObj, function(responseObj){…});• メッセージの type 毎に指定して Pub/Sub 機構を用いる

• EWD.on(messageType,function(responseObj){…});• UI の変更には JavaScript を用います

• 必要なら、どのフレームワークを用いるかは開発者によります• jQuery はロード済みなので、これを使いましょう


34




EWD.on(‘ewd-registered’, function() { $(‘#testBtn’).on(‘click’, function(e) {　　　　 var message = {type: ‘testButton’}; EWD.send(message, function(messageObj) { $(‘#content’).text(messageObj.messag.ok); }); }); }); EWD.start(‘demo1’, $, io);});

<div id=“content”> タグの内側のテキストを変更します

35



36


• 応答メッセージは、ブラウザに返されるとそこでハンドラ関数で処理され、通常はユーザー・インターフェースを変更します• 応答メッセージをブラウザ内で処理するには２つの方法

があります• EWD.send() 関数の２つ目の引数で指定するコールバック関数

• EWD.send(messageObj, function(responseObj){…});• メッセージの type 毎に指定して Pub/Sub 機構を用いる

• EWD.on(messageType,function(responseObj){…});• バックエンドからメッセージを頻繁に送る場合に用います• 特に、 send() 関数を用いて中間メッセージを送る場合

• UI の変更には JavaScript を用います• 必要なら、どのフレームワークを用いるかは開発者によります


37

中間メッセージ


module.exports = { handlers: { testButton: function(messageObj, session, send, finished){ session.data.$(‘foo’).value = ‘bar’ send({ type: ‘intermediate’, foo: ‘bar’, date: new Date().toString() }); finished({ ok: ‘testButton message was processed successfully!’ }); } }};


受信メッセージの type をオーバーライドしている

38



39




EWD.on(‘ewd-registered’, function() { EWD.on(‘intermediate’, function(responseObj) { $(‘#content’).text(responseObj.message.date); });

$(‘#testBtn’).on(‘click’, function(e) {　　　　 var message = {type: ‘testButton’}; EWD.send(message, function(messageObj) { $(‘#content’).append(‘<br />’ + messageObj.messag.ok); }); }); }); EWD.start(‘demo1’, $, io);});

Pub/Sub ハンドラーを用いて、中間メッセージのインスタンスを処理しています

40




EWD.on(‘ewd-registered’, function() { EWD.on(‘intermediate’, function(responseObj) { $(‘#content’).text(responseObj.message.date); });

$(‘#testBtn’).on(‘click’, function(e) {　　　　 var message = {type: ‘testButton’}; EWD.send(message, function(messageObj) { $(‘#content’).append(‘<br />’ + messageObj.messag.ok); }); }); }); EWD.start(‘demo1’, $, io);});

<div id=“content”> タグの内側のテキストに応答メッセージを接続しています

41



Software

EWD 3トレーニングコース#7 ewd-xpressメッセージ・パターンを適用する