元来ブラウザはデータをサーバーから取ってくるので、ブラウザでチャットプログラムを書こうと思ったらポーリングをする必要がある。
それだとサーバーに未読のメッセージがないのにクライアントからサーバーに余分な通信が発生する。
また、できるだけリアルタイムにデータを取得するためにはポーリング間隔を短くする必要がある。そうするとさらに余分な通信が発生する。
COMET技術はあるものの標準的な仕様にはなっていない。
HTML5が今後、標準仕様になっていくことは確実の今となっては、リアルタイム性が要求されるWEBプログラムは仕様の一部のWebSocketを使用するのは当たり前な流れだろう。
Meteorは、まさにそのようなプログラムを書くのにうってつけのフレームワークと思う。
ただ、リアルタイム性が要求されるWebシステムってあまりないような気がする。
フルスタックなので、思いつきでプログラムを書くのにはよいが、サーバーやDBMSを代えなくては 非機能要件が満たせない場合の足枷になる場合もある。
しかし開発環境構築からDeployの容易性やプログラムの修正が即座にブラウザに反映されるなど、目からうろこの機能がある。
Node.jsが動作しているので、サーバーサイドもJavascriptで書けるのは技術者の確保をしやすいかも。しかし、Javaなどの言語と比べるとデバッグ環境が少ない。
チャットの簡単なプログラムを書いてみた。
まずはローカル実行環境構築だか、恐ろしいほど簡単。
Linuxに CentOS6.2 で以下のコマンドを打つだけ。
curl install.meteor.com | sh
これで自分のPCにMeteorの実行環境ができた。
それでは、mysterytripというプログラムを作っていこう。
meteor create mysterytrip
これでカレントディレクトリ配下にmysterytripというディレクトリができた。
cd mysterytrip
ここにmysterytripという名前のjavascript、html、cssの計3つのファイルができている。
早速このプログラムを起動してみよう。
meteor
これで実行された。
ブラウザでhttp://localhost:3000/と打つと画面にHello World!が表示される。
ここまではなんてことない。
mysterytrip.htmlを開きHello WorldをMystery Tripに変更して保存するとブラウザをリロードしなくてもMystery Tripと表示されるではないか。
データだけでなくコードもリアルタイムに反映される。素晴らしい。
まずはログイン領域を作成する。ユーザー名入力項目と、入室ボタンを配置し、入室ボタンを押すとチャットルームに入れるようにする。
入室中は、ユーザー名は表示専用項目にして、入室ボタンは退室と表示させる。
入室中に退室ボタンを押すと初期画面に戻る。
まずはjavascriptを書く。
ログインしているかをセッションにloginNameというキーの値があるかどうかで判断させる。
isLogin = function(){
var loginName = Session.get("loginName");
return = typeof loginName !== "undefined" && loginName !== null;
}
Template.login.loggedin = function(){
return isLogin();
}
login領域のloginNameに、ログインしていればセッションにあるloginNameキーの値を設定する。Template.login.loginName = function(){
var loginName = Session.get("loginName");
loginName = isLogin() ? loginName : null;
return loginName;
}
ログインしているかどうかで入室ボタンの表示を変える。
Template.login.enter = function(){
var enter = isLogin() ? "退室" : "入室";
return enter;
}
また入室ボタンを押した時の処理
Template.login.events = {
"click #enter": function(event){
var loginName = Session.get("loginName");
Session.set("loginName", isLogin() ? null : $("#loginName").val());
}
}
次はhtmlテンプレート
<head>
<title>mystery trip</title>
</head>
<body>
<h1>Mystery Trip</h1>
{{>login}}
</body>
<template name="login">
<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>
</template>
templateのloginでloggedinがtrueの時（#if）はスタティックでログイン名を表示する。loggedinがfalseの時（#unless）は入力項目を表示する。
まずは入室と退室ができるところまで作成。
0 件のコメント:
コメントを投稿