Yurii Motov
7 months ago
8 changed files with 8 additions and 190 deletions
@ -1,93 +0,0 @@ |
|||||
from typing import Union |
|
||||
|
|
||||
from fastapi import ( |
|
||||
Cookie, |
|
||||
Depends, |
|
||||
FastAPI, |
|
||||
Query, |
|
||||
WebSocket, |
|
||||
WebSocketException, |
|
||||
status, |
|
||||
) |
|
||||
from fastapi.responses import HTMLResponse |
|
||||
from typing_extensions import Annotated |
|
||||
|
|
||||
app = FastAPI() |
|
||||
|
|
||||
html = """ |
|
||||
<!DOCTYPE html> |
|
||||
<html> |
|
||||
<head> |
|
||||
<title>Chat</title> |
|
||||
</head> |
|
||||
<body> |
|
||||
<h1>WebSocket Chat</h1> |
|
||||
<form action="" onsubmit="sendMessage(event)"> |
|
||||
<label>Item ID: <input type="text" id="itemId" autocomplete="off" value="foo"/></label> |
|
||||
<label>Token: <input type="text" id="token" autocomplete="off" value="some-key-token"/></label> |
|
||||
<button onclick="connect(event)">Connect</button> |
|
||||
<hr> |
|
||||
<label>Message: <input type="text" id="messageText" autocomplete="off"/></label> |
|
||||
<button>Send</button> |
|
||||
</form> |
|
||||
<ul id='messages'> |
|
||||
</ul> |
|
||||
<script> |
|
||||
var ws = null; |
|
||||
function connect(event) { |
|
||||
var itemId = document.getElementById("itemId") |
|
||||
var token = document.getElementById("token") |
|
||||
ws = new WebSocket("ws://localhost:8000/items/" + itemId.value + "/ws?token=" + token.value); |
|
||||
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) |
|
||||
}; |
|
||||
event.preventDefault() |
|
||||
} |
|
||||
function sendMessage(event) { |
|
||||
var input = document.getElementById("messageText") |
|
||||
ws.send(input.value) |
|
||||
input.value = '' |
|
||||
event.preventDefault() |
|
||||
} |
|
||||
</script> |
|
||||
</body> |
|
||||
</html> |
|
||||
""" |
|
||||
|
|
||||
|
|
||||
@app.get("/") |
|
||||
async def get(): |
|
||||
return HTMLResponse(html) |
|
||||
|
|
||||
|
|
||||
async def get_cookie_or_token( |
|
||||
websocket: WebSocket, |
|
||||
session: Annotated[Union[str, None], Cookie()] = None, |
|
||||
token: Annotated[Union[str, None], Query()] = None, |
|
||||
): |
|
||||
if session is None and token is None: |
|
||||
raise WebSocketException(code=status.WS_1008_POLICY_VIOLATION) |
|
||||
return session or token |
|
||||
|
|
||||
|
|
||||
@app.websocket("/items/{item_id}/ws") |
|
||||
async def websocket_endpoint( |
|
||||
*, |
|
||||
websocket: WebSocket, |
|
||||
item_id: str, |
|
||||
q: Union[int, None] = None, |
|
||||
cookie_or_token: Annotated[str, Depends(get_cookie_or_token)], |
|
||||
): |
|
||||
await websocket.accept() |
|
||||
while True: |
|
||||
data = await websocket.receive_text() |
|
||||
await websocket.send_text( |
|
||||
f"Session cookie or query token value is: {cookie_or_token}" |
|
||||
) |
|
||||
if q is not None: |
|
||||
await websocket.send_text(f"Query parameter q is: {q}") |
|
||||
await websocket.send_text(f"Message text was: {data}, for item ID: {item_id}") |
|
||||
@ -1,83 +0,0 @@ |
|||||
from typing import List |
|
||||
|
|
||||
from fastapi import FastAPI, WebSocket, WebSocketDisconnect |
|
||||
from fastapi.responses import HTMLResponse |
|
||||
|
|
||||
app = FastAPI() |
|
||||
|
|
||||
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: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> |
|
||||
""" |
|
||||
|
|
||||
|
|
||||
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() |
|
||||
|
|
||||
|
|
||||
@app.get("/") |
|
||||
async def get(): |
|
||||
return HTMLResponse(html) |
|
||||
|
|
||||
|
|
||||
@app.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") |
|
||||
Loading…
Reference in new issue