By U Zensen.

欲しいものはプログラミングで自分で作る。

今更だけどnode.jsのexpressでリアルタイムチャットを作る!!

2016 / 10 / 11
JavaScript
161012_title

はじめに!!

どうも!環境構築が苦手なぴーすけです!

今回はnode.jsと、そのライブラリexpressを使ってリアルタイムチャットを作りたいと思います!

本当はnode.jsとHerokuを使ってリアルタイムで遊べるゲームを作ろうと思ったのですが、あまりにもnode.jsが久しぶりでつっかえたので、基礎からやり直したいと思います!!

スポンサードリンク

準備

まずは必要なものをインストールします。

必要なものは「node.js」はもちろん。そのライブラリの「express」と「socket.io」です。

そして、今回作るチャットのディレクトリ構成は以下の通りです。

161012_1

chat.jsにはサーバーサイドの処理を書き、index.htmlにはクライアントサイドの処理を書きます。

node.jsをインストール

今回の主役、node.js。 

色々とインストール方法はありますが、一番簡単なのは公式サイトからのインストール

インストーラーに沿ってやれば問題なくインストールできていると思います。確かめるにはターミナルで以下のコマンド

node -v

バージョンが表示されていれば成功です!

expressをインストール

先ほどお見せしたディレクトリ構成の「chatディレクトリ」に移動し、そこでインストールをします。

cd {パス}/chat

上記コマンドで移動後、以下のコマンドでexpressをインストールします。

インストールしたディレクトリ上に自動でnode_modulesディレクトリが作られるので、chatディレクトリ上で以下のコマンドを打てば大丈夫です。

npm install express

インストール後は、chatディレクトリにnode_modulesディレクトリが作成され、その中にexpressディレクトリが生成されます。

socket.ioをインストール

今度はそのまま同じchatディレクトリ上でsocket.ioをインストールします。

npm install socket.io

成功すれば、先ほど生成されたnode_modulesディレクトリ内にscoket.ioディレクトリが生成されます。

サーバーサイドの処理を書く

chat.jsにはサーバーサイドの記述をします。

以下の処理を記述します。

var app = require('express')();//expressを使うため
var http = require('http').Server(app);//expressを使って通信を扱う
var io = require('socket.io')(http);//socketを使うため
var POST = 3000;//localhost:3000

//ルートディレクトリにアクセスした時に動く処理
app.get('/', function(req, res) {
  //index.htmlにリダイレクトする
  res.sendFile(__dirname + '/index.html');
});

//socket.ioに接続された時に動く処理
io.on('connection', function(socket) {
  //接続時に振られた一意のIDをコンソールに表示
  console.log('入室したID : %s', socket.id);

  //接続時に全員にIDを表示(messageというイベントでクライアント側とやりとりする)
  io.emit('message', socket.id + 'さんが入室しました!', 'System');

  //messageイベントで動く
  //全員に取得したメッセージとIDを表示
  socket.on('message', function(msj) {
    io.emit('message', msj, socket.id);
  });

  //接続が切れた時に動く
  //接続が切れたIDを全員に表示
  socket.on('disconnect', function(e) {
    console.log('接続が切れたID : %s', socket.id);
  });
});

//接続待ち状態になる
http.listen(POST, function() {
  console.log('接続開始', POST);
});

そのままコピペすれば動くはずです。一応コメントを入れておいたので、上から読めばなんとなくわかると思います。

クライアントサイドの処理を書く

index.htmlにはクライアントサイドの処理を書きます。

cssなども書いてしまっていますが、書いていることは単純です。

htmlは、入力用のインプットと送信用のボタン。そして、入力が挿入されるためのリストを作ります。

重要な処理はbodyのscriptタグ内に書いてあります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>chat app node.js</title>
  <script src="/socket.io/socket.io.js"></script>
  <script src="//code.jquery.com/jquery-1.11.1.js"></script>
  <style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  body {
    font-family: Verdana;
  }
  ul {
    list-style-type: none;
    padding: 20px;
    background: #000;
    color: white;
  }
  #controls {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 20px;
    display: block;
    width: 100%;
  }
  #controls #msj {
    float: left;
    width: 80%;
    display: block;
    padding: 20px;
  }
  #controls #btn {
    float: right;
    padding: 20px;
  }
  </style>
</head>
<body>
  <script>
  <!-- 通信用 -->
    var socket = io();

    <!-- jQueryの処理 -->
    $(function() {
  <!-- サブミットボタンを押された処理 -->
      $('form').submit(function() {
   <!-- 入力フォームには入っている値を取得 -->
        var mensaje = $('#msj').val();
                
    <!-- 値がなかったら終了 -->
        if (mensaje === '') return false;

   <!-- 全体にmessage処理(サーバーサイドにメッセージを渡す) -->
        socket.emit('message', mensaje);

    <!-- 入力フォームを空にしてフォーカスする -->
        $('#msj').val('').focus();
                <!-- 処理終了 -->
        return false;
    });
   });

  <!-- サーバーサイドから来たメッセージを挿入 -->
    socket.on('message', function(msj, id) {
      $('#message').append($('<li>').text(id + " : " + msj));
    });
  </script>
  <ul id="message">

  </ul>
  <div id="controls">
    <form action="">
    <input type="text" id="msj" placeholder="Escribe tu mensaje...">
    <input type="submit" id="btn" value="Enviar">
    </form>
 </div>
</body>
</html>

これもそのままコピペで動くはずです。

動かす

動かすにはchatディレクトリで以下のコマンドです。

node chat.js

動いている確認するにはブラウザにアクセスします。

localhost:3000

ちゃんと動いていれば以下のような画面が表示されます。

161012_2

複数のブラウザで同時にアクセスして、入力フォームから文字を送信すれば送信されたメッセージがリアルタイムに共有されます。

デモが用意できずに申し訳ないです。次回はHerokuというWEBサービスを使ってこの実装した、リアルタイムチャットを公開する手順を紹介しようと思います。

参考動画

今回の実装は以下の動画を参考にしました!

以上!!

node.js周りの環境構築がめんどくさいし、うまくいかないしで苦手です。

でもやりたいことをやるには便利そうなのでそこは我慢ですね。

リアルタイムで複数人でできるゲームとか、スマホとデザリングして遊べるゲームとか作ろうと思うので、楽しみにしていてもらえたらと思います。

Pocket

コメント

コメントを残す