チャットアプリケーションは 、インタラクティブで魅力的なユーザー エクスペリエンスを作成するために を 活用 real-time する方法の優れた例です。 この記事では、と を 使用してチャット アプリケーション を構築する方法を説明します 。 WebSocket Node.js real-time WebSocket Node.js
ステップ 1: 環境のセットアップ
まず、 Node.js コンピュータにインストールされていることを確認してください。 プロジェクト用に新しいフォルダーを作成し、 Terminal またはを使用してそのフォルダーに移動します Command Prompt。
ステップ 2: WebSocket ライブラリのインストール
前と同様に、「ws」ライブラリを使用して WebSocket ライブラリをインストールします。
npm install ws
ステップ 3: WebSocket サーバーの構築
という名前のファイルを作成し server.js 、次のコードを記述します。
// Import the WebSocket library
const WebSocket = require('ws');
// Create a WebSocket server
const server = new WebSocket.Server({ port: 8080 });
// List of connections(clients)
const clients = new Set();
// Handle new connections
server.on('connection',(socket) => {
console.log('Client connected.');
// Add connection to the list
clients.add(socket);
// Handle incoming messages from the client
socket.on('message',(message) => {
// Send the message to all other connections
for(const client of clients) {
if(client !== socket) {
client.send(message);
}
}
});
// Handle connection close
socket.on('close',() => {
console.log('Client disconnected.');
// Remove the connection from the list
clients.delete(socket);
});
});
ステップ 4: ユーザー インターフェイス(クライアント) の作成
という名前のファイルを作成し index.html 、次のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<title>Real-Time Chat</title>
</head>
<body>
<input type="text" id="message" placeholder="Type a message">
<button onclick="send()">Send</button>
<div id="chat"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.onmessage =(event) => {
const chat = document.getElementById('chat');
chat.innerHTML += '<p>' + event.data + '</p>';
};
function send() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
ステップ 5: サーバーを実行してブラウザを開く
で Terminal 、次のコマンドを実行して WebSocket サーバーを起動します。
node server.js
Web ブラウザを開いて「 http://localhost:8080 」に移動し、 real-time チャット アプリケーションを使用します。
結論
おめでとう！ と を real-time 使用してチャット アプリケーションを 正常に構築しました 。 このアプリケーションを使用すると、ユーザーは で対話し、メッセージを送受信できます 。 このアプリケーションを引き続き拡張およびカスタマイズして、さまざまなエキサイティングな機能を作成できます。 WebSocket Node.js real-time