はじめに

たくさんの方が書いてると思いますが，自分の知識をまとめたいので，つらつらと書いていきます...

双方向通信とは

双方向通信とは，単方向通信の対義語で，送信&受信が可能な通信の事です
全二重通信と半二重通信の2種類があります

全二重通信：送信と受信を同時に行える通信
半二重通信：送信と受信を同時に行えない通信

全二重通信は半二重通信の上位互換になるのかなというイメージです

Socket.ioとは

まず，WebSocketについて

リアルタイムWeb技術の一種であり，双方向通信を可能とするプロトコルになります

Socket.ioとは，WebSocketを使用可能なNode.jsのライブラリの一種になります
実際に双方向通信を実装して，体験してみようと思います

ソースコードはここのサイトをみて作成しました．

今回，Node，Raspberrypi 3 Model B(サーバの代わり)を使用しました
RaspberrypiにNodeはOSインストール時にインストールされていると思います

各バージョンを以下にまとめます．
* OS：Raspbian GNU/Linux 9.11 (stretch)
* Node：v13.9.0
* npm：6.13.7
* Socket.io：2.3.0

サーバにするディレクトリに移動して，ディレクトリを作成し，その中に移動します

mkdir Socket_io_sample(ディレクトリ名)
cd Socket_io_sample(ディレクトリ名)

Nodeのライブラリをnpmコマンドでインストールします

node install socket.io

今回は以下の2つのファイルを作成します

socket.js
index.html

ファイルの位置は以下のようになります

Socket_io_sample(ディレクトリ名)
|ー package-lock.json
|ー node_modules
|ー index.html
┗ー socket.js

各ファイルに以下のソースコードを記述します

index.html

<!DOCTYPE html>
<!-- 言語は日本語を指定-->
<html lang="ja">

<head>
    <!-- 文字コードはUTF-8を使用-->
    <meta charset="utf-8">
    <!--タイトルを入力-->
    <title>Websoketを使用したチャット</title>
    <!--おまじないの一種です---------------------------------------------------------------->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <!------------------------------------------------------------------------------------->
</head>

<body>
    <div class="container">
        <!--見出しを入力する-->
        <h1>Websocketを使用したチャット</h1>
        <form class="form-message">
            <div class="form-group">
                <label for="message-form">メッセージ:</label>
                <!--テキスト入力ボックスを設置する-->
                <input type="text" class="form-control" id="message-form">
            </div>
            <!--送信ボタンを設置-->
            <button type="submit">メッセージを送信</button>
        </form>
        <!--入力ログが以下にに出力される-->
        <div id="chatlogs"></div>
    </div>

    <script type="text/javascript">
        //サーバと接続(connect)する
        var socket = io.connect();

        //サーバからクライアントへのアクセスがあった際，dataを表示する
        socket.on("server_to_client", function (data) { appendMsg(data.value) });

        //textを表示する関数(function)を作成
        function appendMsg(text) {
            //idがチャットログの箇所に"<div> +text + </div>"を追加する
            $("#chatlogs").append("<div>" + text + "</div>");
        }

        $("form").submit(function (err) {
            //messageにmessage-formの値を保存する
            var message = $("#message-form").val();
            //message-formの値を空にする
            $("#message-form").val('');
            //全てのブラウザにmessageを表示する?
            socket.emit("client_to_server", { value: message });
            //イベントが終わらない場合，強制終了させる?
            err.preventDefault();
        });
    </script>

</body>

</html>

socket.js

var http = require('http');
var socketio = require('socket.io');
var fs = require('fs');

//サーバを建てる(ポートは3000番)
var server = http.createServer(function (req, res) {
    //ヘッダー，コンテンツのタイプを入力
    res.writeHead(200, { 'Content-Type': 'text/html' });
    //index.htmlを読み込み表示し，レスポンス(res)を終了する
    res.end(fs.readFileSync(__dirname + '/index.html', 'utf-8'));
}).listen(3000);

//サーバでsocket.io(双方向通信)を可能にする?
var io = socketio.listen(server);

//サーバとクライアントの接続が起きた際の処理を記述
io.sockets.on('connection', function (socket) {
    //クライアント(ブラウザ)からサーバへの通信が行われた際の処理を記述
    socket.on('client_to_server', function (data) {
        //サーバからクライアントへの通信が行われた際の処理を記述
        //data.value:入力した文字列?を各クライアントに分け与える(emitする)
        io.sockets.emit('server_to_client', { value: data.value });
    });
});

これにて双方向通信を体験できるのかなと思います．

参考にしたサイト

双方向通信とは
 いまさら聞けないWebSocketとSocket.IOの基礎知識＆インストール

Socket.ioの双方向通信について

はじめに

双方向通信とは

Socket.ioとは

まず，WebSocketについて

参考にしたサイト