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

EWD 3
トレーニング・コース #14
ewd-xpress メッセージ用に
Ajaxを用いる
M/Gateway Developments Ltd.
Rob Tweed
訳: 日本ダイナシステム株式会社嶋芳成
GT.M版編集: 澤田潔
※ 本稿オリジナルはCache’向けとして編纂

メッセージにAjaxを用いる
• ewd-xpress はメッセージ通信に WebSocket と
Ajax の両方をサポートしています
• Ajax とはメッセージについて
• 要求(リクエスト)は HTTP で送り
• 応答(レスポンス)は HTTP response として受けます
• 何故 Ajax か?
• 大規模システムでは、よりスケーラブルだと思われます
• よく知れ渡ったプロトコルなので、ネットワーク管理者はこれ
の方を好むかもしれません
2016/9/30 EWD 3 トレーニング・コース #14 2

メッセージにAjaxを用いる
• Ajax／HTTP
• メッセージはクライアントのみから発せられます
• バックエンドは要求に対する応答としてしかクライアントにメッ
セージを送ることができません
• 要求は常に応答を返さなくてはなりません
• WebSocket
• バックエンドは先立つ要求がなくてもクライアントにいつでも
メッセージが送信できます
• ポーリングは不要です
• “リアルタイム” の振る舞いです
• より速い通信手順として成長している証拠があります
2016/9/30 EWD 3 トレーニング・コース #14 3

ewd-xpress で Ajax を使う方法
• 全体として
• Socket.io をブラウザに読み込みません
• そして/または EWD.start() の引数から io を取り除きま
す
• メッセージ特定
• メッセージ・オブジェクトにプロパティを追加します
• バックエンドのロジックを変更する必要はありません
• バックエンドやワーカーを再起動する必要もありません
2016/9/30 EWD 3 トレーニング・コース #14 4

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/30 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=“/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/30 EWD 3 トレーニング・コース #14 6

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/30 EWD 3 トレーニング・コース #14 7

実行してみましょう
2016/9/30 EWD 3 トレーニング・コース #14 8

Ajax による中間メッセージ
• HTTP は、1回の要求にただ1つの応答を必須として
います
• バックエンドのハンドラーは、１つの応答のためには
finished() を用います
• これでワーカー・プロセスが解放されるのを保証します
• send() 関数は使えなくなり無視されます
• 従って、ブラウザのコンソール・ログには中間メッセージは
現れません
2016/9/30 EWD 3 トレーニング・コース #14 9

メッセージ特定のAjax
• Ajax を用いるには、WebSocket が有効であっても、
特定のメッセージを Ajax で使うことを指定することも
できます
2016/9/30 EWD 3 トレーニング・コース #14 10

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/30 EWD 3 トレーニング・コース #14 11

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

バックエンドのハンドラーを追加す
• ~/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/30 EWD 3 トレーニング・コース #14 13
標準のハンドラーのパターンで
すが、send()は使えません

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

Ajax の依存性
• ここで記載している組み込みの振る舞いは、ブラウザに
読み込んでいる jQuery に依存しています
• jQuery は必要不可欠ではありません
• Ajaxインターフェース機能を提供するフレームワークで
あれば、好みのものを使っても同様に統合可能です
2016/9/30 EWD 3 トレーニング・コース #14 15

EWD.start()
• EWD.start(appName, $, io, customAjaxFn, url)
2016/9/30 EWD 3 トレーニング・コース #14 16
appName = 登録するアプリケーションの名前
$ = jQueryオブジェクト(もし使うなら)
io = Socket.ioオブジェクト(もしWebSocketを使う
なら)
customAjaxFn = 代替のAjaxハンドラ関数 (もしjQuery以外の
別のフレームワークを使うなら)
url = 例えば React Nativeのようなブラウザでは
ないクライアントを使う場合

EWD.start()
EWD.start({
application: appName,
$: $,
io: io,
ajax: function(params, success, failure){...},
url: url
});
2016/9/30 EWD 3 トレーニング・コース #14 17
複数の引数を使う場合、その位置ではなく１つのオ
ブジェクトを引数として使う方がきれいです
そうでなければ、それらをオブジェクトの中で定義しな
い方が良いでしょう

独自の 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/30 EWD 3 トレーニング・コース #14 18

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

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

Similar to EWD 3トレーニングコース#14 ewd-xpressメッセージ用にAjaxを用いる (19)

More from Kiyoshi Sawada

More from Kiyoshi Sawada (11)

Recently uploaded

Recently uploaded (6)

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