以下の環境を例に説明します。
- Node.js v0.8.16
- npm - express v3.0.6
- npm - socket.io v0.9.13
Node.js / npm がインストールされていない場合は、本ブログのこちらの記事を参考ください。
今回は express コマンドでの雛形生成は使わずに手動で作成してみます。アプリケーションディレクトリを作成し、同ディレクトリ直下に移動します。
% cd /path/to/node/project
% mkdir chat
% cd chat./package.json を作成して、npm install で依存パッケージ express(3.0.6) と socket.io(0.9.13) をローカルインストールしてみます。
% vim package.json
....
% cat package.json
{
"name": "chat",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app"
},
"dependencies": {
"express": "3.0.6",
"socket.io": "0.9.13"
}
}
% npm install
....
% ls node_modules
express socket.ioapp.js を作成します。public/ 以下のファイルを静的配信するだけのWebサーバ に、Socket.IO のメッセージ送受信を加えただけのシンプルなアプリケーションです。
var express = require('express')
, http = require('http')
, path = require('path');
var app = express();
app.configure(function() {
app.set('port', process.env.PORT || 3000);
app.use(express.static(path.join(__dirname, 'public')));
});
var server = http.createServer(app).listen(app.get('port'), function() {
console.log("Express server listening on port " + app.get('port'));
});
var socketio = require('socket.io').listen(server);
socketio.on('connection', function(client) {
client.on('send', function(event) { // クライアントから send イベントを受信した時
client.emit('push', event.message); // クライアントに push イベントを送信
client.broadcast.emit('push', event.message); // 他クライアントにも push イベントを送信
});
});
チャット画面の public/chat.html を作成します。
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO Chat</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script>
(function($) {
$(function() {
var socket = new io.connect("/");
socket.on("push", function(data) {
$("<li>").text(data).prependTo($("#jsMessageBox > ul"));
});
$("#jsMessageForm").on('submit', function() {
var str = $("#jsMessageInput").val();
if (str != "") {
socket.emit("send", { message: str });
$("#jsMessageInput").val("");
}
return false;
});
});
})(window.jQuery);
</script>
</head>
<body>
<form id="jsMessageForm">
<input type="text" id="jsMessageInput">
<input type="submit" value="Send">
</form>
<div id="jsMessageBox">
<ul></ul>
</div>
</body>
</html>node app でサーバを起動します。
% node app
Express server listening on port 3000
http://(HTTP_HOST):3000/chat.html でチャットアプリケーションを確認できます
