node.jsでチャットアプリ開発⑤

では、今回はチャットアプリを完成させちゃいましょう！^_^

今回作る項目としては以下の通りです。
・投稿したメッセージをブラウザに表示させる
・デザインを組み込む
・投稿日付を表示させる

投稿したメッセージをブラウザに表示させる

ここでやりたいことは、
チャット画面のテキストエリア(メッセージ入力できる四角い箱)にメッセージを入力した後、
「Send」ボタンを押します。

すると、入力したメッセージがテキストエリアの下部に表示されるようにします☺

f:id:RyoheiAdachi:20220223145654p:plain

それではさっそく作っていきましょう！(^^♪

ます、サーバ側プログラムであるapp.jsを開きましょう^_^
下記の/*ここから追加*/で囲まれている部分を追加してあげましょう！

// Expressをインポート
var express = require('express');
const app = express();
const server = require('http').Server(app);
// Socket.ioをインポート
const io = require('socket.io')(server);

app.get('/' , (req, res) => {
   res.sendFile(__dirname + '/index.html');
});

// クライアントと接続ができたら、'接続成功'とターミナルに表示される
io.on("connection", socket => {
  console.log('接続成功');

  /*ここから追加*/
  //クライアントからメッセージ情報を受け取る
  socket.on('message_event',function(data){ 

      //受信したメッセージをターミナルに表示
      console.log('message: '+ data)
      
      //全クライアントに対して、メッセージ情報を送信する
      io.emit('message', data);
  });
  /*ここまで追加*/
});

server.listen(3000);

クライアント側のindex.htmlも開きましょう！
サーバと同じように、下記の/*ここから追加*/で囲まれている部分を追加してあげましょう！

<!DOCTYPE html>
<html>
<head>
    <title>ChatApplication</title>
    <!-- ライブラリの読み込み -->
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body>
    <div class="title">
        <h1>チャットアプリ</h1>
    </div>
    <form id="message_form" action="#">
        <div class="form">
            <input id="input_msg" autocomplete="off" />
            <button>
                Send
            </button>
        </div>
    </form>
    <script>
        // サーバーへ接続
        const socketio = io();

        /*ここから追加*/
        $(function(){

            //「Send」ボタンを押したときの処理を記載
            $('#message_form').submit(function(){
             
                //入力したメッセージ情報を抽出
                var data = $('#input_msg').val();

                //入力したメッセージ情報をサーバに送信
                socketio.emit('message_event', data);

                //入力テキストエリアを空にする
                $('#input_msg').val('');

                return false;
            });

            //サーバからのレスポンスを受け取る
            socketio.on('message',function(data){  
                //受け取ったメッセージ情報をブラウザに描画(liタグとして追加)
                $('#messages').append($('<li>').text(data)); 
            });
        });
        /*ここまで追加*/
    </script>
    <ul id="messages"></ul>
</body>
</html>

追加できましたら、動作を確認してみましょう！
コマンドプロンプト(ターミナル)を開き、node.jsを起動します。

node app.js

そして、ブラウザでhttp://localhost:3000にアクセスします。

チャット画面が開きましたら、今回はテキストエリアにメッセージを入力して、
「Send」を押してみましょう！

入力したメッセージがテキストエリアの下部に表示されればOKです！

f:id:RyoheiAdachi:20220223145611p:plain

デザインを組み込む

大体のチャットアプリ機能は完成しましたが、
デザインが質素ですよね・・・

ということで、デザインを組み込みたいと思います。


デザインを組み込むには、CSS(Cascading Style Sheets)を実装していく必要があります。
まずは、CSSファイルを作りましょう^_^

現在、app.jsファイルがあるフォルダの構成は下記の通りだと思います。

├ app.js
├ index.html
├ package.json
├ package-lock.json
└ node_modules/   ←フォルダ

f:id:RyoheiAdachi:20220223150256p:plain

ここにpublicという名前のフォルダを作成してください^_^

├ app.js
├ index.html
├ package.json
├ package-lock.json
├ node_modules/  
└ public/  ←フォルダ作成

f:id:RyoheiAdachi:20220223150551p:plain

作成しましたら、publicフォルダに入り、
style.cssファイルを作成してください^_^

├ app.js
├ index.html
├ package.json
├ package-lock.json
├ node_modules/  
└ public/  ←フォルダ作成
      └ style.css  ←作成

f:id:RyoheiAdachi:20220223151001p:plain

style.cssを作成しましたら、テキストエディタ(メモ帳やさくらエディタなど)で、style.cssを開きましょう！

そして、style.cssに下記の内容を記述しましょう！^^

* {
    margin:0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

html {
    display: block;
    scroll-behavior: smooth;
}

body {
    font-size: 13px;
    line-height: 1.7;
    font-family:sans-serif;
    display: block;
}

div {
    display: block;
}

a {
    text-decoration: none;
    margin: 0;
    font-size: 100%;
    color: black;
}

button {
    padding:0.3% 3%;
    background-color: rgb(6, 6, 112);
    border-radius: 40px;
    font-size: 16px;
    border: none;
    color: white;
    transition: 0.3s;
    cursor: pointer;
    margin-left: 10px;
}

button:hover {
    background-color:rgb(0, 0, 255);
    transition: 0.3s;
}

h1 {
    font-size: 30px;
    margin: 10px 10px;
}

input {
    border: solid black 1px;
    margin-left: 15px;
    height: 20px;
    width: 200px;
}

.form {
    display: flex;
}

#messages {
    font-size: 18px;
    margin-top: 10px;
    margin-left: 15px;
    list-style: none;
}

これでCSSの実装は完了です。
上記の各CSSの意味についても、また別途記事で説明したいと思います^_^

では、サーバ側app.js、クライアント側index.htmlにおいて、デザイン(CSS)を読み込むようにしましょう！
まずapp.jsを開き、以下の追加部分であるapp.use(express.static('public')); を追加してください！

// Expressをインポート
var express = require('express');
const app = express();
const server = require('http').Server(app);
// Socket.ioをインポート
const io = require('socket.io')(server);

//CSSファイル(静的ファイル)が保存されてるディレクトリを指定
app.use(express.static('public')); //追加

app.get('/' , (req, res) => {
   res.sendFile(__dirname + '/index.html');
});

// クライアントと接続ができたら、'接続成功'とターミナルに表示される
io.on("connection", socket => {
  console.log('接続成功');

  //クライアントからメッセージ情報を受け取る
  socket.on('message_event',function(data){ 

      //受信したメッセージをターミナルに表示
      console.log('message: '+ data)
      
      //全クライアントに対して、メッセージ情報を送信する
      io.emit('message', data);
  });
});

server.listen(3000);

次に、クライアントです。
index.htmlを開き、タグ内に を追加してください！

<!DOCTYPE html>
<html>
<head>
    <title>ChatApplication</title>
    <!-- ライブラリの読み込み -->
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <link rel='stylesheet' href="/style.css" /> <!--追加-->
</head>
<body>
    <div class="title">
        <h1>チャットアプリ</h1>
    </div>
    <form id="message_form" action="#">
        <div class="form">
            <input id="input_msg" autocomplete="off" />
            <button>
                Send
            </button>
        </div>
    </form>
    <script>
        // サーバーへ接続
        const socketio = io();

        $(function(){

            //「Send」ボタンを押したときの処理を記載
            $('#message_form').submit(function(){
             
                //入力したメッセージ情報を抽出
                var data = $('#input_msg').val();

                //入力したメッセージ情報をサーバに送信
                socketio.emit('message_event', data);

                //入力テキストエリアを空にする
                $('#input_msg').val('');

                return false;
            });

            //サーバからのレスポンスを受け取る
            socketio.on('message',function(data){  
                //受け取ったメッセージ情報をブラウザに描画(liタグとして追加)
                $('#messages').append($('<li>').text(data)); 
            });
        });
    </script>
    <ul id="messages"></ul>
</body>
</html>

これで、読み込み完了です！
一度、node.jsを落として、再度起動してみましょう！

node.jsの落とし方は、コマンドプロンプト上で「Ctrlキー」と「Cキー」の同時押しで落とすことができます^_^

では、node.js再度起動します！

node app.js

そして、ブラウザでhttp://localhost:3000にアクセスします。

すると、デザインが反映されていれば、OKです！
例えば、ボタンの色が紺色に変わりましたね～

f:id:RyoheiAdachi:20220223152918p:plain

投稿した日付を付ける

さぁあ、最後です！
いまの状態ですと、メッセージしか表示されてません。
これでは、寂しいですよね。。😢

ということで、投稿日時も付けるようにしたいと思います！

まずは、クライアント側のindex.htmlを開きましょう！^_^
そして、下記の内容に書き換えましょう！

コメントで//追加という行を追加して、//削除という行を削除します。

<!DOCTYPE html>
<html>
<head>
    <title>ChatApplication</title>
    <!-- ライブラリの読み込み -->
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <link rel='stylesheet' href="/style.css" /> <!--追加-->
</head>
<body>
    <div class="title">
        <h1>チャットアプリ</h1>
    </div>
    <form id="message_form" action="#">
        <div class="form">
            <input id="input_msg" autocomplete="off" />
            <button>
                Send
            </button>
        </div>
    </form>
    <script>
        //日付情報を取得するための変数を用意
        var today = new Date();  //追加

        // サーバーへ接続
        const socketio = io();

        $(function(){

            //「Send」ボタンを押したときの処理を記載
            $('#message_form').submit(function(){
             
                /*ここから追加*/
                var year = today.getFullYear()
                var month =("0"+today.getMonth()+1).slice(-2);
                var date =("0"+today.getDate()).slice(-2);
                var hour =("0"+today.getHours()).slice(-2);
                var minutes =("0"+today.getMinutes()).slice(-2);

                var datetime = year + "/" + month + "/" + date + " " + hour + ":" + minutes
                //JavaScriptオブジェクトを取得し、JSON文字列に変換する。
                var data = JSON.stringify({datetime:datetime, message:$('#input_msg').val()});
                /*ここまで追加*/

                //入力したメッセージ情報を抽出
                //var data = $('#input_msg').val(); //削除

                //入力したメッセージ情報をサーバに送信
                socketio.emit('message_event', data);

                //入力テキストエリアを空にする
                $('#input_msg').val('');


                return false;
            });

            //サーバからのレスポンスを受け取る
            socketio.on('message',function(data){  
                //JSON文字列を取得し、JavaScriptオブジェクトに変換する。
                var data_json = JSON.parse(data);  //追加

                //受け取ったメッセージ情報をブラウザに描画(liタグとして追加)
                //$('#messages').append($('<li>').text(data)); //削除
                $('#messages').append($('<li>').text(data_json.message)); 
                $('#messages').append($('<div class="datetime">'+ data_json.datetime + '</div>'));  //追加
                $('#messages').append($('<div class="border" />'));  //追加
            });
        });

    </script>
    <ul id="messages"></ul>
</body>
</html>

次に、public/style.css(CSSファイル)を開き、以下の.border セレクタと.datetimeセレクタ箇所を追加してください！^_^

* {
    margin:0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

html {
    display: block;
    scroll-behavior: smooth;
}

body {
    font-size: 13px;
    line-height: 1.7;
    font-family:sans-serif;
    display: block;
}

div {
    display: block;
}

a {
    text-decoration: none;
    margin: 0;
    font-size: 100%;
    color: black;
}

button {
    padding:0.3% 3%;
    background-color: rgb(6, 6, 112);
    border-radius: 40px;
    font-size: 16px;
    border: none;
    color: white;
    transition: 0.3s;
    cursor: pointer;
    margin-left: 10px;
}

button:hover {
    background-color:rgb(0, 0, 255);
    transition: 0.3s;
}

h1 {
    font-size: 30px;
    margin: 10px 10px;
}
input {
    border: solid black 1px;
    margin-left: 15px;
    height: 20px;
    width: 200px;
}

.form {
    display: flex;
}
#messages {
    font-size: 18px;
    margin-top: 10px;
    margin-left: 15px;
    list-style: none;
}

/*ここから追加*/
.border {
    border: solid 0.5px rgb(117, 117, 117);
}

.datetime {
    font-size: 14px;
    color: rgb(22, 22, 22);
    margin-left: 90%;
}
/*ここまで追加*/


サーバ側のapp.jsの修正は不要です！

では、再度node.jsを落として、起動します。

node app.js

そして、ブラウザでhttp://localhost:3000にアクセスします。
メッセージを投稿すると、投稿日付も表示されると思います！

f:id:RyoheiAdachi:20220223211425p:plain

おめでとうございます！
これでチャットは完成です✨

最後までお疲れ様でした^_^