Compartir a través de

Uso de Azure SignalR Service con Azure API Management

  • Artículo

El servicio Azure API Management proporciona una plataforma de administración híbrida y multinube para las API en todos los entornos. En este artículo se muestra cómo agregar funcionalidad en tiempo real a la aplicación con Azure API Management y el servicio Azure SignalR.

Diagrama que muestra la arquitectura del uso de SignalR Service con API Management.

Importante

Las cadenas de conexión sin procesar solo aparecen en este artículo con fines de demostración.

Una cadena de conexión incluye la información de autorización necesaria para que la aplicación acceda a Azure SignalR Service. La clave de acceso dentro de la cadena de conexión es similar a una contraseña raíz para el servicio. En entornos de producción, proteja siempre las claves de acceso. Use Azure Key Vault para administrar y rotar las claves de forma segura y proteger la cadena de conexión mediante el Microsoft Entra ID y autorizar el acceso con el identificador de Microsoft Entra.

Evite distribuirlas a otros usuarios, codificarlas de forma rígida o guardarlas en un archivo de texto sin formato al que puedan acceder otros usuarios. Rote sus claves si cree que se han puesto en peligro.

Crear recursos

Configuración de las API

Limitaciones

Hay dos tipos de solicitudes para un cliente de SignalR:

  • negociar solicitud: solicitud HTTP POST para <APIM-URL>/client/negotiate/
  • solicitud de conexión: solicitud a <APIM-URL>/client/, podría ser WebSocket o ServerSentEvent o LongPolling depende del tipo de transporte del cliente de SignalR

El tipo de solicitud de conexión varía en función del tipo de transporte de los clientes de SignalR. Por ahora, API Management aún no admite diferentes tipos de API para el mismo sufijo. Con esta limitación, al usar API Management, el cliente de SignalR no admite la reserva de tipo de transporte WebSocket a otros tipos de transporte. Se puede admitir la reserva de ServerSentEvent a LongPolling. En las secciones siguientes se describen las configuraciones detalladas para diferentes tipos de transporte.

Configuración de API cuando el cliente se conecta con transporte WebSocket

En esta sección se describen los pasos para configurar API Management cuando los clientes de SignalR se conectan con transporte WebSocket. Cuando los clientes de SignalR se conectan con transporte WebSocket, hay tres tipos de solicitudes implicadas:

  1. OPTIONS solicitud HTTP preparatoria para negociar
  2. POST solicitud HTTP preparatoria para negociar
  3. Solicitud de WebSocket para la conexión

Vamos a configurar API Management desde el portal.

  1. Vaya a la pestaña API del portal para la instancia de API Management APIM1, seleccione Agregar API y elija HTTP, Crear con los parámetros siguientes:
    • Nombre para mostrar: SignalR negotiate
    • Dirección URL del servicio web: https://<your-signalr-service-url>/client/negotiate/
    • Sufijo de dirección URL de API: client/negotiate/
  2. Seleccione la API de SignalR negotiate creada Guarde con la siguiente configuración:
    1. En la pestaña Diseño
      1. Seleccione Agregar operación y Guardar con los parámetros siguientes:
        • Nombre para mostrar: negotiate preflight
        • URL: OPTIONS /
      2. Seleccione Agregar operación y Guardar con los parámetros siguientes:
        • Nombre para mostrar: negotiate
        • URL: POST /
    2. Cambie a la pestaña Configuración y desactive Suscripción necesaria para fines de demostración rápidos
  3. Seleccione Agregar API y elija WebSocket, Crear con los parámetros siguientes:
    • Nombre para mostrar: SignalR connect
    • WebSocket URL: wss://<your-signalr-service-url>/client/
    • Sufijo de dirección URL de API: client/
  4. Seleccione la API de SignalR connect creada Guarde con la siguiente configuración:
    1. Cambie a la pestaña Configuración y desactive Suscripción necesaria para fines de demostración rápidos

Ahora API Management está configurado correctamente para admitir el cliente de SignalR con transporte WebSocket.

Configuración de API cuando el cliente se conecta con transporte ServerSentEvents o LongPolling

En esta sección se describen los pasos para configurar API Management cuando los clientes de SignalR se conectan con el tipo de transporte ServerSentEvents o LongPolling. Cuando los clientes de SignalR se conectan con el transporte ServerSentEvents o LongPolling, hay cinco tipos de solicitudes implicadas:

  1. OPTIONS solicitud HTTP preparatoria para negociar
  2. POST solicitud HTTP preparatoria para negociar
  3. OPTIONS solicitud HTTP preparatoria para conectar
  4. POST solicitud HTTP preparatoria para conectar
  5. GET solicitud HTTP preparatoria para conectar

