WebSocket Tutorial - リアルタイムチャットアプリ

このプロジェクトは、Express.jsとSocket.IOを使用したリアルタイムチャットアプリケーションのチュートリアルです。WebSocketを使った双方向通信の基本を学ぶことができます。

機能

• リアルタイムメッセージ送信
• 複数ユーザー間でのメッセージ共有
• シンプルなWebベースのUI

技術スタック

• Node.js - サーバーサイドJavaScript実行環境
• Express.js - Webアプリケーションフレームワーク
• Socket.IO - リアルタイム双方向通信ライブラリ
• HTML/CSS/JavaScript - フロントエンド

プロジェクト構成

websocket_tutorial/
├── app.js              # メインサーバーファイル
├── package.json        # 依存関係の設定
├── package-lock.json   # 依存関係のロックファイル
├── node_modules/       # インストールされたパッケージ
└── public/             # 静的ファイル
    ├── index.html      # メインHTMLファイル
    └── script.js       # クライアントサイドJavaScript

セットアップ

前提条件

• Node.js (バージョン14以上推奨)
• npm (Node.jsに含まれています)

インストール

1. リポジトリをクローンまたはダウンロード

cd websocket_tutorial

2. 依存関係をインストール

npm install express socket.io

使用方法

サーバーの起動

node app.js

サーバーが正常に起動すると、以下のメッセージが表示されます：

Server is running on http://localhost:3000

アプリケーションの使用

1. ブラウザで http://localhost:3000 にアクセス
2. メッセージ入力欄にテキストを入力
3. 「Send」ボタンをクリックまたはEnterキーを押してメッセージを送信
4. 複数のブラウザタブ・ウィンドウを開いて、リアルタイム通信を確認

コードの説明

サーバーサイド (app.js)

• Express.jsでWebサーバーを作成
• Socket.IOでWebSocket通信を処理
• publicフォルダの静的ファイルを配信
• chat messageイベントを受信し、すべてのクライアントにブロードキャスト

クライアントサイド (public/script.js)

• Socket.IOクライアントライブラリを使用
• メッセージ送信とメッセージ受信のイベントハンドリング
• DOMを操作してメッセージをリアルタイム表示

HTML (public/index.html)

• シンプルなチャットインターフェース
• メッセージ入力フィールドと送信ボタン
• メッセージ表示用のリスト

学習ポイント

1. WebSocketの基本概念 - リアルタイム双方向通信
2. Socket.IOの使用方法 - イベントベースの通信
3. Express.jsでの静的ファイル配信
4. クライアント・サーバー間のデータ送受信

拡張アイデア

• ユーザー名の追加
• チャットルーム機能
• メッセージの永続化（データベース連携）
• ユーザーのオンライン状況表示
• ファイル送信機能
• メッセージの暗号化

トラブルシューティング

よくある問題

Q: Cannot GET /socket.io/socket.io.js エラーが発生する A: Socket.IOが正しくインストールされていない可能性があります。npm install socket.ioを再実行してください。

Q: メッセージが送信されない A: ブラウザの開発者ツールでコンソールエラーを確認してください。また、サーバーが正常に動作していることを確認してください。

Q: ポート3000が使用中エラー A: 他のアプリケーションがポート3000を使用している可能性があります。app.jsのPORT変数を別の値（例：3001）に変更してください。

ライセンス

このプロジェクトは学習目的で作成されています。自由にご利用ください。

---

作成日: 2025年10月24日