Connection Issues with Real-Time Events in FastAPI + IIS + Angular

Question

Connection Issues with Real-Time Events in FastAPI + IIS + Angular

Maria Natalia Benavides Sanabria 10

Hello everyone,

I'm encountering a connection issue with my implementation of real-time events. The problem is that network requests remain in a "pending" state in the browser's network tab, and the connection necessary for receiving real-time updates is never fully established.

Here are the details of my environment:

Server: IIS v10
Backend: FastAPI 0.112.0, Pydantic 2.8.2, Uvicorn (>=0.15.0) running on Python 3.13.2
Frontend: Angular 17

Has anyone experienced similar issues or have suggestions on what might be causing this? Could it be due to a misconfiguration or incompatibility between IIS, FastAPI, Uvicorn, or Python 3.13.2? Or is there perhaps something in the web.config file that needs adjusting?

3 respuestas

Su respuesta

Answer 1

¡Hola Maria Natalia Benavides Sanabria!

Bienvenido a Microsoft Q&A.

The issue you're experiencing, where network requests remain in a "pending" state and the real-time connection is not established, could be caused by several factors. Below is a detailed analysis and troubleshooting guide tailored to your environment:

WebSocket or Long-Polling Configuration

FastAPI and Uvicorn support WebSockets for real-time communication, but IIS may require additional configuration to handle WebSocket connections properly.

Steps to Check:

Enable WebSockets in IIS:

Open IIS Manager.
1. Select your server in the left-hand Connections pane.
  1. Double-click "WebSocket Protocol" in the Features pane.
    1. Ensure WebSocket Protocol is enabled for your site.
    Verify WebSocket Support in FastAPI: Ensure your FastAPI application is correctly configured to handle WebSocket routes. For example:
```
            from fastapi import FastAPI, WebSocket
```

app = FastAPI()

@app.websocket("/ws") async def websocket_endpoint(websocket: WebSocket): await websocket.accept() await websocket.send_text("Hello WebSocket!") await websocket.close() ```

        **Check Uvicorn Version**: Ensure you're using a compatible version of Uvicorn (>=0.15.0). If you're using WebSockets, Uvicorn must be started with the `--ws` flag:
        
        ```yaml
        uvicorn app:app --host 0.0.0.0 --port 8000 --ws websockets
        ```

IIS Reverse Proxy Configuration

If IIS is acting as a reverse proxy for your FastAPI application, misconfigurations in the web.config file could block WebSocket or HTTP/2 connections.

Steps to Check:

Update web.config: Ensure your web.config file allows WebSocket traffic and properly forwards requests to Uvicorn. Example configuration:

<configuration>
  <system.webServer>
    <webSocket enabled="true" />
    <rewrite>
      <rules>
        <rule name="ReverseProxyInboundRule1" stopProcessing="true">
          <match url="(.*)" />
          <action type="Rewrite" url="http://127.0.0.1:8000/{R:1}" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Check Timeouts: IIS may terminate long-running connections prematurely. Increase the timeout settings for WebSocket connections:

<webSocket enabled="true" receiveTimeout="00:20:00" />

FastAPI and Python Compatibility

You're using Python 3.13.2, which is a very recent version. Some libraries, including FastAPI or Uvicorn, might not yet be fully compatible with this version.

Steps to Check:

Test with Python 3.11 or 3.12: Downgrade to a stable Python version (e.g., 3.11.x) and test your application to rule out compatibility issues.

Update Dependencies: Ensure all dependencies are up to date:

pip install --upgrade fastapi uvicorn pydantic

Frontend (Angular) Configuration

Angular's HTTP client or WebSocket implementation might not be correctly configured to handle real-time connections.

Steps to Check:

CORS Configuration: Ensure your FastAPI backend allows CORS requests from your Angular frontend:

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://your-angular-app.com"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

WebSocket Implementation: Verify that your Angular application is correctly initiating WebSocket connections. Example:

const socket = new WebSocket('ws://your-backend-url/ws');
socket.onmessage = (event) => {
  console.log(event.data);
};

Network and Firewall Issues

Network configurations or firewalls might block WebSocket or long-polling connections.

Steps to Check:

Firewall Rules: Ensure that ports used by Uvicorn (e.g., 8000) are open and accessible.

Inspect Network Traffic: Use browser developer tools or tools like Wireshark to inspect network traffic and identify where the connection is being blocked.

Debugging Tools

Browser Developer Tools: Check the "Network" tab in your browser's developer tools for more details about the "pending" requests. Look for:

HTTP status codes (e.g., 403, 500).
- Errors in the WebSocket handshake.
Uvicorn Logs: Run Uvicorn with verbose logging to capture detailed error messages:
```
  uvicorn app:app --host 0.0.0.0 --port 8000 --log-level debug
