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

前回「node.jsでチャットアプリ開発③」では、
soket.ioを使ったサーバとクライアントの実装を行いました

今回は、前回のプログラムについて解説をしたいと思います^_^✨

サーバ側プログラムの解説

もう一度、実装した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('接続成功');
  });

server.listen(3000);

まず、最初にExpressのモジュールをロードして、
アプリケーションオブジェクトを作成してます。

// Expressをインポート
var express = require('express');
const app = express();

これは、「node.jsでチャットアプリ開発②」でも解説しましたね^_^

次が今回の本題の部分です。

// Socket.ioをインポート
const io = require('socket.io')(server);

上記の1行でSocket.ioモジュールをロードしてます。
Socket.ioのオブジェクトは、「io」という引数に入ります。

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

これはルーティングの設定を行ってます。

/(トップページ)にアクセスした際に、index.htmlのページを表示させるようにしてます。
「node.jsでチャットアプリ開発②」でも解説した通りです。

ただ、今回は「__dirname」という表記がありますね。

「__dirname」はExpressで利用することができる、特別な変数です。
現在実行されているプログラムが保存されている場所(フォルダ)の情報が入ってます。

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

on()メソッドを使ってクライアント側と接続されているかを確認します。
第1引数に「connection」と設定することで、接続されているかどうかを確認できます。

接続されると、第2引数で指定した処理が実行されます。

ここでは、クライアントが接続すると、コマンドプロンプトに
「接続成功」が表示されるようにしてます^_^

console.log('接続成功');

最後にサーバの待ち受けポート番号を指定してます^_^
このプログラムでは、3000番ポートを指定してます！

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();
    </script>
    <ul id="messages"></ul>
</body>
</html>

9割HTMLタグで占めてますが、
2箇所だけSocket.ioに関する記述がるので、ご説明します^^✨
(HTMLの説明についても別記事で投稿したいと思います。)

<!-- ライブラリの読み込み -->
<script src="http://localhost:3000/socket.io/socket.io.js"></script>

サーバ側に対してソケット接続するために、
クライアント側でもSocket.ioのライブラリを組み込む必要がございます。

実際にサーバに対してソケット接続している箇所が
このscriptタグで囲んでる部分です。

サーバ(http://localhost:3000)にアクセスすると、
この「const socketio = io();」が実行されて、
サーバ側プログラムでは、クライアントから通信を受け取るので、
「io.on」の部分が処理されるというわけです。

f:id:RyoheiAdachi:20220215225331p:plain

本日は以上です！^_^
次回はチャットアプリ制作の続きを行います！お楽しみに！✨