読者です 読者をやめる 読者になる 読者になる

NodeとExpress3と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