close

基本的な WebSocket サーバーを構築する Node.js

チャットアプリケーションは 、インタラクティブで魅力的なユーザー エクスペリエンスを作成するために を 活用 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