はじめに

前回の続き。
Socket.IO を使えるページを作成することが目標。

手順

前回で、サーバディレクトリ（アプリ）名を helloWorld にしたものとする。
テンプレートエンジンは ejs にしたものとする。

Socket.IO のインストール

helloWorld ディレクトリで以下を叩く。

npm install --save socket.io

View の作成

以下のファイルを helloWorld\views に作成。

socket.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="/javascripts/client.js"></script>
  </head>
  <body>
    <form action="">
      <input id="m" type="text"/>
      <br />
      <button type="submit">SUBMIT</button>
    </form>
    <hr />
    <ul id="messages"></ul>
  </body>
</html>

ルーティングの追加

helloWorld\app.js を以下のように修正。

app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');
// ここから追加
var socket = require('./routes/socket');
// ここまで追加

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);
// ここから追加
app.use('/socket', socket);
// ここまで追加

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

以下のファイルを helloWorld\routes に作成。

socket.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('socket', { title: 'socket.io test' });
});

module.exports = router;

ソケット通信処理の実装

emit() で送れる。
on() で受け取れる。

サーバ側

helloWorld\bin\www を以下のように修正。

www

# !/usr/bin/env node
var debug = require('debug')('helloWorld');
var app = require('../app');

app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
  debug('Express server listening on port ' + server.address().port);
});

// ここから追加
var io = require('socket.io').listen(server);
io.sockets.on('connection', function (socket) {

  console.log('a user connected');

  socket.on('message', function(msg){
    console.log('message: ' + msg);
    io.emit('message', 'You said "' + msg + '".');
  });

  socket.on('disconnect', function(){
    console.log('user disconnected');
  });

});
// ここまで追加

クライアント側

helloWorld\public\javascripts に以下のファイルを作成。

client.js

$(function () {
    var socket = io();

    $('form').submit(function () {
        socket.emit('message', $('#m').val());
        $('#m').val('');
        return false;
    });

    socket.on('message', function (msg) {
        $('#messages').append($('<li>').text(msg));
    });
});

つないでみよう

node .\bin\www

http://localhost:3000/socket
テキストボックスに入力し "SUBMIT" を押すと返事してくれる。

おわりに

感想

Windows 環境の資料が少なすぎる。

今後

導入は終わったので、いろいろ遊ぶ。