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

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

Please download to get full document.

View again

of 12
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information
Category:

Software

Publish on:

Views: 2 | Pages: 12

Extension: PDF | Download: 0

Share
Transcript
  • 1. EWD 3 トレーニング・コース #11 ewd-xpress でのエラー処理 M/Gateway Developments Ltd. Rob Tweed 訳: 日本ダイナシステム株式会社 嶋 芳成 GT.M版編集: 澤田 潔 ※ 本稿オリジナルはCache’向けとして編纂
  • 2. バックエンドのエラー応答 • 例 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/30 EWD 3 トレーニング・コース #11 2
  • 3. エラー応答のブラウザでの処理 • EWD.send() コールバック関数による単純な処理 EWD.send(messageObj, function(responseObj) { if (responseObj.message.error) { // responseObj.message.error の値を表示する } else { // エラーでない場合 } }); 2016/9/30 EWD 3 トレーニング・コース #11 3
  • 4. エラー応答のブラウザでの処理 • Pub/Sub ハンドラによる単純な処理 EWD.on(‘someMsgType’, function(responseObj) { if (responseObj.message.error) { // responseObj.message.error の値を表示する } else { // エラーでない場合 } }); 2016/9/30 EWD 3 トレーニング・コース #11 4
  • 5. エラー応答のブラウザでの処理 • 組み込みの error イベント・ハンドラーの利用 EWD.on(‘error’, function(responseObj) { // あらゆる応答が返されたときに error が起こるといつでも、発火する // responseObj.message.error の値を表示する // error が生成するメッセージ type は responseObj.type 内に存在する }); 2016/9/30 EWD 3 トレーニング・コース #11 5
  • 6. ブラウザ内にエラーを表示する • 開発に用いる技術による • 最も雑な技術は alert(errorText) • ブロックされる可能性があります • 有用なライブラリは toastr • https://codeseven.github.io/toastr/ • ブロックされないポップアップメッセージを表示され、数秒後に は自動的に消えます • 統合は非常に簡単です 2016/9/30 EWD 3 トレーニング・コース #11 6
  • 7. 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/30 EWD 3 トレーニング・コース #11 7
  • 8. 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/30 EWD 3 トレーニング・コース #11 8
  • 9. テスト用エラー・メッセージを作る • ~/ewd3/node_modules/demo1.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/30 EWD 3 トレーニング・コース #11 9
  • 10. 実行してみましょう 2016/9/30 EWD 3 トレーニング・コース #11 10
  • 11. 実行してみましょう エラーが返されるたび、毎回 toastr のエラー・ポップアップが自動 的に表示されるようになります 2016/9/30 EWD 3 トレーニング・コース #11 11
  • 12. toastr は他の場合にも手軽です • 表示する • 警告 • toastr.warning(text) • 情報提供 • toastr.success(text) • toastr.info(text) • 参照: https://github.com/CodeSeven/toastr 2016/9/30 EWD 3 トレーニング・コース #11 12
  • We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks