【Node.js入門】Socket.IOでシンプルチャットアプリを作ってみよう！

2024-07-02

Node.js と Socket.IO を使った最もシンプルなチャットアプリ例

Socket.IO は、双方向リアルタイム通信を可能にする JavaScript ライブラリです。チャットアプリやソーシャルメディアアプリなど、リアルタイムなデータ更新が必要なアプリケーションによく使われます。

このチュートリアルでは、Node.js と Socket.IO を使って最もシンプルなチャットアプリを作成する方法を説明します。この例では、ユーザーがメッセージを入力して送信すると、そのメッセージがすべての接続済みのユーザーにブロードキャストされます。

前提知識

このチュートリアルを始める前に、以下の知識が必要です。

  • Node.js の基本的な知識
  • HTML と CSS の基本的な知識

必要なもの

  • テキストエディタ
  • Node.js

手順

  1. プロジェクトを初期化する
npm init -y
  1. 必要なパッケージをインストールする
npm install socket.io
  1. サーバーコードを作成する
const io = require('socket.io')(3000);

io.on('connection', (socket) => {
  console.log('ユーザーが接続しました:', socket.id);

  socket.on('chat message', (msg) => {
    console.log('メッセージ:', msg);
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('ユーザーが切断しました:', socket.id);
  });
});
  1. クライアント側の HTML を作成する
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>チャットアプリ</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.0/socket.io.min.js"></script>
</head>
<body>
  <h1>チャット</h1>
  <div id="chat-messages"></div>
  <input type="text" id="message-input">
  <button id="send-button">送信</button>

  <script>
    const socket = io();

    const chatMessages = document.getElementById('chat-messages');
    const messageInput = document.getElementById('message-input');
    const sendButton = document.getElementById('send-button');

    sendButton.addEventListener('click', () => {
      const message = messageInput.value;
      if (message) {
        socket.emit('chat message', message);
        messageInput.value = '';
      }
    });

    socket.on('chat message', (msg) => {
      const newMessage = document.createElement('p');
      newMessage.textContent = msg;
      chatMessages.appendChild(newMessage);
    });
  </script>
</body>
</html>
  1. サーバーを起動する
node index.js

説明

サーバー側

  • io.on('connection', (socket) => {...})：このイベントハンドラーは、新しいユーザーが接続したときに呼び出されます。
  • socket.on('chat message', (msg) => {...})：このイベントハンドラーは、クライアントから chat message イベントを受信したときに呼び出されます。
  • io.emit('chat message', msg);：このコードは、すべての接続済みのユーザーに chat message イベントを送信します。

クライアント側

  • const newMessage = document.createElement('p');：このコードは、新しいメッセージ要素を作成します。
  • newMessage.textContent = msg;：このコードは、メッセージ要素のテキストコンテンツをメッセージに設定します。
  • chatMessages.appendChild(newMessage);：このコードは、新しいメッセージ要素を chat-messages コンテナーに追加します。

補足

