Added broadcaster dependency

2023-11-20 19:45:47 +01:00
parent fe81b59e36
commit 026b1a314a
8 changed files with 125 additions and 54 deletions
--- a/pkgs/clan-cli/clan_cli/webui/app.py
+++ b/pkgs/clan-cli/clan_cli/webui/app.py
@@ -8,7 +8,7 @@ from fastapi.staticfiles import StaticFiles
 from ..errors import ClanError
 from .assets import asset_path
 from .error_handlers import clan_error_handler
-from .routers import health, root
+from .routers import health, root, socket_manager

 origins = [
    "http://localhost:3000",
@@ -29,9 +29,11 @@ def setup_app() -> FastAPI:

    app.include_router(health.router)

+    app.include_router(socket_manager.router)
+
    # Needs to be last in register. Because of wildcard route
    app.include_router(root.router)
-    app.add_exception_handler(ClanError, clan_error_handler)
+    app.add_exception_handler(ClanError, clan_error_handler) # type: ignore

    app.mount("/static", StaticFiles(directory=asset_path()), name="static")

--- a/pkgs/clan-cli/clan_cli/webui/routers/socket_manager.py
+++ b/pkgs/clan-cli/clan_cli/webui/routers/socket_manager.py
@@ -0,0 +1,79 @@
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect
+from fastapi.responses import HTMLResponse
+from fastapi import APIRouter, Response
+
+router = APIRouter()
+
+html = """
+<!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:2979/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>
+"""
+
+class ConnectionManager:
+    def __init__(self) -> None:
+        self.active_connections: list[WebSocket] = []
+
+    async def connect(self, websocket: WebSocket) -> None:
+        await websocket.accept()
+        self.active_connections.append(websocket)
+
+    def disconnect(self, websocket: WebSocket) -> None:
+        self.active_connections.remove(websocket)
+
+    async def send_personal_message(self, message: str, websocket: WebSocket) -> None:
+        await websocket.send_text(message)
+
+    async def broadcast(self, message: str) -> None:
+        for connection in self.active_connections:
+            await connection.send_text(message)
+
+
+manager = ConnectionManager()
+
+@router.get("/ws_example")
+async def get() -> HTMLResponse:
+    return HTMLResponse(html)
+
+@router.websocket("/ws/{client_id}")
+async def websocket_endpoint(websocket: WebSocket, client_id: int) -> None:
+    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")