websocketを用いたチャットアプリをwebサイトで作成したい: 犬小屋は、終わらない(IT)

2025年08月07日

websocketを用いたチャットアプリをwebサイトで作成したい

質問

websocketを用いたチャットアプリをwebサイトで作成したい

解答

WebSocketを用いたチャットアプリをWebサイトで作成するには、サーバとクライアントが双方向・常時接続を維持できる構成を設計する必要があります。ここでは、以下の内容でわかりやすく解説します。

✅ 目標：WebSocketを使った簡易チャットアプリの構成

✅ 構成概要

[ ブラウザ ] ←→ [ WebSocket サーバ ] ←→ [ 他のクライアント ]

ブラウザ（HTML + JavaScript）がWebSocketサーバに接続
サーバが接続中の他クライアントにメッセージを中継

✅ 使用技術例（最小構成）

要素	使用技術（例）
クライアント	HTML + JavaScript (WebSocket API)
サーバ	Python（FastAPI / Flask + WebSocket） or Node.js（ws）
通信プロトコル	WebSocket (`ws://` or `wss://`)

✅ ステップ1：サーバサイド（Python + FastAPI の例）

# server.pyfrom fastapi import FastAPI, WebSocket, WebSocketDisconnectfrom fastapi.responses import HTMLResponseimport uvicornapp = FastAPI()clients = []@app.websocket("/ws")async def websocket_endpoint(websocket: WebSocket):    await websocket.accept()    clients.append(websocket)    try:        while True:            data = await websocket.receive_text()            for client in clients:                await client.send_text(f"Message: {data}")    except WebSocketDisconnect:        clients.remove(websocket)if __name__ == "__main__":    uvicorn.run("server:app", host="0.0.0.0", port=8000)

✅ ステップ2：クライアントサイド（HTML + JavaScript）

<!DOCTYPE html><html><head>  <title>WebSocket Chat</title></head><body>  <h2>チャット</h2>  <input id="messageInput" type="text" placeholder="メッセージ入力">  <button onclick="sendMessage()">送信</button>  <ul id="messages"></ul>  <script>    const socket = new WebSocket("ws://localhost:8000/ws");    socket.onmessage = function(event) {      const messages = document.getElementById("messages");      const message = document.createElement("li");      message.textContent = event.data;      messages.appendChild(message);    };    function sendMessage() {      const input = document.getElementById("messageInput");      socket.send(input.value);      input.value = "";    }  </script></body></html>

✅ ステップ3：動作確認

ターミナルでサーバ起動：
```
python server.py
```
ブラウザでHTMLファイルを開く（複数開いてみる）
片方で送信すると、すべての接続先にメッセージが届く

✅ 応用したい機能（オプション）

機能	実装方法の例
ユーザー名の導入	接続時にクエリパラメータや初回メッセージで設定
メッセージの履歴保存	SQLiteやRedisなどに保存
グループチャット	WebSocketルーム機能を実装（例：部屋名で分岐）
スケーラビリティ	Redis pub/sub や WebSocket管理ライブラリを使用
HTTPS対応	`wss://` にし、証明書を設定（nginxなどのリバースプロキシ経由）

✅ 注意点

項目	内容
CORS	フロントとバックが別ドメインの場合、CORS設定が必要
セキュリティ	認証（トークンやセッション）を導入しないと誰でも接続可
負荷分散	WebSocketは状態を持つため、ロードバランサはSticky SessionやRedis併用が必要
長時間接続	ハートビートや切断検知を実装しないと不安定になることがある