```

Espero que estos consejos ayuden a resolver el problema. Si necesitas más asistencia, estoy a tu disposición.

Saludos,

Jonathan.

----------*

Tu opinión es muy importante para nosotros! Si esta respuesta resolvió tu consulta, por favor haz clic en 'SÍ'. Esto nos ayuda a mejorar continuamente la calidad y relevancia de nuestras soluciones.

Answer 2

Jonathan Pereira Castillo 17,170 Personal externo de Microsoft Moderador

Hola Maria Natalia Benavides Sanabria!,

El propósito de este mensaje es verificar la información proporcionada. Si tienes más actualizaciones sobre este tema, no dudes en responder en este mismo hilo.

Respetuosamente,

Jonathan

---------

Tu opinión es muy importante para nosotros! Si esta respuesta resolvió tu consulta, por favor haz clic en ‘Sí’. Esto nos ayuda a mejorar continuamente la calidad y relevancia de nuestras soluciones. ¡Gracias por tu colaboración!

Answer 3

Jonathan Pereira Castillo 17,170 Personal externo de Microsoft Moderador

Buenos día Maria Natalia Benavides Sanabria!,

Conforme a la información previamente proporcionada, el objetivo de este mensaje es verificar la misma. Si tienes nuevas actualizaciones relacionadas con este asunto, por favor, siéntete libre de responder en este mismo hilo.

Atentamente,

Jonathan

-----------

Tu opinión es muy importante para nosotros! Si esta respuesta resolvió tu consulta, por favor haz clic en ‘Sí’. Esto nos ayuda a mejorar continuamente la calidad y relevancia de nuestras soluciones. ¡Gracias por tu colaboración!

Maria Natalia Benavides Sanabria 10

I have carefully followed all the recommendations, but unfortunately, the issue still persists.The WebSocket connection never fully establishes. Below is my current setup:

Current Setup:

<?xml version="1.0" encoding="UTF-8"?>

<system.webServer>

    <!-- Configuración del manejador para Hypercorn -->

    <handlers>

        <add name="httpPlatformHandler" path="*" verb="*" modules="httpPlatformHandler" resourceType="Unspecified" requireAccess="Script" />

    </handlers>

    <!-- Configuración de la plataforma para ejecutar Hypercorn -->

    <httpPlatform processPath="C:\Program Files\Python313\python.exe"

          arguments="-m hypercorn run:app --bind 0.0.0.0:%HTTP_PLATFORM_PORT% --worker-class asyncio --keep-alive 120 --graceful-timeout 90 --backlog 1024 --access-logfile logs/access.log --error-logfile logs/error.log"

          stdoutLogEnabled="true"

          stdoutLogFile=".\logs\hypercorn.log"

          requestTimeout="00:05:00"

          startupTimeLimit="120">

          

        <environmentVariables>

            <environmentVariable name="PYTHONPATH" value="F:\Apps\Backend" />

            <environmentVariable name="SERVER_PORT" value="%HTTP_PLATFORM_PORT%" />

            <environmentVariable name="ROOT_PATH" value="/backend/api" />

            <!-- Optimización de rendimiento -->

            <environmentVariable name="UVLOOP_NO_WARN" value="1" />

            <environmentVariable name="PYTHONUNBUFFERED" value="1" />

        </environmentVariables>

    </httpPlatform>

    <!-- Configuración de headers personalizados -->

    <httpProtocol>

        <customHeaders>

            <add name="X-Accel-Buffering" value="no" />

            <add name="Keep-Alive" value="timeout=120, max=100" />

            <add name="Connection" value="keep-alive" />

        </customHeaders>

    </httpProtocol>

    <!-- Configuración para WebSockets -->

    <webSocket enabled="true" />

    <!-- Configuración de seguridad -->

    <security>

        <requestFiltering>

            <requestLimits maxAllowedContentLength="52428800" /> <!-- Límite de 50MB para uploads -->

        </requestFiltering>

    </security>

</system.webServer>

</configuration>

Backend:

from src.api.main import socket_app

from fastapi import FastAPI, HTTPException

from fastapi.middleware.cors import CORSMiddleware

from src.models.socket_manager import SocketManager

sio = socketio.AsyncServer(async_mode="asgi", cors_allowed_origins="*")

lock = asyncio.Lock()

socket_manager = SocketManager(sio)

app = FastAPI(

title="Prueba",

description="API para consultas",

version="1.0.0",

root_path="/backend/api",

)

app.add_middleware(

CORSMiddleware,

allow_origins=["*"],

allow_methods=["*"],

allow_headers=["*"],

)

@sio.event

async def connect(sid, environ):

print(f"Cliente conectado: {sid}")

print(f"Environment details: {environ.get('HTTP_ORIGIN', 'No origin')}")

@sio.event

async def disconnect(sid):

print(f"Cliente desconectado: {sid}")

@sio.event

async def join_session(sid, data):

session_id = data.get("session_id")

if not session_id:

    print(f"Error: Client {sid} tried to join session without providing session_id")

    return

await sio.enter_room(sid, session_id)

await sio.emit("joined", {"message": f"Unido a la sesión {session_id}"}, room=sid)

print(f"Cliente {sid} unido a la sesión {session_id}")

test_payload = {

    "node": "test",

    "message": "Room joining successful",

    "sessionId": session_id,

    "progress_percentage": 0,

    "timestamp": datetime.now().isoformat(),

}

try:

    await sio.emit("state_update", test_payload, room=session_id)

    print(f"Test update sent to room {session_id}")

except Exception as e:

    print(f"Error sending test update: {str(e)}")

    import traceback

    print(traceback.format_exc())

@app.get("/health")

async def health_check():

return {"status": "healthy", "timestamp": datetime.now()}

socket_app = socketio.ASGIApp(sio, app)

FrontEnd:

export class SocketService {

private socket: Socket;

constructor() {

const baseUrl = environment.apiREST.split('/backend/api')[0];

console.log('Conectando socket a:', baseUrl);

this.socket = io(baseUrl, {

  path: '/socket.io',

  transports: ['websocket', 'polling']

});

this.socket.on('connect', () => {

  console.log('Socket connected:', this.socket.id);

});

this.socket.on('connect_error', (error) => {

  console.error('Socket connection error:', error);

});

this.socket.on('disconnect', (reason) => {

  console.log('Socket disconnected:', reason);

});

}

joinSession(sessionId: string): void {

this.socket.emit('join_session', { session_id: sessionId });

}

onJoinedSession(): Observable<any> {

return new Observable(observer => {

  this.socket.on('joined', (data) => {

    observer.next(data);

  });

  

  return () => {

    this.socket.off('joined');

  };

});

}

onStateUpdate(): Observable<any> {

return new Observable(observer => {

  this.socket.on('state_update', (data) => {

    observer.next(data);

  });

  

  return () => {

    this.socket.off('state_update');

  };

});

}

disconnect(): void {

if (this.socket) {

  this.socket.disconnect();

}

}

Frameworks:

fastapi==0.112.0
hypercorn==0.17.3
python-socketio==5.12.1
python-dotenv==1.0.1
pydantic==2.8.2

Compartir a través de

Connection Issues with Real-Time Events in FastAPI + IIS + Angular

3 respuestas

Su respuesta