Instrucciones: cómo usar Web PubSub para Socket.IO con Azure API Management

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 Web PubSub para Socket.IO.

Limitaciones

Los clientes de Socket.IO admiten WebSocket y Sondeo largo y, de forma predeterminada, el cliente se conecta al servicio con Sondeo largo y, a continuación, actualiza a WebSocket. Sin embargo, por ahora, API Management aún no admite diferentes tipos de API (WebSocket o HTTP) con la misma ruta. Es necesario establecer websocket o polling en la configuración de cliente.

Crear recursos

Para seguir la guía paso a paso, necesita

• Siga Crear un recurso de Web PubSub para Socket.IO para crear una instancia de Web PubSub para Socket.IO.
• Siga Inicio rápido: uso de una plantilla de ARM para implementar Azure API Management y cree una instancia de API Management.

Configuración de API Management

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 Socket.IO se conectan con transporte websocket.

1. Vaya a la pestaña de API en el portal para la instancia de API Management, seleccione Agregar API y elija WebSocket, Crear con los parámetros siguientes:

   • Nombre para mostrar: Web PubSub for Socket.IO
   • Dirección URL del servicio web: wss://<your-webpubsubforsocketio-service-url>/clients/socketio/hubs/eio_hub
   • Sufijo de dirección URL de API: clients/socketio/hubs/eio_hub

   El nombre del centro se puede cambiar para adecuarse a la aplicación.

2. Presione Crear para crear la API y, después de crearla, cambie a la pestaña Configuración y desactive Se requiere una suscripción para una demostración rápida

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

En esta sección se describen los pasos para configurar API Management cuando los clientes de Socket.IO se conectan con transporte websocket.

1. Vaya a la pestaña de API en el portal para la instancia de API Management, seleccione Agregar API y elija WebSocket, Crear con los parámetros siguientes:

   • Nombre para mostrar: Web PubSub for Socket.IO
   • Dirección URL del servicio web: https://<your-webpubsubforsocketio-service-url>/clients/socketio/hubs/eio_hub
   • Sufijo de dirección URL de API: clients/socketio/hubs/eio_hub

   El nombre del centro se puede cambiar para adecuarse a la aplicación.

2. Cambie a la pestaña Configuración y desactive Se requiere una suscripción para una demostración rápida

3. Cambie a la pestaña Diseño y seleccione Agregar operación y Guardar con los parámetros siguientes:

   Agregar operación para los datos posteriores

   • Nombre para mostrar: conectar
   • URL: POST /

   Agregar operación para obtener los datos

   • Nombre para mostrar: conectar get
   • GET /

Probar muestra

El tráfico ya puede alcanzar Web PubSub para Socket.IO a través de API Management. Hay algunas configuraciones en la aplicación. Usaremos una aplicación de chat como ejemplo.

Clone el repositorio de GitHub https://github.com/Azure/azure-webpubsub e investigue para la carpeta sdk/webpubsub-socketio-extension/examples/chat

A continuación, realice algunos cambios para permitir que el ejemplo funcione con API Management

1. Abra public/main.js y encontrará los códigos de cliente de Socket.IO

   Edite el constructor de Socket.IO. Seleccione websocket o polling como transporte:

   const webPubSubEndpoint = "https://<api-management-url>";
   var socket = io(webPubSubEndpoint, {
      transports: ["websocket"], // Depends on your transport choice. If you use WebSocket in API Management, set it to "websocket". If choosing Long Polling, set it to "polling"
      path: "/clients/socketio/hubs/eio_hub", // The path also need to match the settings in API Management
   });
   

2. En la pestaña Claves de Web PubSub para Socket.IO. Copie la cadena de conexión y use el siguiente comando para ejecutar el servidor:

   npm install
   npm run start -- <connection-string>
   

3. Según la salida, use el explorador para visitar el punto de conexión

   Visit http://localhost:3000
   

4. En el ejemplo, es posible chatear con otros usuarios.

Pasos siguientes

Revise más muestra de Socket.IO