Meteor入門(3)スマホでもキレイな簡単チャット

トップページにもサンプルへのリンクを貼っていますが、
そちらのchatのソースコードを掲載しておきます。
基本的には前回のマスタメンテと変わっていません。少し形を整えたのと、
スマートフォンでもキレイに見れるようにjQueryMobileを利用しているくらいです。

webchat.html

<head>
  <title>webchat</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" />
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body>
	  {{> editview}}
	  {{> listview}}
</body>

<template name="editview">
<div data-role="header">
<input type="button" id="delete" name="delete" value="履歴削除"> easy chat 
</div>
<div data-role="content">
  <table>
	  <tr>
		  <th>
		    <label>名前</label>
		  </th>
		  <td>
		    <input type="text" id="contributor" name="contributor" size="40" style="ime-mode: disabled;">
		  </td>
	  </tr>
	  <tr>
		  <th>
		    <label>内容</label>
		  </th>
		  <td>
		    <textarea id="voice" name="voice" rows="" cols="40"></textarea>
			  <input type="button" id="mention" name="mention" value="発言"><br>
		  </td>
	  </tr>
  </table>
</template>

<template name="listview">
	<table border="0">
	{{#each logList}}
	{{> log }}
	{{/each}}
	</table>
</div>
<div data-role="footer">

</div>
</template>

<template name="log">
<tr>
	<td>
	{{contributor}}
	</td>
	<td>
	=>
	</td>
	<td>
	{{voice}}
	</td>
	<td>
	({{date}})
	</td>
</tr>
</template>

webchat.js

//チャット履歴を作成
LogList = new Meteor.Collection("loglist");

//クライアント側処理
if (Meteor.isClient) {
 //登録部
  Template.editview.events({
    'click #mention' : function(){
        var date = new Date();
        //ここはちゃんとフォーマットライブラリを使おう
        var dateStr =  (eval(date.getMonth()) + 1) + "/" + date.getDate() +
         " " + date.getHours() + ":" + date.getMinutes() + ":" +  
         date.getSeconds();
        var log =  {contributor : jQuery("#contributor").val(),
                    voice : jQuery("#voice").val(),
                    date : dateStr, time : date.getTime()};
    
        LogList.insert({contributor:log.contributor, voice:log.voice, 
                        date:log.date, time:log.time});
        jQuery("#voice").val("");
    },
    'click #delete' : function(){
        LogList.remove({});
    }
  });
  
  //リスト部
  Template.listview.events({
    
  });
  
  Template.listview.logList = function(){
    //mteorでlimitは未実装?使えない。メテオなのにリミットブレイクが使えない...
    return LogList.find({}, {sort: {time: -1}});
  }
  
}


//サーバ側処理
if (Meteor.isServer) {

  Meteor.startup(function () {
    
  });
  
}

次回はこれにセッション管理を追加していきます。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中