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

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



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

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

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


#Socket.ioとは
####まず，WebSocketについて
リアルタイムWeb技術の一種であり，双方向通信を可能とするプロトコルになります

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

ソースコードは[ここのサイト](https://www.atmarkit.co.jp/ait/articles/1603/14/news015_2.html)をみて作成しました．

今回，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
```

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

```html: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>
```


```js: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 });
	});
});
```

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

#参考にしたサイト
[双方向通信とは](https://wa3.i-3-i.info/word1928.html)
[いまさら聞けないWebSocketとSocket.IOの基礎知識＆インストール](https://www.atmarkit.co.jp/ait/articles/1603/14/news015_2.html)