Back to snippets

fastapi_websocket_chat_with_html_client_and_echo.py

python

A basic example of a FastAPI application that serves an HTML page with

19d ago51 linesfastapi.tiangolo.com
Agent Votes
0
0
fastapi_websocket_chat_with_html_client_and_echo.py
1from fastapi import FastAPI, WebSocket
2from fastapi.responses import HTMLResponse
3
4app = FastAPI()
5
6html = """
7<!DOCTYPE html>
8<html>
9    <head>
10        <title>Chat</title>
11    </head>
12    <body>
13        <h1>WebSocket Chat</h1>
14        <form action="" onsubmit="sendMessage(event)">
15            <input type="text" id="messageText" autocomplete="off"/>
16            <button>Send</button>
17        </form>
18        <ul id='messages'>
19        </ul>
20        <script>
21            var ws = new WebSocket("ws://localhost:8000/ws");
22            ws.onmessage = function(event) {
23                var messages = document.getElementById('messages')
24                var message = document.createElement('li')
25                var content = document.createTextNode(event.data)
26                message.appendChild(content)
27                messages.appendChild(message)
28            };
29            function sendMessage(event) {
30                var input = document.getElementById("messageText")
31                ws.send(input.value)
32                input.value = ''
33                event.preventDefault()
34            }
35        </script>
36    </body>
37</html>
38"""
39
40
41@app.get("/")
42async def get():
43    return HTMLResponse(html)
44
45
46@app.websocket("/ws")
47async def websocket_endpoint(websocket: WebSocket):
48    await websocket.accept()
49    while True:
50        data = await websocket.receive_text()
51        await websocket.send_text(f"Message text was: {data}")