Ahora vamos a configurar API Management desde el portal.

  1. Vaya a la pestaña API del portal para la instancia de API Management APIM1, seleccione Agregar API y elija HTTP, Crear con los parámetros siguientes:
    • Nombre para mostrar: SignalR
    • Dirección URL del servicio web: https://<your-signalr-service-url>/client/
    • Sufijo de dirección URL de API: client/
  2. Seleccione la API de SignalR creada Guarde con la siguiente configuración:
    1. En la pestaña Diseño
      1. Seleccione Agregar operación y Guardar con los parámetros siguientes:
        • Nombre para mostrar: negotiate preflight
        • URL: OPTIONS /negotiate
      2. Seleccione Agregar operación y Guardar con los parámetros siguientes:
        • Nombre para mostrar: negotiate
        • URL: POST /negotiate
      3. Seleccione Agregar operación y Guardar con los parámetros siguientes:
        • Nombre para mostrar: connect preflight
        • URL: OPTIONS /
      4. Seleccione Agregar operación y Guardar con los parámetros siguientes:
        • Nombre para mostrar: connect
        • URL: POST /
      5. Seleccione Agregar operación y Guardar con los parámetros siguientes:
        • Nombre para mostrar: connect get
        • URL: GET /
      6. Seleccione la operación conectar get recién agregada y edite la directiva back-end para deshabilitar el almacenamiento en búfer para ServerSentEvents, consulte aquí para obtener más detalles. 
        <backend>
    <forward-request buffer-response="false" />
</backend>
    2. Cambie a la pestaña Configuración y desactive Suscripción necesaria para fines de demostración rápidos

Ahora API Management está configurado correctamente para admitir el cliente de SignalR con transporte ServerSentEvents o LongPolling.

Ejecutar chat

Ahora, el tráfico puede llegar a SignalR Service a través de API Management. Vamos a usar esta aplicación de chat como ejemplo. Empecemos por ejecutarla localmente.

Las cadenas de conexión sin procesar solo aparecen en este artículo con fines de demostración. En entornos de producción, proteja siempre las claves de acceso. Use Azure Key Vault para administrar y rotar las claves de forma segura y proteger la cadena de conexión mediante el Microsoft Entra ID y autorizar el acceso con el Microsoft Entra ID.

  • En primer lugar, vamos a obtener la cadena de conexión de ASRS1.

    • En la pestaña Cadenas de conexión de ASRS1
      • Punto de conexión de cliente: escriba la dirección URL mediante la URL de puerta de enlace de APIM1, por ejemplo https://apim1.azure-api.net. Es un generador de cadenas de conexión cuando se usan servidores proxy inversos y el valor no se conserva la próxima vez que vuelva a esta pestaña. Cuando se especifica el valor, la cadena de conexión anexa una sección ClientEndpoint.
      • Copie la cadena de conexión.

  • Clone el repositorio de GitHub https://github.com/aspnet/AzureSignalR-samples.

  • Vaya a la carpeta samples/Chatroom:

  • Establezca la cadena de conexión copiada y ejecute la aplicación localmente; puede ver que hay una sección ClientEndpoint en ConnectionString.

    cd samples/Chatroom
dotnet restore
dotnet user-secrets set Azure:SignalR:ConnectionString "<copied-connection-string-with-client-endpoint>"
dotnet run

  • Configuración del tipo de transporte para el cliente

    Abra index.html en la carpeta wwwroot y busque el código cuando se cree connection, actualícelo para especificar el tipo de transporte.

    Por ejemplo, para especificar la conexión para usar eventos enviados de servidor o sondeo largo, actualice el código a:

    const connection = new signalR.HubConnectionBuilder()
  .withUrl(
    "/chat",
    signalR.HttpTransportType.ServerSentEvents |
      signalR.HttpTransportType.LongPolling
  )
  .build();

    Para especificar la conexión para usar WebSockets, actualice el código a:

    const connection = new signalR.HubConnectionBuilder()
  .withUrl("/chat", signalR.HttpTransportType.WebSockets)
  .build();

  • Abra http://localhost:5000 desde el explorador y use F12 para ver los seguimientos de red; puede ver que la conexión se establece mediante APIM1

Pasos siguientes

Ahora, ha agregado correctamente la funcionalidad en tiempo real a API Management mediante Azure SignalR. Más información sobre SignalR Service.