Problem connecting WEBSOCKET via Nginx #11810

PeVen111 · 2024-07-08T18:02:01Z

PeVen111
Jul 8, 2024

First Check

I added a very descriptive title here.
I used the GitHub search to find a similar question and didn't find it.
I searched the FastAPI documentation, with the integrated search.
I already searched in Google "How to X in FastAPI" and didn't find any information.
I already read and followed all the tutorial in the docs and didn't find an answer.
I already checked if it is not related to FastAPI but to Pydantic.
I already checked if it is not related to FastAPI but to Swagger UI.
I already checked if it is not related to FastAPI but to ReDoc.

Commit to Help

I commit to help with one of those options 👆

Example Code

from fastapi.templating import Jinja2Templates
from fastapi.responses import HTMLResponse
from fastapi import FastAPI, WebSocket, WebSocketDisconnect, Request
import uvicorn

app = FastAPI()
templates = Jinja2Templates(directory="templates")
active_connections = []

@app.get("/", response_class=HTMLResponse)
def read_index(request: Request):
    return templates.TemplateResponse("index.html", {"request" : request})

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    active_connections.append(websocket)
    try:
        while True:
            data = await websocket.receive_text()
            await websocket.send_text(data)
    except WebSocketDisconnect:
        active_connections.remove(websocket)



@app.get("/send_message_{id_one}")
async def send_message(id_one: int):
    await active_connections[int(id_one)].send_text(f"{id_one} Hi, new message!")    
    return "Sending ui done"


if __name__ == "__main__":
    uvicorn.run(app, host="127.0.0.1", port=8888)

Description

Hi guys
Please tell a newbie
I'm trying to run a simple service with WEBSOCKET to make it work through nginx. This is what my files look like. When I run this on a local PC (Windows 10), it works correctly, but on vps (UBUNTU) with nginx there is no way for the connection to be established via WEBSOCKET.
What am I doing wrong, please give me advice. I haven’t been able to solve this for three days now! Thank you in advance

Operating System

Linux

Operating System Details

UBUNTU

FastAPI Version

0.111.0

Pydantic Version

2.7.1

Python Version

3.8.10

Additional Context

The file is located in the templates folder index.html , code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WS Example</title>
</head>
<body>
    <h1>One-Two, Go To! WebSOCKET Example</h1>
    <input type="text" id="inputText" placeholder="Type something...">
    <button id="submitButton">Submit</button>
    <div id="container"></div>
    <script>
        // Create a WebSocket connection to the server
        const socket = new WebSocket("ws://123.45.67.89:3333/ws");
 	
        // Function to display messages on the web page
        function showMessage(message) {
            const messageContainer = document.getElementById('container');
            const messageElement = document.createElement('div');
            messageElement.textContent = message;
            messageContainer.appendChild(messageElement);
        }
 
        // Event handler for when the connection is established
        socket.addEventListener('open', (event) => {
            showMessage('Connected to server...');
        });
 
        // Event handler for receiving messages from the server
        socket.onmessage = (event) => {
            showMessage("You sent : " + event.data)
        }
 
        // Event handler for when the connection is closed
        socket.addEventListener('close', (event) => {
            showMessage('Connection closed.');
        });
 
        const inputText = document.getElementById("inputText");
        const submitButton = document.getElementById("submitButton");
 
        submitButton.addEventListener("click", function() {
            const inputValue = inputText.value;
            socket.send(inputValue)
        });

       
    window.addEventListener('beforeunload', function() {
      socket.close();
    });
    
    </script>
</body>
</html>

nginx code:

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

upstream websocket {
	server 123.45.67.89:3333;
	}

server {
	listen 3333;
	server_name 123.45.67.89;

	location / {
		proxy_pass http://127.0.0.1:8888;  
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
	}

	location /ws {
		proxy_pass http://127.0.0.1:8888/ws;  
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "upgrade"; #$connection_upgrade;
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
	}
}

