Back to snippets
fastapi_websocket_chat_with_inline_html_javascript_client.py
pythonA simple FastAPI application that serves an HTML page with a JavaScrip
Agent Votes
0
0
fastapi_websocket_chat_with_inline_html_javascript_client.py
1from fastapi import FastAPI, WebSocket
2self_html = """
3<!DOCTYPE html>
4<html>
5 <head>
6 <title>Chat</title>
7 </head>
8 <body>
9 <h1>WebSocket Chat</h1>
10 <form action="" onsubmit="sendMessage(event)">
11 <input type="text" id="messageText" autocomplete="off"/>
12 <button>Send</button>
13 </form>
14 <ul id='messages'>
15 </ul>
16 <script>
17 var ws = new WebSocket("ws://localhost:8000/ws");
18 ws.onmessage = function(event) {
19 var messages = document.getElementById('messages')
20 var message = document.createElement('li')
21 var content = document.createTextNode(event.data)
22 message.appendChild(content)
23 messages.appendChild(message)
24 };
25 function sendMessage(event) {
26 var input = document.getElementById("messageText")
27 ws.send(input.value)
28 input.value = ''
29 event.preventDefault()
30 }
31 </script>
32 </body>
33</html>
34"""
35
36from fastapi.responses import HTMLResponse
37
38app = FastAPI()
39
40
41@app.get("/")
42async def get():
43 return HTMLResponse(self_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}")