チャットツールをGitとNode.jsとHerokuでDIYする方法〜画面作成編〜

エリカ

2014.12.09

こんにちは。ディレクターのエリカです。

ふと「誰かとチャットしたい！」って思うこと、定期的にありますよね。でも、手頃なチャットツールが見つからない・・・
そんなときは、DIYをしてみるのはいかがでしょうか。

そのための手順について、前回の「環境構築編」に続き、今回は「画面作成編」として解説をしていきます。

画面作成のために必要なもの

主に使用するものは以下の3つです。

Node.js
express
socket.io

express4とsocket.ioを使ってチャットツールを作成します。

ExpressGeneratorのインストール

express-generatorをインストールしましょう。

前回の記事を実行していれば、npmコマンドが利用できるようになっていると思います。

npm install express-generator -g
expressを使ってアプリの雛形を作成します。
express -e myapp
※-e オプションで初期テンプレートエンジンをejsにしています。

項目は基本的に全てOKで問題ありません。
cd myapp
必要なモジュールをインストールします。
npm install
socket.ioのインストール
さらに追加でsocket.ioをインストールしましょう。
npm install socket.io --save
--saveオプションでpackage.jsonにインストール情報を追記しておきます。

こうしておくと、あとで
npm install
した際に、依存モジュールをインストールしてくれるようになります。
package.jsonはこのようになっています。
{
  "name": "myapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.8.1",
    "cookie-parser": "~1.3.3",
    "debug": "~2.0.0",
    "ejs": "~0.8.5",
    "express": "~4.9.0",
    "morgan": "~1.3.0",
    "serve-favicon": "~2.1.3",
    "socket.io": "^1.2.0"
  }
}
ここからは、「socket.io」のサイトを参考にして進めます。
現在のバージョンですと、ドキュメントそのままでは動作しませんでした。

エンドポイントでsocket.ioがlistenできる状態にしてあげる必要があります。
少し変更しましょう。

まずはio.jsというファイルを作成します。
io.js
var socketio = require('socket.io');

function io(server) {
    var io = socketio.listen(server);
    
    io.on('connection', function (socket) {
        socket.emit('news', { hello: 'world' });
        socket.on('my other event', function (data) {
            console.log(data);
        });
    });
}

module.exports = io;
これをエンドポイントに追加します。
bin/www
#!/usr/bin/env node
var debug = require('debug')('myapp');
var app = require('../app');
var io = require('../io');

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

var server = app.listen(app.get('port'), function() {
  debug('Express server listening on port ' + server.address().port);
});
io(server);
次に、サンプルのスクリプトをindex.ejsのbodyの閉じタグ直前に記述します。
views/index.ejs
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io.connect('http://localhost');
        socket.on('news', function (data) {
            console.log(data);
        socket.emit('my other event', { my: 'data' });
        });
    </script>
  </body>
</html>
npm start
これで

http://localhost:3000/

にアクセスすると、ブラウザのconsoleに{hello:'world'}オブジェクトが、node.jsのコンソールに{my: 'data'}オブジェクトがそれぞれロギングされます。
下準備は完了です。
チャットアプリケーションのコーディング
それでは、チャットアプリを作成していきます。
こちらを参考に、views/index.ejsの中身を下記に置き換えましょう。
<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
    var socket = io();
    $('form').submit(function(){
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
    });
    socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
    });
    </script>
  </body>
</html>
あわせてio.jsの中身も下記に変更します。
var socketio = require('socket.io');

function io(server) {
    var io = socketio.listen(server);
    
    io.on('connection', function (socket) {
     socket.on('chat message', function(msg){
    io.emit('chat message', msg);
	  });
    });
}

module.exports = io;
もう一度、
npm start
して、 http://localhost:3000/ にアクセスします。
ページ下部のテキストフィールドに文章を入力し、Sendボタンを押してみてください。画面上部に入力内容が表示されていきます。
次に、複数ブラウザを起動し、それぞれこちら（http://localhost:3000/）にアクセスします。
あるブラウザで文章を入力しSendボタンを押下すると、それが全てのブラウザに表示されます。
これで、チャットアプリが完成しました。
まとめ
サンプルコードだけで簡単にチャットツールが作成できましたね。
これだけでも、例えば前回お伝えしたHerokuにデプロイすれば、そのURLにアクセスした人同士でチャットができるようになります。
次は、チャット相手がいないという場合のために、チャット相手を人工的に作ってみたいと思います。
おつかれさまでした。
 
【Node.js入門記事】
※ Node.js完全初心者のための、合計値を計算し、コンソールに出力する方法
※ Node.js完全初心者が、ファイルを非同期で読み取り、行数をコンソールに出力する方法
※ Node.js完全初心者が、ファイルを同期で読み取り、行数をコンソールに出力する方法
※ Node.jsを使ってjQueryチックにWebサイトをクローリングする方法
※ いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜
         
                         LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
              Webサイト制作の実績・料金を見る