EWD 3トレーニングコース#13 全てをひとつにまとめてewd-xpressで稼働させてみる

EWD 3
トレーニング・コース #13
全てをひとつにまとめて
ewd-xpressで稼働させてみる
M/Gateway Developments Ltd.
Rob Tweed
訳: 日本ダイナシステム株式会社嶋芳成
GT.M版編集: 澤田潔
※ 本稿オリジナルはCache’向けとして編纂

すべてをひとつにまとめて動かす
• これ以降の例題のコードを切り貼りしてください
• それを動かしてみてください !
2016/9/30 EWD 3 トレーニング・コース #13 2

単純なログインの例 (index.html)
<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/toaster.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/ewd-client.js"></script>
<script src="app.js"></script>
<table id="loginForm">
<tr>
<td>Username:</td>
<td><input type="text" id="username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="password" /></td>
</tr>
<tr>
<td colspan="2">
<button id="loginBtn">Login</button>
</td>
</tr>
</table>
<br /><br />
<button id="testBtn">Click Me</button>
</body>
</html>
2016/9/30 EWD 3 トレーニング・コース #13 3

単純なログインの例 (app.js)
$(document).ready(function() {
EWD.log = true;
EWD.on('ewd-registered',function() {
EWD.on('error',function(responseObj) {
toastr.error(responseObj.message.error);
});
EWD.on('intermediate',funciton(responseObj) {
toaster.info('intermediate response:' +
responseObj.message.date);
});
$('#testBtn').on('click',function(e){
var message= {type: 'testButton'};
EWD.send(message, function(responseObj) {
if(!responseObj.message.error) {
toastr.info(JSON.stringify(responseObj.message));
}
});
});
$('#loginBtn').on('click', function(e) {
var username = $('#username').val();
if (username === '') {
toastr.error('You must enter a username');
return;
}
var password = $('#password').val();
if (password === '') {
toaster.error('You must enter a password');
return;
}
var message = {
type: 'login',
params: {
username: username,
password: password
}
};
EWD.send(message.function(responseObj) {
if (!responseObj.message.error)
$('#loginForm').hide();
});
});
});
EWD.start('demo1', $, io);
});
2016/9/30 EWD 3 トレーニング・コース #13 4

単純なログインの例 (demo1.js)
function checkLogin(username,password){
//現状はハードコード版
if (username !== 'rob') return {error: 'Invalid
username'};
if (password !== 'secret') return {error: 'Invalid
password'};
return {ok: true}
}
module.export = {
handlers: {
login: function(messageObj, session, send, finished){
if (session.authenticated) {
finished({error: 'You are already logged in'});
return;
}
var username = messageObj.params.username;
finished({error: 'You must enter a username'});
return;
}
var password = messageObj.params.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});
}
},
testButton: function(messageObj, session, send,
finished) {
if (!session.authenticated) {
finished({error: 'You are not yet logged in!'});
return;
}
send({
type: 'intermediate',
foo: 'bar',
date: new Date().toString()
});
finished({
ok: "testButton message was processed successfully!"
});
}
}
};
2016/9/30 EWD 3 トレーニング・コース #13 5

ログアウトを加え、さらに洗練させたものにします
2016/9/30 EWD 3 トレーニング・コース #13 6

ログインの例 v2 (index.html)
<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/toaster.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/ewd-client.js"></script>
<script src="app.js"></script>
<table id="loginForm">
<tr>
<td>Username:</td>
<td><input type="text" id="username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="password" /></td>
</tr>
<tr>
<td colspan="2">
<button id="loginBtn">Login</button>
</td>
</tr>
</table>
<br /><br />
<button id="testBtn">Click Me</button>
<br /><br />
<button id ="logoutBtn">Logout</button>
</body>
</html>
2016/9/30 EWD 3 トレーニング・コース #13 7

ログインの例 v2 (app.js)
$(document).ready(function() {
EWD.log = true;
//ユーザーが安全にログインできるようになるまでフォームを隠す
$('#logoutBtn').hide();
EWD.on('ewd-registered',function() {
EWD.on('error',function(responseObj) {
toastr.error(responseObj.message.error);
});
EWD.on('intermediate',funciton(responseObj) {
toaster.info('intermediate response:' + responseObj.message.date);
});
$('#testBtn').on('click',function(e){
var message= {type: 'testButton'};
EWD.send(message, function(responseObj) {
if(!responseObj.message.error) {
toastr.info(JSON.stringify(responseObj.message));
}
});
});
$('#loginBtn').on('click', function(e) {
var username = $('#username').val();
toastr.error('You must enter a username');
return;
}
var password = $('#password').val();
toaster.error('You must enter a password');
return;
}
var message = {
type: 'login',
params: {
username: username,
password: password
}
};
EWD.send(message.function(responseObj) {
if (!responseObj.message.error) {
$('#logoutBtn').show()
}
});
});
$(‘#logoutBtn).on(‘click’, function(e) {
EWD.disconnectSocket();
});
EWD.on(‘socketDisconnected’, function() {
tostr.info(‘You have been logged out’);
setTimeout(function() {
//新しくきれいなセッションを開始するために index.html をリロードする
location.reload();
},1000);
});
//安全にログインできるようになったのでフォームを表示する
$(‘#loginForm’).show();
});
EWD.start('demo1', $, io);
});
2016/9/30 EWD 3 トレーニング・コース #13 8

ログインの例 v2 (demo1.js)
username'};
password'};
return {ok: true}
}
module.export = {
handlers: {
return;
}
return;
}
return;
}
var status = checkLogin.call(this,username,password);
if (status.ok) {
session.timeout = 3600;
session.updateExpiry();
}
else {
}
},
finished) {
return;
}
send({
foo: 'bar',
});
finished({
});
}
}
};
2016/9/30 EWD 3 トレーニング・コース #13 9
セッション・タイ
ムアウトと終了
時刻を更新

username'};
password'};
return {ok: true}
}
module.export = {
handlers: {
return;
}
return;
}
return;
}
if (status.ok) {
}
else {
}
},
finished) {
return;
}
send({
foo: 'bar',
});
finished({
});
}
}
};
2016/9/30 EWD 3 トレーニング・コース #13 10
call を使うので this
は checkLogin() 内
の文脈のことです

EWD 3トレーニングコース#13 全てをひとつにまとめてewd-xpressで稼働させてみる

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Viewers also liked

Viewers also liked (19)

More from Kiyoshi Sawada

More from Kiyoshi Sawada (18)

EWD 3トレーニングコース#13 全てをひとつにまとめてewd-xpressで稼働させてみる