【プログラミング学習1-9】ソケット通信を使ってチャットアプリを作成
プログラミング学習を始めたが挫折しそうなので学習記録をnoteに残す、の今日のタスクは「チャットアプリ作成」にしました。
TODOアプリの作成がいまいち理解できないので、もっと簡単なアプリを作ります。
今日のお題 ソケット通信を使ってチャットアプリを作成
今日は以下の動画に倣ってアプリを作りました。
17分と短い動画ですが、これをなぞると私でもチャットアプリが作れました。
学習概要
socket.ioを使ってチャットアプリを作成します。
ソケット通信を始めて扱うので、はじめにChatGPTに内容を説明してもらいました。
ソケット通信とは？（ChatGPT）
ソケット通信は、ネットワーク上でデータをやり取りするための手法の一つです。ソケットとは、コンピュータがネットワーク経由で別のコンピュータやデバイスと通信するための「出入口」にあたるものです。これにより、データの送信元と受信先が直接接続してリアルタイムなやりとりができるようになります。
ソケット通信は主に以下のようなプロトコルで行われます。
TCP (Transmission Control Protocol)
特徴：信頼性の高い通信が可能で、データが順序通りに到達するように制御されます。
用途：ファイル転送、メール送受信、Webページの閲覧など。
仕組み：送信側がデータを送信すると、受信側はそのデータを受け取ったことを確認応答で知らせます。もしデータが途中で失われた場合は再送信を行うため、確実にデータが届くことが保証されます。UDP (User Datagram Protocol)
特徴：データの到達確認を行わないため、TCPよりも高速ですが信頼性が低いです。
用途：動画ストリーミング、オンラインゲーム、音声通話など、速度が重視されるケース。
仕組み：データを受信側に送るだけで、受信確認を行わないため遅延が少なく高速です。しかし、データが欠けたり順番が入れ替わる可能性があります。
ソケット通信の基本的な流れ：サーバー側
ソケットを作成し、ネットワークポートにバインドして待機状態（リッスン）に入ります。
クライアントからの接続要求を待ち、接続があればそれを受け入れ、通信を開始します。
ソケット通信の基本的な流れ：クライアント側
ソケットを作成し、サーバーのIPアドレスとポート番号を指定して接続をリクエストします。
接続が確立すると、サーバーとクライアントの間でデータを送受信できます。
ソケット通信の利用例
チャットアプリ：クライアントとサーバーが常に接続された状態で、リアルタイムにメッセージの送受信を行います。
オンラインゲーム：UDPを利用して素早いデータ通信を行うため、プレイヤーの動きやゲームの状況がリアルタイムで反映されます。
IoTデバイス：センサーなどのデータをサーバーに送信し、リアルタイムで監視や制御を行う場合に使われます。
ソケット通信は、リアルタイム性が求められるアプリケーションやシステムで幅広く活用されており、TCPやUDPを適切に使い分けることで、効率的で効果的な通信が可能です。
→今回のように、リアルタイムで全ユーザーに情報を表示するために使うための方法なんだな、と理解しました。
アプリ作成準備
実際にアプリを作っていきます。
npm init -y でpackage.jsonを生成する
2. sudo npm install expressでExpressをインストールする
sudoをつけるのはmacユーザーのみ。
3. sudo npm install socket.ioでsocketライブラリをインストールするpackage.jsonの中身を編集する。
ここまででpackage.jsonにexpressとsocket.ioが追加される。
4.package.jsonの中身を編集する
package.jsonの"test":"…"を "dev": "nodemon server.js" に書き換える。
必要に応じてnodemon（ファイルを保存するたびにサーバーがリロードされる）をインストールする。( sudo npm install -g nodemon)
実装
完成後のコードを書いて、ポイントをメモしておきます。
実行するときはnpm run devとしました。
サーバー側の設定：package.jsonと同じディレクトリにserver.jsを作成する。
const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
const io = require("socket.io")(server);
const PORT =3000;
//①index.htmlファイルを読み込むようにする
app.get("/",(req,res)=>{
res.sendFile(__dirname + "/index.html");
})
//②socket.ioのライブラリを使ってユーザーと接続する（サーバー側）
io.on("connection",(socket)=>{
console.log("ユーザーが接続しました");
//⑥送信された"chat message"をサーバー側で受け取れるようにする
socket.on("chat message",(msg)=>{ //受け取るときはon
//⑦"chat message"をクライアント側に送信する（全ユーザーが見れるように）
io.emit("chat message",msg); });
});
server.listen(PORT,()=>{
console.log("listening on 3000");
})
クライアント側の設定：package.jsonと同じディレクトリにindex.htmlを作成する。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>リアルタイムチャットアプリ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
//③メッセージを送るフォームを作成する
<ul id="messages"></ul>
<form action="" id="form">
<input id="input" autocomplete="off">
<button>Send</button>
</form>
//④socket.ioのライブラリを使ってユーザーと接続する（クライアント側）
<script src="/socket.io/socket.io.js"></script>
<script>
let socket = io();
//⑤メッセージを取得する機能を実装する
const form = document.getElementById("form");
const input = document.getElementById("input");
const messages = document.getElementById("messages"); form.addEventListener("submit",function(e){
e.preventDefault(); //送信した時のリロードをなくす
if(input.value){
socket.emit("chat message",input.value); //emitは送信するという関数→"chat message"という名前で送信するよ
input.value =""; //送信した後にカラムを空にする
} });
//⑧"chat message"をクライアント側から受け取る（全ユーザーが見れるように）
socket.on("chat message",function(msg){
let item = document.createElement("li");
item.textContent = msg;
messages.appendChild(item);
});
</script>
</body>
</html>
感想
今日は、socket.ioを使ってチャットアプリを作成しました。
先月javascriptの演習を繰り返した効果か、要素の取得や生成がすんなり理解できて嬉しいです。socket.ioは初めて取り扱ったので、こんなのがあったな〜くらいは覚えておきたいものだ。アプリ作成の流れは、サーバー側、クライアント側の両者でsocket.ioを使う設定をした上で、クライアント側でinput→サーバーで受け取ってクライアント側で表示できるようにクライアント側に送信→クライアント側で受け取る、でした。
それでは今日はこの辺りで。