When I switch to http://123.45.67.89:3333 then the HTML page loads, but in the developer tools (F12 Chrome) I see this error:

YuriiMotov · 2024-07-09T07:53:30Z

YuriiMotov
Jul 9, 2024
Collaborator

I think you just need to set up the CORS middleware: https://fastapi.tiangolo.com/tutorial/cors/

1 reply

PeVen111 Jul 10, 2024
Author

Thank you for your advice. I tried to apply the code from the tutorial, the link to which you gave two days ago, and here is my code about it. The HTML and Nginx code remained as before. But the problem has not gone away. Will someone be able to give some other recommendation for a solution?

from fastapi.templating import Jinja2Templates
from fastapi.responses import HTMLResponse
from fastapi import FastAPI, WebSocket, WebSocketDisconnect, Request
from fastapi.middleware.cors import CORSMiddleware
import uvicorn

app = FastAPI()
templates = Jinja2Templates(directory="templates")
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)
#I tried with and without the allow_credentials=True parameter
#allow_credentials=True,

active_connections = []

@app.get("/", response_class=HTMLResponse)
def read_index(request: Request):
    return templates.TemplateResponse("index.html", {"request" : request})

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    active_connections.append(websocket)
    try:
        while True: 
            data = await websocket.receive_text()
            await websocket.send_text(data)
    except WebSocketDisconnect:
        active_connections.remove(websocket)


@app.get("/send_message_{id_one}")
async def send_message(id_one: int):
    await active_connections[int(id_one)].send_text(f"{id_one} Hi, new message!")    
    return "Sending ui done"

if __name__ == "__main__":
    uvicorn.run(app, host="127.0.0.1", port=8888)

Mariusjuvet1 · 2024-08-13T19:18:50Z

Mariusjuvet1
Aug 13, 2024

i have the same problem, i have a react app both dev and build work on windows over nginx with the websocket, but on debian, im struggling. i have checked permission, my nginx .conf file look like this for https ( but i tried with proxypass as http://localhost:8000 as well :

location /ws/motors {
        proxy_pass http://127.0.0.1:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade \$http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host \$host;
        proxy_set_header X-Real-IP \$remote_addr;
        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto \$scheme;
    }

which works fine on windows but not on Debian, all my endpoints works fine on Debian over Nginx with cors except websockets, i have tried with both "*" and ip addresses with and without ports on CORS origins, but still not able to reach the Fastapi endpoint, however running a test script like this works like python test_websocket.py :

import asyncio
import websockets

async def test_websocket():
    uri = "ws://localhost:8000/ws/test"
    async with websockets.connect(uri) as websocket:
        await websocket.send("Hello Server!")
        response = await websocket.recv()
        print(f"Received from server: {response}")

asyncio.get_event_loop().run_until_complete(test_websocket()))

but this does not:

@router.websocket("/ws/motors")
async def websocket_motor_control(websocket: WebSocket, db: Session = Depends(get_db)):
   if not await authenticate_websocket(websocket):
       return

   await websocket.accept()
   logger.info("WebSocket connection accepted")

   state = StateManager()
   command_queue = asyncio.Queue()
   response_queue = asyncio.Queue()

   try:
       reader, writer = await initialize_mcu_connection(websocket)
       if not reader or not writer:
           await websocket.close(code=status.WS_1011_INTERNAL_ERROR)
           return

       if not await initialize_mcu(websocket, reader, writer, db, state):
           await websocket.close(code=status.WS_1011_INTERNAL_ERROR)
           return

       await main_loop(websocket, reader, writer, db, state, command_queue, response_queue)
   except WebSocketDisconnect:
       logger.warning("WebSocket disconnected")
   except Exception as e:
       logger.error(f"Error in websocket_motor_control: {str(e)}")
       await websocket.close(code=status.WS_1011_INTERNAL_ERROR)
   finally:
       await close_connections(writer, websocket)

