Node.jsとSocket.ioを使用してリアルタイムのチャットアプリケーションの構築方法
このチュートリアルでは、Node.jsとSocket.ioを使用してリアルタイムのチャットアプリケーションを構築する方法を紹介します。
1. プロジェクトのセットアップ
まずは、プロジェクトのディレクトリを作成し、以下のコマンドを使用してpackage.jsonを作成します。
mkdir chat-app
cd chat-app
npm init -y
次に、以下のコマンドを使用してsocket.ioとexpressをインストールします。
npm install socket.io express
2. サーバーの設定
次に、以下のコードをindex.jsに記述して、サーバーを設定します。
const express = require("express");
const app = express();
const http = require("http").createServer(app);
const io = require("socket.io")(http);
app.use(express.static(__dirname + "/public"));
app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html");
});
io.on("connection", function (socket) {
console.log("a user connected");
socket.on("disconnect", function () {
console.log("user disconnected");
});
});
http.listen(3000, function () {
console.log("listening on *:3000");
});
3. クライアントの設定
次に、以下のコードをpublic/index.htmlに記述して、クライアントを設定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chat App</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f9f9f9;
font-family: "Helvetica Neue", sans-serif;
font-size: 16px;
line-height: 1.4;
color: #333;
padding: 20px;
}
form {
margin-top: 20px;
}
input[type="text"] {
width: 100%;
height: 40px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
input[type="submit"] {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
ul {
list-style-type: none;
margin-top: 20px;
}
li {
margin-bottom: 10px;
}
span {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Chat App</h1>
<form>
<input type="text" id="message-input" placeholder="Enter a message">
<input type="submit" value="Send">
</form>
<ul id="message-list"></ul>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const messageList = document.getElementById("message-list");
const messageInput = document.getElementById("message-input");
document.querySelector("form").addEventListener("submit", function (e) {
e.preventDefault();
if (messageInput.value) {
socket.emit("chat message", messageInput.value);
messageInput.value = "";
}
});
socket.on("chat message", function (msg) {
const item = document.createElement("li");
item.textContent = msg;
messageList.appendChild(item);
});
</script>
</body>
</html>
4. アプリケーションの起動
最後に、以下のコマンドを使用してアプリケーションを起動します。
node index.js
これで、ブラウザで http://localhost:3000/ にアクセスすると、リアルタイムのチャットアプリケーションが使用できるようになります。
上記のように、Node.jsとSocket.ioを使用してリアルタイムのチャットアプリケーションを構築する方法を解説しました。ご参考になれば幸いです。