🏗 コードの仕組み
1️⃣ HTML（チャット画面の作成）
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" />
<button>送信する</button>
</form>
<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);
input.value = "";
}
});
socket.on("chat message", function (msg) {
let item = document.createElement("li");
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
2️⃣ コードの解説
✅ <ul id="messages"></ul>
メッセージの一覧を表示する部分！ <li> 要素が追加されていく。
✅ <form> & <input>
ユーザーがメッセージを入力し、送信するためのフォーム。
✅ Socket.IOの読み込み
<script src="/socket.io/socket.io.js"></script>
👉 サーバーとのリアルタイム通信を可能にするライブラリを読み込む！
✅ JavaScriptの処理
- メッセージを送信
form.addEventListener("submit", function (e) {
e.preventDefault(); // ページのリロードを防ぐ
if (input.value) {
socket.emit("chat message", input.value); // メッセージをサーバーへ送信！
input.value = ""; // 入力欄をクリア
}
});
- メッセージを受信＆表示
socket.on("chat message", function (msg) {
let item = document.createElement("li");
item.textContent = msg; // メッセージをセット
messages.appendChild(item); // リストに追加
window.scrollTo(0, document.body.scrollHeight); // 最新メッセージを表示
});
🎯 動作の流れ
- ユーザーがメッセージを入力し、「送信する」を押す
- JavaScriptが
socket.emit("chat message", メッセージ)でサーバーに送信 - サーバーがメッセージを受け取り、他のユーザーに送信
- クライアントが
socket.on("chat message", メッセージ)で受信し、画面に表示！
🚀 発展させるなら？
✅ ニックネーム機能（誰が送ったかわかるように）
✅ メッセージの日時表示 ⏰
✅ オシャレなデザインにカスタマイズ 🎨
Socket.IOを使えば、簡単にリアルタイムチャットを実装できるので、ぜひ試してみてね！😆🔥