Express-Generatorで作ったひな形にソケット通信を載せてみる

Socket.IOって何?

WebSocketが使えるようになれるかもしれない。すごい。

早速書いてみる

http://socket.io/docs/ にコード例はあるのだけど、そのままは使えない。Express-Generator(何も考えずにインストールした場合、インストールされるバージョンは4)を使ってひな形を作った場合は、http://socket.io/docs/#using-with-express-3/4 のコードを使えばいいのだけど、ちょっと工夫が必要。

サーバ側

http://qiita.com/mude/items/7395e7a56119cf08f5d3 で、とりあえずひな形を作ったとして、プログラム本体は ./bin/www なので、こちらをちょこっと編集する。

とりあえず、./bin/www を開いてみると、上からこんなかんじになっている。

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('myapp2:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

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

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

これに対して、必要なコードを部分的に追加する。具体的には次のようにする。

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * ADDED!! Require Socket.IO
 */
var io = require('socket.io')(server);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * ADDED!! Socket.IO Connection.
 */
io.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

クライアント側

index.jadeを、こんなかんじに書いてみる。

extends layout

block content
  h1= title
  p Welcome to #{title}

  script(src='/socket.io/socket.io.js')
  script.
    var socket = io.connect('http://localhost:3000');
    socket.on('news',function(data){
      console.log(data);
      socket.emit('my other event',{my:'data'});
    });

ところで、socket.onは、ソケットを受け取ったときの関数で、'news'とか'my other event'は、メッセージを送るイベントの名前。

動かしてみる

Windowsの場合は、コマンドプロンプトで次のコマンドを実行する。

set DEBUG=myapp2 & npm start

で実行。ブラウザでlocalhost:3000にアクセスすると、SocketIOを使って通信する。

Chromeの場合、デベロッパーツールを開いて、コンソールを表示させると、

Object {hello: "world"}

と出力される。また、npmを実行したコンソール(Windowsの場合はコマンドプロンプト)では、

{ my: 'data' }

と表示される。ブラウザ側、つまりクライアント側にはサーバから{hello: "world"}が送られたことが分かるし、サーバにはクライアント側から{my:'data'}が送られたことが分かる。

チャットアプリの可能性

socket.emitが、誰か一人に送る関数であり、また、socket.broadcast.emitは、自分以外の全員に送る関数である(ブロードキャスト)。

つまり、クライアントからサーバに対してemitして、サーバがそれをbroadcastすれば、チャットが実現できるということになる。