,so i must conlude the nginx .conf file must be handled differently on linux than windows, im just a bit clueless my self here, anyone see something

1 reply

aphashimsalim Mar 23, 2026

Hi,

Were you able to find a resolution to this?

MukundaKatta · 2026-04-21T17:45:47Z

MukundaKatta
Apr 21, 2026

Adding to @shahabRDZ, beyond the upgrade headers the other thing that bites people is Nginx's default 60s read timeout silently killing long-lived sockets. Bump proxy_read_timeout and proxy_send_timeout to something like 3600s for WS locations. Also worth checking whether you're behind another layer (Cloudflare, AWS ALB) that adds its own idle timeout.

0 replies

anabkl · 2026-05-06T17:19:06Z

anabkl
May 6, 2026

I would first separate the problem into two checks: backend websocket vs Nginx proxy.

Your FastAPI echo websocket looks OK for a minimal example, so I would test whether Uvicorn can receive websocket connections locally on the VPS before debugging Nginx.

From the VPS, try:

curl http://127.0.0.1:8888/
Then test the websocket directly against Uvicorn:

python - <<'PY'
import asyncio
import websockets

async def main():
    async with websockets.connect("ws://127.0.0.1:8888/ws") as ws:
        await ws.send("hello")
        print(await ws.recv())

asyncio.run(main())
PY

If this fails, the issue is not Nginx yet. It is the FastAPI/Uvicorn process.

If it works, test through Nginx:

python - <<'PY'
import asyncio
import websockets

async def main():
    async with websockets.connect("ws://123.45.67.89:3333/ws") as ws:
        await ws.send("hello")
        print(await ws.recv())

asyncio.run(main())
PY

For the Nginx config, I would simplify the /ws location like this:

location /ws {
    proxy_pass http://127.0.0.1:8888;
    proxy_http_version 1.1;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;

    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    proxy_read_timeout 3600s;
    proxy_send_timeout 3600s;
}

And make sure this map is defined in the http {} context, not inside the server {} block:

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

Then reload Nginx:

sudo nginx -t
sudo systemctl reload nginx
sudo journalctl -u nginx -n 100 --no-pager

A few extra checks:

If the page is opened with https://, the browser websocket URL must use wss://, not ws://.
If the page is opened with http://, then ws:// is fine.
CORS middleware usually does not fix a failed Nginx websocket upgrade by itself.
If there is Cloudflare or another proxy in front, that layer also needs to support websocket upgrades.

So I would first confirm:

1.ws://127.0.0.1:8888/ws works on the VPS.
2.ws://123.45.67.89:3333/ws works through Nginx.
3.The browser uses ws:// or wss:// depending on the page protocol.

0 replies

This comment was marked as spam.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Problem connecting WEBSOCKET via Nginx #11810

Uh oh!

{{title}}

Uh oh!

Replies: 5 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

This comment was marked as spam.

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Problem connecting WEBSOCKET via Nginx #11810

Uh oh!

PeVen111 Jul 8, 2024

First Check

Commit to Help

Example Code

Description

Operating System

Operating System Details

FastAPI Version

Pydantic Version

Python Version

Additional Context

Replies: 5 comments · 2 replies

Uh oh!

YuriiMotov Jul 9, 2024 Collaborator

Uh oh!

PeVen111 Jul 10, 2024 Author

Uh oh!

Uh oh!

Mariusjuvet1 Aug 13, 2024

Uh oh!

aphashimsalim Mar 23, 2026

This comment was marked as spam.

Uh oh!

Uh oh!

MukundaKatta Apr 21, 2026

Uh oh!

anabkl May 6, 2026

PeVen111
Jul 8, 2024

Replies: 5 comments 2 replies

YuriiMotov
Jul 9, 2024
Collaborator

PeVen111 Jul 10, 2024
Author

Mariusjuvet1
Aug 13, 2024

MukundaKatta
Apr 21, 2026

anabkl
May 6, 2026