送信領域はログインした時のみ表示する。
メッセージ送信領域はメッセージ入力領域と送信ボタンを配置し、送信ボタンを押すとメッセージがデータベースに登録される。
メッセージ表示領域はデータベースに登録されたメッセージを全て表示する。
まず、messagesというコレクションを宣言する。RDBMSのように、予めテーブルやフィールドを作成する必要はない。
Messages = new Meteor.collection("messages");
Template.login.events = {
...
"click #send": function(event){
var message = $("#message").val();
var loginName = Session.get("loginName");
Messages.insert({userName: loginName, message: message, postTime: new Date().toString()});
}
...
"click #send": function(event){
var message = $("#message").val();
var loginName = Session.get("loginName");
Messages.insert({userName: loginName, message: message, postTime: new Date().toString()});
}
}
var messages = Messages.find({}, {sort: {postTime: -1}});
return messages;
}
HTMLテンプレート
<head>
<title>discussion room</title>
</head>
<body>
<h1>Discussion Room</h1>
{{>login}}
{{>messages}}
</body>
<template name="login">
<div>
<div>
<label for="loginName">ユーザー</label>
{{#if loggedin}}
<span>{{loginName}}</span>
{{/if}}
{{#unless loggedin}}
<input id="loginName" type="text">
{{/unless}}
<button id="enter">{{enter}}</button>
</div>
{{#if loggedin}}
<div>
<input id="message" type="text">
<button id="send">送信</button>
</div>
{{/if}}
</div>
</template>
<template name="messages">
<div>
{{#each messages}}
<div>{{userName}} {{message}} {{postTime}}</div>
{{/each}}
</div>
</template>
2台のPCでブラウザを立ち上げ、このサイトを呼び出す。
両方に別の名前で入室する。一方のPCでメッセージを送信すると、そのメッセージがリアルタイムにメッセージ表示領域に両方に表示される。
0 件のコメント:
コメントを投稿