タグ別アーカイブ: node.js

Grunt の同名タスクをファイル分割する

| コメントをどうぞ

12月ですね。
12月と言えば、そう私たち会社人にとって避けては通れない忘年会のシーズンですね。
γ-GTPの上昇には気をつけて!

・・・くりすます?
なんですかそれは?

どうもDiceK Mikamiです。
デジャブ?

ここ最近はGruntを使ってグルグルしています。
(@д@)←こんな状態。
なので、Gruntに関して書いてみたいと思います。
続きを読む

[Windows]node.js(0.8)+express(3.0)+ejs+socket.ioを使ったサンプルアプリを動かすまでのメモ

| 1件のフィードバック

調べる機会があったのでメモ。

expressが3になってから微妙に仕様が変わっているようで、過去のサンプルが動かなかったりしたのでまとめておきます。

以下環境。

  • Windows XP
  • node.js(0.8.4)
  • express(3.0.0rc1)
  • socket.io(0.9.8)

node.jsのダウンロード・インストール

公式サイトからWindows Installerをダウンロード。インストーラを起動します。

やることはライセンスに同意するだけ。インストール先を選ぶ余地もありません。

コマンドプロンプトで以下を入力し、インストールされたことを確認します。node.exeは環境変数pathに勝手に追加されています。

> node -v

v0.8.4

expressのインストール

コマンドプロンプトで以下を入力。最新版がインストールされます。-gを忘れずに。

> npm install express -g

以下のコマンドでインストールされたことを確認します。

> express –version

3.0.0rc1

バージョンを指定したい場合は、express@バージョン のように指定してやるといいです。

expressでアプリの雛形を作る

どこか適当なディレクトリに移動し、コマンドプロンプトで以下を入力。アプリケーションの雛形が作成されます。

> express -tejs mynodeapp

-tejsは、使用するテンプレートエンジンの指定です。HTMLライクに書けるejsを指定しています。(デフォルトはjade)

-tとejsの間にスペースは入れないでください。スペースが入るとjadeになります。どうもこれはWindowsだけっぽい。

mynodeappは作成するアプリケーション名です。

利用するnodeモジュールのインストール

mynodeappフォルダに移動し、コマンドプロンプトで以下を入力。アプリで利用するモジュールをインストールします。

mynodeapp > npm install express ejs socket.io

socket.ioはここでインストールされます。

サンプルアプリの作成

この時点でアプリを起動可能ですが、Welcome to Express!しか出ない味気ものなのでサンプルアプリを作ってみます。まあよくある簡単なチャットアプリです。

以下の2ファイルを修正します。

mynodeapp/app.js

/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')

//*************(中略) *************//

/* コメントアウトします
http.createServer(app).listen(app.get('port'), function(){
 console.log("Express server listening on port " + app.get('port'));
});
*/

/** 以下を追記します **/
var server = http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
var socket = require('socket.io').listen(server);
socket.on('connection', function(client) {
 client.on('message', function(event){
   // クライアントからのメッセージをコンソールに出力
   console.log(event.message);
   // 送信元へメッセージ送信
   client.emit('message', event.message);
   // 送信元以外の全てのクライアントへメッセージ送信
   client.broadcast.emit('message', event.message);
  });
});

mynodeapp/views/index.ejs

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
 <link rel='stylesheet' href='/stylesheets/style.css' />

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript" src="/socket.io/socket.io.js"></script>
 <script>
 $(function(){
 var socket = new io.connect("/");

 socket.on("connect", function(){
 $("#transportName").text("connect via " + socket.socket.transport.name);// 接続時に接続方式表示
 });

 socket.on("message", function(message){
 $("<li>").text(message).prependTo($("#messageArea ul"));// 受信メッセージをレンダリング
 });

 $("#submitButton").click(function(event){
 socket.emit("message", {message: $("#msg").val()});// 入力メッセージをサーバへ
 });
 });
 </script>
 </head>
 <body>
 <div id="transportName"></div>
 <input id="msg">
 <input id="submitButton" type="button" value="submit!">
 <div id="messageArea">
 <ul></ul>
 </div>
 </body>
</html>

サンプルアプリを動かす

mynodeapp直下で、コマンドプロンプトから以下を入力。アプリが起動します。

mynodeapp > node app

ポート3000で起動するので、ブラウザで http://localhost:3000 にアクセスします。

動いた

他のブラウザから参照しても入力メッセージが表示されるはず。

その他

  • express 2.5と違ってlayout.ejsが消えてる。部分テンプレートはexpress-partialsモジュールを使うらしい
  • node.jsのホスティングサービスまわりをちょっと調べているので、次はそれを書くかも。