Why WebSockets enable real-time communication in FastAPI - Performance Evidence

Performance: Why WebSockets enable real-time communication

HIGH IMPACT

WebSockets impact the interaction responsiveness and reduce network overhead for real-time data exchange.

Sending frequent updates from server to client in real-time

FastAPI

from fastapi import FastAPI, WebSocket
import asyncio

app = FastAPI()

@app.websocket('/ws')
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    for i in range(10):
        await websocket.send_text(f'{i}')
        await asyncio.sleep(1)
    await websocket.close()

Keeps a single persistent connection open, reducing handshake overhead and enabling instant message delivery.

📈 Performance GainSingle connection with no repeated handshakes, reducing latency and CPU load

Sending frequent updates from server to client in real-time

FastAPI

import time
from fastapi import FastAPI
from fastapi.responses import StreamingResponse

app = FastAPI()

@app.get('/stream')
async def stream():
    def event_generator():
        for i in range(10):
            yield f'data: {i}\n\n'
            time.sleep(1)
    return StreamingResponse(event_generator(), media_type='text/event-stream')

Uses HTTP streaming which keeps the connection open but can still cause latency and overhead compared to WebSockets.

📉 Performance CostTriggers HTTP overhead and potential latency due to lack of full-duplex communication

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
HTTP Polling or Streaming	Multiple connections opened/closed	Multiple reflows if UI updates per message	Higher paint cost due to delayed updates	[X] Bad
WebSocket Persistent Connection	Single connection maintained	Minimal reflows triggered only on data update	Lower paint cost with instant updates	[OK] Good

Rendering Pipeline

WebSocket communication bypasses repeated HTTP request-response cycles, maintaining an open channel that allows immediate data transfer, improving interaction responsiveness.

→Network

→JavaScript Execution

→Rendering

⚠️ BottleneckNetwork latency and handshake overhead in HTTP polling

Core Web Vital Affected

INP

WebSockets impact the interaction responsiveness and reduce network overhead for real-time data exchange.

Optimization Tips

1Use WebSockets to keep a single open connection for real-time data.

2Avoid repeated HTTP requests to reduce network latency and CPU load.

3Monitor WebSocket frames in DevTools Network panel to ensure persistent connection.

Performance Quiz - 3 Questions

What is the main performance benefit of using WebSockets over HTTP polling for real-time updates?

A Sends larger data packets to reduce network usage

B Maintains a single persistent connection reducing handshake overhead

C Automatically caches data on the client to speed up rendering

D Uses multiple connections to parallelize data transfer

DevTools: Network

How to check: Open DevTools, go to Network tab, filter by WS to see WebSocket frames and connection status.

What to look for: Look for a single persistent WebSocket connection with frequent small frames instead of many HTTP requests.

Practice

1. Why do WebSockets enable real-time communication in FastAPI applications?

easy

A. Because they only send data from server to client once

B. Because they use HTTP requests repeatedly to fetch new data

C. Because they keep a constant open connection for instant two-way data exchange

D. Because they require manual page refresh to update data

Solution

1. Step 1: Understand WebSocket connection behavior

   WebSockets maintain a persistent connection allowing continuous data flow without reconnecting.

2. Step 2: Compare with HTTP request-response model

   Unlike HTTP, which closes after each request, WebSockets allow instant two-way communication.

3. Final Answer:

   Because they keep a constant open connection for instant two-way data exchange -> Option C

4. Quick Check:

   Persistent connection = real-time communication [OK]

Hint: Remember: WebSockets keep connection open for instant updates [OK]

Common Mistakes:

• Confusing WebSockets with repeated HTTP requests
• Thinking WebSockets only send data one way
• Assuming page refresh is needed for updates

2. Which of the following is the correct way to define a WebSocket route in FastAPI?

easy

A. app.websocket('/ws') async def websocket_endpoint(websocket): await websocket.accept()

B. app.get('/ws') async def websocket_endpoint(websocket): await websocket.accept()

C. app.post('/ws') def websocket_endpoint(websocket): websocket.accept()

D. app.websocket('/ws') def websocket_endpoint(): websocket.accept()

Solution

1. Step 1: Identify correct decorator and async function

   FastAPI uses @app.websocket decorator and async def for WebSocket routes.

2. Step 2: Confirm usage of await websocket.accept()

   Accepting the connection requires awaiting websocket.accept() inside async function.

3. Final Answer:

   app.websocket('/ws') async def websocket_endpoint(websocket): await websocket.accept() -> Option A

4. Quick Check:

   Use @app.websocket + async + await accept() [OK]

Hint: WebSocket routes need @app.websocket and async functions [OK]

Common Mistakes:

• Using HTTP method decorators like @app.get for WebSockets
• Forgetting async or await keywords
• Defining function without websocket parameter

3. Given this FastAPI WebSocket code snippet, what will the client receive after sending 'hello'?

from fastapi import FastAPI, WebSocket
app = FastAPI()

@app.websocket('/ws')
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    data = await websocket.receive_text()
    await websocket.send_text(f'Received: {data}')

medium

A. 'hello'

B. Error: websocket not accepted

C. No response, connection closed

D. 'Received: hello'

Solution

1. Step 1: Analyze the receive and send calls

   The server waits for text, receives 'hello', then sends back 'Received: hello'.

2. Step 2: Confirm connection acceptance

   websocket.accept() is awaited, so connection is open and ready for communication.

3. Final Answer:

   'Received: hello' -> Option D

4. Quick Check:

   Server echoes with prefix 'Received:' [OK]

Hint: Look for send_text with formatted string after receive_text [OK]

Common Mistakes:

• Assuming no response is sent
• Ignoring the awaited accept() call
• Confusing received data with sent data

4. What is wrong with this FastAPI WebSocket handler code?

@app.websocket('/ws')
async def websocket_endpoint(websocket: WebSocket):
    data = await websocket.receive_text()
    await websocket.accept()
    await websocket.send_text(f'Got: {data}')

medium

A. Incorrect route decorator used

B. Calling receive_text before accepting the connection

C. Using send_text instead of send_bytes

D. Missing async keyword in function definition

Solution

1. Step 1: Check order of accept and receive calls

   WebSocket connection must be accepted before receiving data.

2. Step 2: Identify the error caused by wrong order

   Calling receive_text before accept() causes runtime error as connection is not open yet.

3. Final Answer:

   Calling receive_text before accepting the connection -> Option B

4. Quick Check:

   Accept connection before receiving data [OK]

Hint: Always await websocket.accept() before receiving messages [OK]

Common Mistakes:

• Receiving data before accepting connection
• Forgetting async keyword
• Confusing send_text with send_bytes

5. You want to build a live chat app using FastAPI WebSockets. Which approach best ensures real-time updates to all connected clients?

hard

A. Keep a list of connected WebSocket objects and broadcast messages to all

B. Send HTTP requests every second to fetch new messages

C. Open a new WebSocket connection for each message sent

D. Use a database trigger to push messages without WebSockets

Solution

1. Step 1: Understand real-time broadcast requirement

   To update all clients instantly, server must send messages to all open connections.

2. Step 2: Identify best method for broadcasting

   Maintaining a list of connected WebSocket objects allows sending messages to all clients immediately.

3. Final Answer:

   Keep a list of connected WebSocket objects and broadcast messages to all -> Option A

4. Quick Check:

   Broadcast via open WebSocket connections = real-time updates [OK]

Hint: Broadcast by storing and sending to all connected sockets [OK]

Common Mistakes:

• Using repeated HTTP polling instead of WebSockets
• Opening new connections per message wastes resources
• Relying on database triggers without WebSocket communication