[Question] WebSocket config example

[plankter]

Could you please provide an example of how to configure access to WebSockets? For instance, to the following endpoint:

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    await websocket.send_text(f"WebSocket client connected")

I could't connect to the endpoint from the client app, getting Error during WebSocket handshake: Unexpected response code: 200. I suppose, either Traefik or Nginx configs should be changed.

[n1ckdm]

I've managed to solve this issue by editing docker-compose.dev.labels.yml:

  backend:
    labels:
      - traefik.frontend.rule=PathPrefix:/api,/docs,/redoc,/ws
      - traefik.enable=true
      - traefik.port=80
      - traefik.tags=${TRAEFIK_TAG}

I edited it to include /ws in the PathPrefix as in your example.

I'll add a small WebSocket example to the project template and submit a PR.

[tiangolo]

Thanks for the discussion here!

I would actually prefer to keep this project template more or less simple, I also don't think WebSockets are a good solution for most of the cases where people try to use them, they are great for things that need them, but most of the cases are fine with plain HTTP that already has a lot of things in place. For example, a browser can't set headers in a WebSocket connection.

Using WebSockets requires a heavy investment into re-implementing many things that are already implemented in a "standard" way in HTTP, so I would prefer not to encourage people to go that route to end up at a dead-end later.

But for the advanced use cases that actually need WebSockets, there's the docs section on the main website with all the info.

[plankter]

I managed to make WebSockets work properly, so i suppose i can close the issue. WebSockets are quite useful in my scenario, as i need to notify a browser client when a long-running Celery worker finishes its processing, but i agree that it is a very specific use case.

[jceyrac]

Hi @plankter , how did you manage to make the websocket work?
I've added your WebSocket example in main.py:

from fastapi import FastAPI, WebSocket
from starlette.middleware.cors import CORSMiddleware

from app.api.api_v1.api import api_router
from app.core.config import settings

app = FastAPI(
    title=settings.PROJECT_NAME, openapi_url=f"{settings.API_V1_STR}/openapi.json"
)

# Set all CORS enabled origins
if settings.BACKEND_CORS_ORIGINS:
    app.add_middleware(
        CORSMiddleware,
        allow_origins=[str(origin) for origin in settings.BACKEND_CORS_ORIGINS],
        allow_credentials=True,
        allow_methods=["*"],
        allow_headers=["*"],
    )

app.include_router(api_router, prefix=settings.API_V1_STR)


# ws://localhost:8080/ws
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    await websocket.send_text(f"WebSocket client connected")

and tried updating the docker-compose.override.yml and docker-compose.yml files with the traefik labels:

backend:
    ports:
      - "8888:8888"
    volumes:
      - ./backend/app:/app
    environment:
      - JUPYTER=jupyter lab --ip=0.0.0.0 --allow-root --NotebookApp.custom_display_url=http://127.0.0.1:8888
      - SERVER_HOST=http://${DOMAIN?Variable not set}
    build:
      context: ./backend
      dockerfile: backend.dockerfile
      args:
        INSTALL_DEV: ${INSTALL_DEV-true}
        INSTALL_JUPYTER: ${INSTALL_JUPYTER-true}
    # command: bash -c "while true; do sleep 1; done"  # Infinite loop to keep container live doing nothing
    command: /start-reload.sh
    labels:
      - traefik.enable=true
      - traefik.constraint-label-stack=${TRAEFIK_TAG?Variable not set}
      - traefik.http.routers.${STACK_NAME?Variable not set}-backend-http.rule=PathPrefix(`/api`) || PathPrefix(`/docs`) || PathPrefix(`/redoc`) || PathPrefix(`/ws`)
      - traefik.http.services.${STACK_NAME?Variable not set}-backend.loadbalancer.server.port=80
      - traefik.frontend.rule=PathPrefix:/api,/docs,/redoc,/ws
      - traefik.port=80
      - traefik.tags=${TRAEFIK_TAG}

but I still get connection errors to ws://localhost:8080/ws :(

When implementing the same WebSocket in an other fastapi app only project it works fine so I guess it's a config issue in the backend somewhere but I know where to look unfortunately... Any idea?

[Sherlock898]

I managed to make WebSockets work properly, so i suppose i can close the issue. WebSockets are quite useful in my scenario, as i need to notify a browser client when a long-running Celery worker finishes its processing, but i agree that it is a very specific use case.

How did you manage to make it work?

[AndriCause]

Thanks for the discussion here!

I would actually prefer to keep this project template more or less simple, I also don't think WebSockets are a good solution for most of the cases where people try to use them, they are great for things that need them, but most of the cases are fine with plain HTTP that already has a lot of things in place. For example, a browser can't set headers in a WebSocket connection.

Using WebSockets requires a heavy investment into re-implementing many things that are already implemented in a "standard" way in HTTP, so I would prefer not to encourage people to go that route to end up at a dead-end later.

But for the advanced use cases that actually need WebSockets, there's the docs section on the main website with all the info.

@tiangolo
with the rise of AI I believe usage of websocket is more and more widely used, especially for chat like interfaces. Do you believe you could update the boilerplate to include an example of a use of websocket? I have attempted to use websocket through your boilerplate but I have had various problems

[storenth]

@plankter @Sherlock898 @jceyrac Guys, looks like u missed up with prefix API_V1_STR. In my case I test it using: ./node_modules/wscat/bin/wscat -c ws://localhost:8000/api/v1/ws/info