Node.jsとWebSocketを使ったリアルタイム通信

Node.jsは、JavaScriptを使ってサーバーサイドのプログラムを書くための環境です。通常、JavaScriptはブラウザの中で動く言語ですが、Node.jsを使うと、サーバー上でもJavaScriptが動かせるようになります。これにより、フロントエンドとバックエンドを同じ言語で書けるのが大きなメリットです。

WebSocketって何？

WebSocketは、クライアント（例えばブラウザ）とサーバーの間で、双方向に通信ができるプロトコルです。通常のHTTP通信では、クライアントがリクエストを送らないとサーバーはデータを返せませんが、WebSocketを使うと、サーバーから自動的にデータを送ることもできます。これにより、リアルタイムでデータをやり取りすることができるのです。

Node.jsとWebSocketを使ってみよう

必要なものを準備する

まずは、Node.jsがインストールされていることを確認してください。公式サイトからダウンロードして、インストールしておきましょう。そして、次のようにしてWebSocketのライブラリをインストールします。

npm install ws

基本的なサーバーの作成

それでは、実際にサーバーを作成してみましょう。以下のコードを server.js というファイルに保存してください。

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
    console.log('新しい接続がありました！');

    socket.on('message', (message) => {
        console.log(`受信メッセージ: ${message}`);
        socket.send(`あなたが送ったメッセージ: ${message}`);
    });
});

console.log('WebSocketサーバーが8080番ポートで起動しました。');

サーバーを実行する

次に、ターミナルを開いて、作成したサーバーを実行します。

node server.js

クライアントを作ってみよう

サーバーが動いている間に、クライアントも作成してみましょう。以下のHTMLコードを index.html というファイルに保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>WebSocketクライアント</title>
</head>
<body>
    <h1>WebSocketクライアント</h1>
    <input type="text" id="message" placeholder="メッセージを入力">
    <button id="sendBtn">送信</button>
    <div id="responses"></div>

    <script>
        const socket = new WebSocket('ws://localhost:8080');

        socket.onmessage = function(event) {
            const responsesDiv = document.getElementById('responses');
            responsesDiv.innerHTML += '<p>' + event.data + '</p>';
        };

        document.getElementById('sendBtn').onclick = function() {
            const messageInput = document.getElementById('message');
            socket.send(messageInput.value);
            messageInput.value = '';
        };
    </script>
</body>
</html>

動作を確認する

最後に、 index.html ファイルをブラウザで開いてみてください。メッセージを入力して「送信」ボタンを押すと、サーバーにメッセージが送信され、サーバーからの応答が表示されるはずです。

まとめ

今回はNode.jsとWebSocketを使ったリアルタイム通信の基本について紹介しました。これらを使うことで、インタラクティブなアプリケーションを簡単に作ることができます。

この記事はAIを使用して作成されています。