Merge pull request #22 from ks6088ts-labs/feature/issue-20_websockets

ks6088ts · web-flow · commit e4e96d250aea · 2025-07-06T15:57:07.000+09:00
add websockets template
diff --git a/docs/index.md b/docs/index.md
@@ -122,6 +122,7 @@ uv run python scripts/speeches.py delete-transcription "$JOB_ID" --force
 
 - [FastAPI](https://fastapi.tiangolo.com/)
 - [Settings and Environment Variables](https://fastapi.tiangolo.com/advanced/settings/)
+- [WebSockets](https://fastapi.tiangolo.com/advanced/websockets/)
 
 ## OpenTelemetry
 
diff --git a/pyproject.toml b/pyproject.toml
@@ -16,6 +16,7 @@ dependencies = [
     "opentelemetry-instrumentation-fastapi>=0.52b1",
     "pydantic-settings>=2.10.1",
     "typer>=0.16.0",
+    "websockets>=15.0.1",
 ]
 
 [project.optional-dependencies]
diff --git a/template_fastapi/app.py b/template_fastapi/app.py
@@ -11,7 +11,7 @@
 from opentelemetry.instrumentation.fastapi import FastAPIInstrumentor
 from opentelemetry.trace import Span
 
-from template_fastapi.routers import demos, files, foodies, games, items, speeches
+from template_fastapi.routers import chats, demos, files, foodies, games, items, speeches
 
 app = FastAPI()
 
@@ -42,3 +42,4 @@ def server_request_hook(span: Span, scope: dict):
 app.include_router(foodies.router)
 app.include_router(files.router)
 app.include_router(speeches.router)
+app.include_router(chats.router)
diff --git a/template_fastapi/routers/chats.py b/template_fastapi/routers/chats.py
@@ -0,0 +1,57 @@
+from fastapi import APIRouter, WebSocket, WebSocketDisconnect
+from fastapi.responses import HTMLResponse
+
+router = APIRouter()
+
+
+class ConnectionManager:
+    def __init__(self):
+        self.active_connections: list[WebSocket] = []
+
+    async def connect(self, websocket: WebSocket):
+        await websocket.accept()
+        self.active_connections.append(websocket)
+
+    def disconnect(self, websocket: WebSocket):
+        self.active_connections.remove(websocket)
+
+    async def send_personal_message(self, message: str, websocket: WebSocket):
+        await websocket.send_text(message)
+
+    async def broadcast(self, message: str):
+        for connection in self.active_connections:
+            await connection.send_text(message)
+
+
+manager = ConnectionManager()
+
+
+@router.get(
+    "/chats/",
+    tags=["chats"],
+)
+async def get():
+    # read the HTML file
+    try:
+        with open("template_fastapi/templates/chats.html") as file:
+            html = file.read()
+    except FileNotFoundError:
+        html = "<h1>Chat page not found</h1>"
+    except Exception as e:
+        html = f"<h1>Error reading chat page: {str(e)}</h1>"
+    return HTMLResponse(html)
+
+
+@router.websocket(
+    "/ws/{client_id}",
+)
+async def websocket_endpoint(websocket: WebSocket, client_id: int):
+    await manager.connect(websocket)
+    try:
+        while True:
+            data = await websocket.receive_text()
+            await manager.send_personal_message(f"You wrote: {data}", websocket)
+            await manager.broadcast(f"Client #{client_id} says: {data}")
+    except WebSocketDisconnect:
+        manager.disconnect(websocket)
+        await manager.broadcast(f"Client #{client_id} left the chat")
diff --git a/template_fastapi/templates/chats.html b/template_fastapi/templates/chats.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Chat</title>
+    </head>
+    <body>
+        <h1>WebSocket Chat</h1>
+        <h2>Your ID: <span id="ws-id"></span></h2>
+        <form action="" onsubmit="sendMessage(event)">
+            <input type="text" id="messageText" autocomplete="off"/>
+            <button>Send</button>
+        </form>
+        <ul id='messages'>
+        </ul>
+        <script>
+            var client_id = Date.now()
+            document.querySelector("#ws-id").textContent = client_id;
+            var ws = new WebSocket(`ws://localhost:8000/ws/${client_id}`);
+            ws.onmessage = function(event) {
+                var messages = document.getElementById('messages')
+                var message = document.createElement('li')
+                var content = document.createTextNode(event.data)
+                message.appendChild(content)
+                messages.appendChild(message)
+            };
+            function sendMessage(event) {
+                var input = document.getElementById("messageText")
+                ws.send(input.value)
+                input.value = ''
+                event.preventDefault()
+            }
+        </script>
+    </body>
+</html>
diff --git a/uv.lock b/uv.lock

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ dependencies = [`
`16`	`16`	`"opentelemetry-instrumentation-fastapi>=0.52b1",`
`17`	`17`	`"pydantic-settings>=2.10.1",`
`18`	`18`	`"typer>=0.16.0",`
	`19`	`+ "websockets>=15.0.1",`
`19`	`20`	`]`
`20`	`21`
`21`	`22`	`[project.optional-dependencies]`