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

さぁあ、今回はnode.jsのsocket.ioを使って、
チャットアプリを作りましょう！(^^♪

socket.ioとは？

node.jsのライブラリの一つです。

socket.ioを使うことで、
サーバとクライアントの間で双方向の通信するWebSocketの技術を
アプリケーションに組み込むことができます。

WebSocketとは？

クライアントとWebサーバとの間で双方向通信を行うための仕組みです

通常のWebサービスでは、クライアント(ブラウザ)から
Webサーバに対してリクエストを送信できても、
逆にWebサーバからクライアント(ブラウザ)に対して接続を試みることはできません。

WebSocketでは、一度Webサーバとクライアント間で接続が確立すれば、
Webサーバとクライアント(ブラウザ)のどちらからでも
接続を開始することができます。

WebSocketの技術は、ニュース配信サービス、SNS、ゲームなど
リアルタイム性が要求されるアプリケーションなどで採用されてます。


f:id:RyoheiAdachi:20220209084133p:plain

socket.ioのインストール

socket.ioをインストールして、
node.jsに組み込んでみましょう！^_^

Expressと同じようにnpm installでインストールしましょう！

まず、コマンドプロント(ターミナル)を開き、以下のコマンドを打ちましょう！

npm install --save socket.io

「--save」を付けることで、
package.jsonファイルにsocket.ioライブラリを登録することができます。
(具体的には、package.jsonファイルのdependenciesに追加されます。)

これで、socket.ioのインストール完了です！^^

サーバの実装

ここからは、通信データを送る「クライアント」、
通信データを受け取る「サーバ」
2つの開発を行いたいと思います！^_^

では、まず通信データを受け取るサーバの実装を行いましょう！^_^

前回の記事「チャットアプリ開発②」で作成した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);

クライアント側の実装

次に、「クライアント側」の実装です！
app.jsが置いてあるフォルダで「index.html」を新規に作りましょう！^^


そして、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>

動作確認

WebSocket通信ができてることを確認します^_^

まず、サーバを起動させます。
コマンドプロント、あるいはターミナルを開き、
app.jsファイルが存在するフォルダに移動します。

cd <app.jsが置いてあるフォルダ>

app.jsを実行します。

node app.js

その状態で、ブラウザを開いて
URLアドレスバーに以下のURLを入れてアクセスします！

http://localhost:3000

すると、ブラウザでは、下記の画面が出ると思います

f:id:RyoheiAdachi:20220209090148p:plain


さらに、ターミナルに「接続成功」という文字が表示されれば、動作確認OKです！

f:id:RyoheiAdachi:20220209090016p:plain

次回は上記のプログラムの内容について
1つずつ解説します^_^