【Node.js】socket.ioでチャット作成

前々から試してみたいなぁと思っていたsocket.ioを試したいと思います。
まずは、socket.ioがどんなものか知る為にチャットプログラムを作成しました。

Expressでプロジェクトを作る

まずは、プロジェクトディレクトリまで行って、プロジェクト作成

express -ejs chat
cd chat
npm install -d

サーバサイドの編集

まず、npmでsocket.ioをインストールします。

npm install socket.io

次に、app.jsを編集してサーバサイドを編集します。
app.jsの最後のcreateServerの戻り値を変数に格納して使います。

var server = http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

// for socket.io
var io = require('socket.io').listen(server);
io.sockets.on('connection', function(socket) {
  // on connect
  console.log(socket.id + ' is connected');

  // get message from client
  socket.on('message', function(msg) {
    console.log(socket.id + ' has been sent a message, "' + msg + '"');
    socket.emit('message', msg);
    socket.broadcast.emit('message', msg);
  });

  // client disconnected
  socket.on('disconnect', function() {
    console.log(socket.id + ' is disconnected.');
  });
});

クライアントサイドの編集

クライアントサイドにJavaScriptでsocket.io用のコードを書いていきます。
localhost部分は、ご自身のホスト名に変えて下さい。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script type='text/javascript' src='/socket.io/socket.io.js'></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
    <script type='text/javascript'>
        var socket = io.connect('http://localhost');
        // when the client connected to the server
        socket.on('connect', function(msg) {
            $('#connectId').text("Your ID :: " + socket.socket.sessionid);
        });

        // received message
        socket.on('message', function(msg) {
            $('#receive').append(msg + '<br>');
        });

        // send message
        function sendMsg() {
            var msg = $('#message').val();
            socket.send(msg);
        }

        // disconnect
        function disconnect() {
            socket.send(socket.socket.sessionid + ' is disconnected.');
            socket.disconnect();
        }
    </script>
  </head>
  <body>
    <h1><%= title %></h1>
    <div id='connectId'></div>
    <input type='text' id='message' value=''>
    <input type='submit' value='Send' onclick='sendMsg()'>
    <input type='button' value='Disconnect' onclick='disconnect()'>
    <div id='receive'></div>
  </body>
</html>

app.jsの起動

最後に、app.jsを起動して終了です。

node app.js

動くとこんな感じになると思います。

テストプログラム

作成したプログラムはGitHubに置いておきます。
morodomi / socket.io-chat

湘南社中テクニカルブログ

Pages

2012年10月24日