EWD 3トレーニングコース#14 ewd-xpressメッセージ用にAjaxを用いる
-
Upload
kiyoshi-sawada -
Category
Software
-
view
24 -
download
3
Transcript of 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>
2016/9/7 EWD 3 トレーニング・コース #14
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, $);});
2016/9/7 EWD 3 トレーニング・コース #14
8
実行してみましょう
2016/9/7 EWD 3 トレーニング・コース #14
9
Ajax による中間メッセージ
• HTTP は、 1 回の要求にただ 1 つの応答を必須としています• バックエンドのハンドラーは、1つの応答の
ためには finished() を用います• これでワーカー・プロセスが解放されるのを保証
します
• send() 関数は使えなくなり無視されます• 従って、ブラウザのコンソール・ログには中
間メッセージは現れません
2016/9/7 EWD 3 トレーニング・コース #14
10
メッセージ特定の Ajax• Ajax を用いるには、 WebSocket が有効で
あっても、特定のメッセージを Ajax で使うことを指定することもできます
2016/9/7 EWD 3 トレーニング・コース #14
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, $);});
2016/9/7 EWD 3 トレーニング・コース #14
12
実行してみましょう
2016/9/7 EWD 3 トレーニング・コース #14
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’ }) } } };
2016/9/7 EWD 3 トレーニング・コース #14
標準のハンドラーのパターンですが、 send() は使えません
14
実行してみましょう
2016/9/7 EWD 3 トレーニング・コース #14
15
Ajax の依存性
• ここで記載している組み込みの振る舞いは、ブラウザに読み込んでいる jQuery に依存しています• jQuery は必要不可欠ではありません• Ajax インターフェース機能を提供するフレー
ムワークであれば、好みのものを使っても同様に統合可能です
2016/9/7 EWD 3 トレーニング・コース #14
16
EWD.start()• EWD.start(appName, $, io, customAjaxFn, url)
2016/9/7 EWD 3 トレーニング・コース #14
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});
2016/9/7 EWD 3 トレーニング・コース #14
複数の引数を使う場合、その位置ではなく1つのオブジェクトを引数として使う方がきれいです
そうでなければ、それらをオブジェクトの中で定義しない方が良いでしょう
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); } }); }});
2016/9/7 EWD 3 トレーニング・コース #14