この例は非常にシンプルなものです。実際のアプリケーションでは、ユーザー認証、メッセージの保存、エラー処理などの機能を追加する必要があります。

  • [Node.js で Socket.IO を使用する](https://www.freecode


Node.js と Socket.IO を使ったチャットアプリ サンプルコード

サーバー側 (index.js)

const io = require('socket.io')(3000);

io.on('connection', (socket) => {
  console.log('ユーザーが接続しました:', socket.id);

  socket.on('chat message', (msg) => {
    console.log('メッセージ:', msg);
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('ユーザーが切断しました:', socket.id);
  });
});

クライアント側 (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>チャットアプリ</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.0/socket.io.min.js"></script>
</head>
<body>
  <h1>チャット</h1>
  <div id="chat-messages"></div>
  <input type="text" id="message-input">
  <button id="send-button">送信</button>

  <script>
    const socket = io();

    const chatMessages = document.getElementById('chat-messages');
    const messageInput = document.getElementById('message-input');
    const sendButton = document.getElementById('send-button');

    sendButton.addEventListener('click', () => {
      const message = messageInput.value;
      if (message) {
        socket.emit('chat message', message);
        messageInput.value = '';
      }
    });

    socket.on('chat message', (msg) => {
      const newMessage = document.createElement('p');
      newMessage.textContent = msg;
      chatMessages.appendChild(newMessage);
    });
  </script>
</body>
</html>

使い方

  1. 以下のコマンドを実行して、サーバーを起動します。
node index.js


Node.js + Socket.IO でチャットアプリを作成するその他の方法

ネームスペースを使用すると、異なるチャットルームやトピック間で通信を整理することができます。例：

io.on('connection', (socket) => {
  console.log('ユーザーが接続しました:', socket.id);

  socket.on('join room', (room) => {
    socket.join(room);
    console.log('ユーザーが部屋', room, 'に参加しました:', socket.id);

    socket.on('chat message', (msg) => {
      io.to(room).emit('chat message', msg);
    });
  });

  socket.on('disconnect', () => {
    console.log('ユーザーが切断しました:', socket.id);
  });
});

const socket = io();

socket.on('chat message', (msg) => {
  console.log('メッセージ:', msg);
});

socket.emit('join room', 'room1'); // 特定のチャットルームに参加

socket.on('chat message', (msg) => {
  console.log('ルーム 1 のメッセージ:', msg);
}); // ルーム 1 のメッセージのみを処理

プライベートメッセージを実装するには、個々のユーザー間で直接メッセージを送信できるようにする必要があります。例：

io.on('connection', (socket) => {
  console.log('ユーザーが接続しました:', socket.id);

  socket.on('private message', (to, msg) => {
    socket.to(to).emit('private message', socket.id, msg);
  });

  // ... (他のイベントハンドラー)
});

const socket = io();

socket.on('private message', (from, msg) => {
  console.log('プライベートメッセージ:', from, ':', msg);
});

socket.emit('private message', 'userID', 'こんにちは！'); // 特定のユーザーにプライベートメッセージを送信

イベントのバリデーション

イベントデータの整合性を確保するために、イベントのバリデーションを実装することができます。例：

io.on('connection', (socket) => {
  console.log('ユーザーが接続しました:', socket.id);

  socket.on('chat message', (msg) => {
    if (typeof msg !== 'string' || msg.length > 255) {
      return; // 無効なメッセージを無視
    }

    io.emit('chat message', msg);
  });

  // ... (他のイベントハンドラー)
});

const socket = io();

socket.on('chat message', (msg) => {
  console.log('メッセージ:', msg);
});

socket.emit('chat message', '有効なメッセージ'); // 有効なメッセージを送信

ミドルウェアの使用

Socket.IO ミドルウェアを使用して、接続、認証、エラー処理などの一般的なタスクを自動化することができます。

これらの例は、Node.js と Socket.IO でチャットアプリを作成する際に使用できる追加機能を示すほんの一例です。創造性を発揮し、ニーズに合わせてアプリケーションをカスタマイズしてください。


    node.js socket.io

    Node.jsでファイル操作をマスターしよう！ディレクトリ内のファイル名のリストを取得する方法

    方法 1: fs. readdirSync()を使用するfs. readdirSync() は、指定したディレクトリ内のファイル名のリストを取得する同期的な関数です。この関数は、ファイル名の配列を返します。このコードは、./path/to/directory ディレクトリ内のすべてのファイル名のリストを出力します。...

     
    javascript node.js directory listing Node.jsでファイル操作をマスターしよう！ディレクトリ内のファイル名のリストを取得する方法

    Node.jsとnpmでモジュールインストール時に発生する「message failed to fetch from registry」エラーのその他の解決方法

    このエラーの原因はいくつか考えられますが、最も一般的なのは以下の2つです。ネットワーク接続の問題npmはモジュールの情報を取り出すためにインターネット接続が必要です。ネットワーク接続に問題がある場合は、このエラーが発生します。解決策インターネット接続が正常に確立されていることを確認します。...

     
    node.js npm Node.jsとnpmでモジュールインストール時に発生する「message failed to fetch from registry」エラーのその他の解決方法

    Node.jsパッケージを自在にインストール！macOSでnpmグローバルパスプレフィックスを操る方法

    npmグローバルパスプレフィックスは、macOS上でNode. jsパッケージをグローバルにインストールする際に使用されるディレクトリを指定します。デフォルトでは、このディレクトリは~/.npm-globalですが、変更することができます。...

     
    macos node.js npm Node.jsパッケージを自在にインストール！macOSでnpmグローバルパスプレフィックスを操る方法

    AngularJSはシングルページアプリケーション（SPA）専用なの？

    いいえ、AngularJSはSPA専用ではありません。従来のマルチページアプリケーションや、ハイブリッドモバイルアプリなど、様々な種類のWebアプリケーション開発に使用できます。しかし、SPA開発において特に強力な機能と利便性を備えているため、SPAでよく使用されます。...

     
    javascript node.js angularjs AngularJSはシングルページアプリケーション（SPA）専用なの？

    Node.jsを最新バージョンに更新

    Node. jsとLodashでファイル操作を行う際に、「Error: EACCES: permission denied」というエラーが発生することがあります。これは、アクセス権限不足によってファイル操作が許可されていないことを示します。...

     
    node.js lodash Node.jsを最新バージョンに更新

    SQL SQL SQL SQL Amazon で見る


    【保存版】Node.js + Socket.IOチュートリアル！クライアントからサーバーへ接続する基本と応用
    【保存版】Node.js + Socket.IOチュートリアル！クライアントからサーバーへ接続する基本と応用

    このチュートリアルでは、Node. jsとSocket. IOを使って、クライアント側からSocket. IOサーバーへ接続する方法を解説します。Socket. IOは、リアルタイムな双方向通信を可能にするJavaScriptライブラリです。Webサーバーとクライアント間でシームレスなデータ転送を実現し、チャットアプリやゲームなど、様々なリアルタイムアプリケーション開発に活用されます。