ewd 3トレーニングコース#14 ewd-xpressメッセージ用にajaxを用いる

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

ewd-xpress メッセージ用に

Ajax を用いるM/Gateway Developments Ltd.

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

2

メッセージに Ajax を用いる

• ewd-xpress はメッセージ通信に WebSocket と Ajax の両方をサポートしています• Ajax とはメッセージについて• 要求 ( リクエスト ) は HTTP で送り• 応答 ( レスポンス ) は HTTP response として受

けます

• 何故 Ajax か ?• 大規模システムでは、よりスケーラブルだと思わ

れます• よく知れ渡ったプロトコルなので、ネットワーク

管理者はこれの方を好むかもしれません2016/9/7 EWD 3 トレーニング・コース #14

3

メッセージに Ajax を用いる

• Ajax ／ HTTP• メッセージはクライアントのみから発せられます• バックエンドは要求に対する応答としてしかクラ

イアントにメッセージを送ることができません• 要求は常に応答を返さなくてはなりません

• WebSocket• バックエンドは先立つ要求がなくてもクライアン

トにいつでもメッセージが送信できます• ポーリングは不要です

• “ リアルタイム” の振る舞いです• より速い通信手順として成長している証拠があり

ます2016/9/7 EWD 3 トレーニング・コース #14

4

ewd-xpress で Ajax を使う方法

• 全体として• Socket.io をブラウザに読み込みません• そして / または EWD.start() の引数から io を取

り除きます

• メッセージ特定• メッセージ・オブジェクトにプロパティを追加し

ます

• バックエンドのロジックを変更する必要はありません• バックエンドやワーカーを再起動する必要も

ありません2016/9/7 EWD 3 トレーニング・コース #14

5

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>

2016/9/7 EWD 3 トレーニング・コース #14

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=“/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 を編集する$(document).ready(function() {　　 EWD.log = true; EWD.on(‘ewd-registered’, function() { EWD.on(‘intermediate’, function(responseObj) { $(‘#content’).text(responseObj.message.date); }); EWD.on(‘socketDisconnected’, function() { $(‘#content’).text(‘You have been logged out’); $(‘#testBtn’).hide(); }); $(‘#testBtn’).on(‘click’, function€ { var message = {type: ‘testButton’); EWD.send(message, function(messageObj) { $(‘#content’).appaned(‘<br /> ‘ + messageObj.message.ok); }); }); }); EWD.start(‘demo1, $);});


8

実行してみましょう


9

Ajax による中間メッセージ

• HTTP は、 1 回の要求にただ 1 つの応答を必須としています• バックエンドのハンドラーは、１つの応答の

ためには finished() を用います• これでワーカー・プロセスが解放されるのを保証

します

• send() 関数は使えなくなり無視されます• 従って、ブラウザのコンソール・ログには中

間メッセージは現れません


10

メッセージ特定の Ajax• Ajax を用いるには、 WebSocket が有効で

あっても、特定のメッセージを Ajax で使うことを指定することもできます


11

app.js を編集する$(document).ready(function() {　　 EWD.log = true; EWD.on(‘ewd-registered’, function() { EWD.on(‘intermediate’, function(responseObj) { $(‘#content’).text(responseObj.message.date); }); EWD.on(‘socketDisconnected’, function() { $(‘#content’).text(‘You have been logged out’); $(‘#testBtn’).hide(); }); $(‘#testBtn’).on(‘click’, function€ { var message = {type: ‘testButton’); EWD.send(message, function(messageObj) { $(‘#content’).appaned(‘<br /> ‘ + messageObj.message.ok); }); EWD.send({ type: ‘ajaxTestMsg’, ajax: true }, function(responseObj) { console.log(‘response via Ajax: ‘ + JSON.stringify(responseObj)); }); }); }); EWD.start(‘demo1, $);});


12



13

バックエンドのハンドラーを追加す

• C:\ewd3\node_modules\demo1.js　　 module.exports = { handlers: { testButton: function(messageObj,session,sned,finished) { session.data.$(‘foo’).value = ‘bar’; send({ type: ‘intermediate’, foo: ‘bar’, date: new Date().toString() }); finished({ ok: ‘testButton message was prcessed successfully!’ }); }); ajaxTestMsg: function(messageObj, session, finished){ console.log(‘ajax message processed’); finished({ ok: ‘ajax messge processed successfully’ }) } } };


標準のハンドラーのパターンですが、 send() は使えません

14



15

Ajax の依存性

• ここで記載している組み込みの振る舞いは、ブラウザに読み込んでいる jQuery に依存しています• jQuery は必要不可欠ではありません• Ajax インターフェース機能を提供するフレー

ムワークであれば、好みのものを使っても同様に統合可能です


16

EWD.start()• EWD.start(appName, $, io, customAjaxFn, url)


appName = 登録するアプリケーションの名前$ = jQuery オブジェクト ( もし使うなら )

io = Socket.io オブジェクト ( もし WebSocketを使うなら )

customAjaxFn = 代替の Ajax ハンドラ関数 ( もし jQuery以外の別のフレームワークを使うなら )

url = 例えば React Native のようなブラウザではないクライアントを使う場合

17

EWD.start()EWD.start({ application: appName, $: $, io: io, ajax: function(params, success, failure){...}, url: url});


複数の引数を使う場合、その位置ではなく１つのオブジェクトを引数として使う方がきれいです

そうでなければ、それらをオブジェクトの中で定義しない方が良いでしょう

18

独自の Ajax を使った EWD.start()EWD.start({ application: ‘extJSDemo’, ajax: function(params,success,failure) { console.log(sending message using custom Ajax function for ExtJS’); //ewd-client の Ajax ラッパー関数は情報をひとつのオブジェクトとして求めているので、ここでは ExtJS ようにラップしています Ext.Ajax.request({ url: parsms.url, method: params.type.toUpperCase(), timout: params.timeout, jsonData: params.data, success: function(response.opts) { // 同様に我々は ewd-client の success 関数を、 extJS データにマッピングした後に呼び出します var data = Ext.decod(response.responseText); success(data); }, failure: function(response, opts) { // ここでは、 extJS の失敗テキストを成型しなおした後、 ewd-client の失敗関数を呼び出しています console.log(‘Ajax server-side failure with status code ‘ + response.status); failure(response.responseText); } }); }});


ewd 3トレーニングコース#14 ewd-xpressメッセージ用にajaxを用いる

Software