【誰でも簡単】チャットアプリの作り方(Node+Websocket+ Vue)

こんにちは、SHOOT（@Shoot58153748）です！

僕は、未経験から独学で数ヶ月プログラミングを学び、Web系エンジニアになりました。

いくらエンジニア不足の時代背景があったとしても、
未経験のまま何も学習せずにWebエンジニアになれることはないでしょう。

Web系エンジニアになるためには多少のプログラミングスキルが必要です。

私は、プログラミング学習サイトで基礎を学んだあとは、ネット上を参考に、いくつかサンプルアプリを作って少しづつ自信をつけていきました。

今回は、プログラミングで何か作ってみたいけど、何を作ったら良いかわからない方のために、
チャットアプリの作り方を一から公開します！

チャットアプリは、比較的容易に少ない実装で作れる上に、
スピーディーに動くものを作ること、ものづくりの楽しさを味わえます。

じゃんじゃん真似して、物作りに慣れていきましょう！

＜前提条件＞
・nodeとnpmがインストールされている（詳しくはprogateの環境開発方法を参照）

全ソースコード：
https://github.com/Shuto-san/sample-chat-app

1 作成手順
2 最後に：もっとこのアプリを改善していきたい方へ

作成手順
最後に：もっとこのアプリを改善していきたい方へ

作成手順

作業用ディレクトリ作成とパッケージインストール

mkdir sample-chat-app
cd sample-chat-app
npm init
npm install -s express socket.io
touch index.js
touch chat.html

sample-chat-appというアプリ用のディレクトリを作成。

npm initというコマンドで、パッケージをインストールするための初期準備をします。設定は全てEnterを押してデフォルトでオーケーです。

そこにnpmというnodeのパッケージマネージャーを用いて、
標準パッケージ以外に、開発に新たに必要なパッケージ（今回は二つ）をインストールします。

expressは、Webアプリケーションの作成を容易にする「フレームワーク」と呼ばれるパッケージです。

これにより、より少ないコードでアプリを実装できます。

socket.ioというのは、チャットに必要なクライアントとサーバーの双方向通信を実現するためのパッケージです。

パッケージのインストールが終わったら、
今回主にプログラムを書いていく二つのファイルを作成します。

クライアント側の実装（chat.html）
サーバー側の実装（index.js）

サーバー構築(index.js)

// パッケージ群を読み込む
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
// ポート番号を指定する
var port = process.env.PORT || 3000;

// クライアント側のリクエストに対して、画面(htmlファイル)を返す
app.get('/', function(req, res){
  res.sendFile(__dirname + '/chat.html');
});

// httpサーバーを立てる
http.listen(port, function(){
  console.log('listening on *:' + port);
});

http通信をするサーバーを立てるための実装はこれだけです。

最初にhttp,express, socket.io のパッケージ読み込み、

expressを用いて、リクエストのハンドリング、

httpを用いて、サーバーを立ててます。

パッケージを使えばこんなに楽に実装できるんですね！

チャット画面作成

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>sample-chat-app</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 16px Helvetica, Arial; }
      h2 {padding: 10px}
      .form { background: #001; 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; }
      ul { list-style-type: none; margin: 0; padding: 0; }
      ul li { padding: 5px 10px; }
      ul { margin-bottom: 10px }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <header>
      <h2>サンプルチャットアプリ</h2>
    </header>
    <hr>
    <main id="chat">
      <ul v-for="message in messages">
        <li>{{message}}</li>
      </ul>
      <div class="form">
        <input v-model="chatMessage">
        <button v-on:click="postMessage">送信</button>
      </div>
    </main>
  </body>
  <script>
  </script>
</html>

画面はhtml, cssを用いて実装します。

サーバー側にリクエストを送るためにはJavascriptを用いますが、
今回は、より実装が簡単なvueを呼ばれるjavascriptのフレームワークを使います。

vue（javascript）は下部のscriptタグの中に以下を記述します。

  <script>
    var socket = io();
    var app = new Vue({
      el: '#chat',
      data: {
        chatMessage: '',
        messages: []
      },
      methods: {
        // 送信ボタンが押されたら、クライアントからサーバーにメッセージを送信
      },
    })
    // サーバーがメッセージをemitしたら、クライアント側のリストにメッセージを追加する
    // 元々あるメッセージを表示する
  </script>

最初に読み込んだsocketを用いて、
このあとチャットの通信を実現していきます。

チャット機能実装

chat.html(クライアント側)

  <script>
    var socket = io();
    var app = new Vue({
      el: '#chat',
      data: {
        chatMessage: '',
        messages: []
      },
      methods: {
        // 送信ボタンが押されたら、クライアントからサーバーにメッセージを送信
        postMessage: function() {
          socket.emit('c2s-msg', this.chatMessage);
          this.chatMessage = '';
          return false;
        }
      },
    })
    // サーバーがメッセージをemitしたら、クライアント側のリストにメッセージを追加する
    socket.on('s2c-msg', function(msg) {
      console.log(msg);
      app.messages.push(msg);
      window.scrollTo(0, document.body.scrollHeight);
    });
    // 元々あるメッセージを表示する
    socket.on('init-chat', function(messages) {
      app.messages = messages;
    });
  </script>

メッセージを入力し、送信ボタンを押したら、
postMessageというメソッドが実行し、

emitでサーバー側に向けて送信します。

サーバー側からの送信があったときは、onでメッセージを受け取り、
配列に追加して、画面上に反映します。

index.js(サーバー側)

var messages = [];

io.on('connection', function(socket){

  // サーバー側のメッセージリストをクライアント側に送る（emit）
  socket.emit('init-chat', messages);
  // クライアント側から送られたメッセージを受け取り、全クライアントに送る（emit）
  socket.on('c2s-msg', function(msg) {
      var newMessage = msg;
      messages.push(newMessage);
      io.emit('s2c-msg', newMessage);
  });

});

index.jsに上記のコードを追加します。

クライアント側からのメッセージをonで受け取り、
配列に追加した後、

サーバーにつなぐクライアント全員に向けて受け取ったメッセージを送信（emit）しています。

初めて接続したクライアントに対しては、
メッセージを初期表示させるため、
配列のメッセージをクライアント側に送ります。

最後に：もっとこのアプリを改善していきたい方へ

今回簡易チャットアプリを作成しましたが、

簡単に動くアプリを作っていただくことに主眼を置いたので、解説を極力シンプルに、少なくしました。

自分で作ったアプリが動いた瞬間はどうでしたか？？

例えば、今回作ったアプリを以下のように改善していけば、あなたのオリジナルアプリの完成です。

・チャットルームっぽくUIを改善する
・ユーザーの入退室が分かるようにする
・メッセージをDBに保存する

この他にも様々な種類のアプリを作っていき、自信を深めていきましょう。
また、コードを１行１行調べながら読み解いていくと、言語に関して知識が深まっていくので余裕がある人はやってみてくださいね。

本ブログでは、チャットアプリの他にも
LaravelというWebアプリケーションフレームワークを用いて、ツイッター風SNSアプリの開発も記事にしているので、
そちらもぜひご覧になってみてください！↓↓