NodeとＥxpress3とSocket.IOでチャット
ようやく、Express3でチャットサンプルを動作させることができたのでメモる。
Express3では、Socket.ioまわりの扱いが変更になっているので注意。
動作環境
OS: CentOS6.3 64bit
Node.js: v0.8.12
Express: 3.0.0rc5
Socket.io: 0.9.10
Expressアプリを作成する。
テンプレートエンジンは、ejsを使用する。
# express -e chatdemoapp
Socket.IOをインストールする。
# cd chatdemoapp
# npm install socket.io
依存関係を解決する。
# npm install -d
app.jsを修正してサーバ側を実装する。
app.js
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express();
app.configure(function() {
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
// index.ejsで変数portが参照できるように変更
// app.get('/', routes.index);
app.get('/', function(req, res) {
res.render('index', { locals: { port: app.get('port') } });
});
app.get('/users', user.list);
// ここを変更
//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'));
});
// ここからSocket.IO周りの実装を追加 =====>
// Express3では、Http.ServerインスタンスをSocket.IOにアタッチしないとだめみたい
// 参照：http://socket.io/#how-to-use
var io = require('socket.io').listen(server);
io.sockets.on('connection', function(socket) {
console.log('connect');
socket.on('message', function(msg) {
socket.emit('message', msg);
socket.broadcast.emit('message', msg);
});
socket.on('disconnect', function() {
console.log('disconnect');
});
});
// <===== ここまで
// ここ追加
console.log('Server running at http://localhost:' + app.get('port') + '/');
views/index.ejsを修正してクライント側を実装する。
サーバ側でSocket.IOをListenできてれば、クライアントは、/socket.io/socket.io.js
でSocket.IOを参照できるようになる。
views/index.ejs
<!DOCTYPE html>
<html>
<head>
<title>hoge</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.4");</script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">var port = <%= port %>;</script>
<script type="text/javascript" src="/javascripts/client.js"></script>
<link rel='stylesheet' type="text/css" href='/stylesheets/style.css' />
</head>
<body>
<form action="" id="form">
<input type="text" name="message" id="message" />
<input type="submit" />
</form>
<hr />
<dl id="list"></dl>
</body>
</html>
クライアント用のJavaScriptファイルを新規作成する。
public./javascripts/client.js
$(function() {
var socket = io.connect(null, { port: port });
socket.on('connect', function() {
console.log('connect');
});
socket.on('message', function(msg) {
var date = new Date();
$('#list').prepend($('<dt>' + date + '</dt><dd>' + msg + '</dd>'));
});
socket.on('disconnect', function() {
console.log('disconnect');
});
$('#form').submit(function() {
var message = $('#message');
socket.send(message.val());
message.attr('value', '');
return false;
});
});
サーバを起動する。
# node app.js
クライアントから接続する。
ブラウザから、
にアクセスすればOK
