EWD 3トレーニングコース#11 ewd-xpressでのエラー処理

EWD 3
トレーニング・コース #11
ewd-xpress でのエラー処理
M/Gateway Developments Ltd.
Rob Tweed
訳: 日本ダイナシステム株式会社嶋芳成

バックエンドのエラー応答
• 例
login: function(messageObj, session, send, finished) {
if (session.authenticated) {
finished({error: ‘You are already logged in!’});
return;
}
var username = messageObj.params.username;
if (username === ‘’) {
finished({error: ‘You must enter a username’);
return;
}
if (password === ‘’) {
finished({error: ‘You must enter a password’);
return;
}
// 認証データベースを用いてユーザー名とパスワードを検討する
var status = checkLogin(username, password); //これで実行できる
if (status.ok) {
session.authenticated = true;
finished({ok: true});
}
else {
finished({error: status.error}); //ログイン失敗の理由を伝えるエラー・メッセージを返す
}
}
2016/9/5 EWD 3 トレーニング・コース #11 2

エラー応答のブラウザでの処理
• EWD.send() コールバック関数による単純な処理
EWD.send(messageObj, function(responseObj) {
if (responseObj.message.error) {
// responseObj.message.error の値を表示する
}
else {
// エラーでない場合
}
});
2016/9/5 EWD 3 トレーニング・コース #11 3

• Pub/Sub ハンドラによる単純な処理
EWD.on(‘someMsgType’, function(responseObj) {
if (responseObj.message.error) {
}
else {
// エラーでない場合
}
});
2016/9/5 EWD 3 トレーニング・コース #11 4

• 組み込みの error イベント・ハンドラーの利用
EWD.on(‘error’, function(responseObj) {
// あらゆる応答が返されたときに error が起こるといつでも、発火する
// error が生成するメッセージ type は responseObj.type 内に存在する
});
2016/9/5 EWD 3 トレーニング・コース #11 5

ブラウザ内にエラーを表示する
• 開発に用いる技術による
• 最も雑な技術は alert(errorText)
• ブロックされる可能性があります
• 有用なライブラリは toastr
• https://codeseven.github.io/toastr/
• ブロックされないポップアップメッセージを表示され、数秒後に
は自動的に消えます
• 統合は非常に簡単です
2016/9/5 EWD 3 トレーニング・コース #11 6

index.html に toastr を読み込む
<html>
<head>
<title>Demo ewd-xpress application</title>
<link href=“//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css” rel=“stylesheet” />
</head>
<body>
<script src=“//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script>
<script src=“//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.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”>Cllick Me</button>
<div id=“content”>
Content goes here
</div>
</body>
</html>
2016/9/5 EWD 3 トレーニング・コース #11 7

app.js を編集する
$(document).ready(function(){
EWD.log = true;
EWD.on('ewd-registerd',function(){
EWD.on('error', function(responseObj) {
toastr.error(responseObj.message.error);
});
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(e) {
var message = {type: 'testButton'};
EWD.send(message, function(messageObj) {
$('#content').append('<br />' + messageObj.message.ok);
}):
});
});
EWD.sart('demo1', $, io);
});
2016/9/5 EWD 3 トレーニング・コース #11 8

テスト用エラー・メッセージを作る
• C:ewd3node_modulesdemo1.js
module.exports = {
handlers: {
testButton: function(messageObj, session, send, finished) {
session.data.$(‘foo’).value = ‘bar’;
send({
type: ‘intermediate’
foo: ‘bar’
date: new Date().toString()
});
finished({
error: ‘This is a test error!’
});
}
};
これで、ボタンをクリックするとエラーが返されるようになります
2016/9/5 EWD 3 トレーニング・コース #11 9

実行してみましょう
2016/9/5 EWD 3 トレーニング・コース #11 10

実行してみましょう
エラーが返されるたび、毎回 toastr のエラー・ポップアップが自動
的に表示されるようになります
2016/9/5 EWD 3 トレーニング・コース #11 11

toastr は他の場合にも手軽です
• 表示する
• 警告
• toastr.warning(text)
• 情報提供
• toastr.success(text)
• toastr.info(text)
• 参照: https://github.com/CodeSeven/toastr
2016/9/5 EWD 3 トレーニング・コース #11 12

EWD 3トレーニングコース#11 ewd-xpressでのエラー処理

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

More from Kiyoshi Sawada

More from Kiyoshi Sawada (20)

EWD 3トレーニングコース#11 ewd-xpressでのエラー処理