Tiempo real

Las API en tiempo real mantienen una conexión abierta y envían mensajes en los dos sentidos. En este tutorial miras el flujo de pedidos de la tienda de demostración por un WebSocket y como Server-Sent Events, y después hablas con el servicio de atención de la tienda por Socket.IO y lees las temperaturas de los almacenes por MQTT, todo a la vez.

• Tiempo: 20 minutos.
• Necesitas: el espacio de trabajo Alpenglow con Sin entorno elegido. Para Socket.IO y MQTT, los servidores locales: ejecuta bun run realtime en examples/servers.
• Aprendes: conectar, mensajes guardados, el registro en directo, streams de eventos, espacios de nombres y confirmaciones, suscripciones, QoS y mensajes retenidos.

1. WebSocket: el flujo de pedidosCopy Anchor Link

1. Abre Realtime › Order updates. Su URL es {{wsURL}}/orders, que es wss://demo.echolot.dev/v1/orders.
2. Elige Conectar (⌘R). El botón pasa a ser Desconectar.
3. La pestaña Mensajes de la respuesta se llena: un icono de enlace para la conexión abierta, el hello del servidor y después un evento de pedido cada 1,5 segundos, como {"event": "order.created", "order": "ord_9Tq3Vb", …}. Los mensajes enviados llevan una flecha hacia arriba, y los recibidos una flecha verde hacia abajo. Más despliega un mensaje JSON largo.
4. En la pestaña Mensajes de la solicitud, el mensaje guardado Subscribe contiene {"op":"subscribe","channel":"orders"}. Elige su Enviar. El servidor responde {"op": "subscribed", "channel": "orders"}.
5. Escribe en el campo de redacción de la parte inferior: {"id": 42, "text": "hello"} y elige Enviar (⇧⌘↩). El servidor lo confirma con {"op": "ack", "id": 42}. Elige + para guardar el mensaje para más adelante.
6. Acota el registro con Todos, Enviado y Recibido, o escribe shipped en Filtrar mensajes.
7. Elige Desconectar. El registro termina con Cerrado por Echolot.

La demo cierra una sesión a los tres minutos (1000 Demo sessions last 3 minutes), y la cierra con 1008 si envías más de 20 mensajes en diez segundos. Los mensajes guardados con Enviar en las ejecuciones marcado se envían en orden, después de conectar, cuando la solicitud se ejecuta en Ejecución o en la herramienta de línea de comandos. Más en WebSocket y SSE.

2. Server-Sent Events: el mismo flujo como streamCopy Anchor Link

1. Abre Realtime › Order events. Es una solicitud HTTP normal, GET {{baseURL}}/orders/events, con la cabecera Accept: text/event-stream.
2. Elige Enviar. La respuesta se abre en su pestaña Eventos: Escuchando… Detener lo termina.
3. Llega un evento cada segundo, cada uno en su propia tarjeta con su número y su nombre como título, como 1. order.created, con id 1 debajo. Tras 20 eventos, el servidor envía end y cierra el stream.
4. Para parar antes, elige Cancelar (⌘.).

Para reanudar después de un evento, añade la cabecera Last-Event-ID con el último id que viste, por ejemplo 15, y envía de nuevo. El servidor envía del 16 al 20. Si escribes Last-Event-ID en la pestaña Cabeceras, se ofrece {{lastEventId}} como su valor; dale un valor a esa variable, o escribe el número.

3. Socket.IO: la atención al clienteCopy Anchor Link

Inicia primero los servidores locales (bun run realtime). Imprimen Alpenglow realtime: Socket.IO on http://localhost:3001/support, MQTT on mqtt://localhost:1883.

1. Abre Realtime › Support chat. Su URL es {{realtimeURL}}, http://localhost:3001. En su pestaña Eventos, Espacio de nombres es /support; el menú de método de la barra de la URL define la versión del Servidor (Socket.IO 4).
2. Elige Conectar. Llegan tres eventos: welcome con el nombre del agente y la cola, typing y después message: "Grüezi! How can I help with your order?"
3. El evento guardado Say hello emite message con {"text":"Grüezi!"}. Marca su casilla Ack, para que se pida al servidor que lo confirme, y elige Emitir.
4. El registro muestra la confirmación, {"id": "msg_31", "delivered": true}, y un momento después la respuesta de Heidi: "Your Matterhorn 2P ships tomorrow from Bern."
5. Para emitir un evento que no has guardado, escribe su nombre en el campo evento del campo de redacción y sus argumentos como JSON, y elige Emitir (⇧⌘↩).

Cada fila del registro nombra el espacio de nombres, el evento y el número de la confirmación cuando hay una. Filtrar eventos acota el registro. Un servidor que te pide confirmar uno de sus eventos recibe un botón Confirmar en esa fila. Una carga de autenticación, como {"token": "{{token}}"}, va en el campo Autenticación de la pestaña Eventos. Consulta Socket.IO.

4. MQTT: sensores del almacénCopy Anchor Link

Los mismos servidores locales ejecutan un broker MQTT en localhost:1883 que publica cada 1,5 segundos las temperaturas de tres almacenes.

1. Abre Realtime › Warehouse sensors. Su URL es mqtt://{{mqttHost}}, y el Protocolo del menú de método es MQTT 3.1.1.
2. Su pestaña Suscribirse tiene la suscripción warehouses/+/temperature con QoS 1, con Suscribirse al conectar marcado. + coincide con un nivel del topic.
3. Elige Conectar. Llegan mensajes de warehouses/zurich/temperature, warehouses/bern/temperature y warehouses/chur/temperature, como {"celsius": 6.1, "humidity": 44, …}.
4. Usa el menú Todos los temas para mostrar un solo almacén.
5. En el campo de redacción de Suscribirse, escribe warehouses/status, deja QoS 0 y elige Suscribirse. Llega al instante un mensaje, {"online": 3}, marcado como retenido: el broker lo guardó para quien se suscriba más tarde.
6. En la pestaña Publicar, pon el topic en warehouses/bern/door, la carga en {"open": true} y elige Publicar (⇧⌘↩). Suscríbete a warehouses/# para verlo volver: # coincide con todos los niveles inferiores.

La pestaña Conexión contiene el ID de cliente, el ajuste de sesión limpia, Keep alive y un will. El nombre de usuario y la contraseña de un broker van en la pestaña Autenticación como autenticación Basic; guarda la contraseña en una variable secreta. La herramienta de línea de comandos también habla MQTT:

echolot mqtt subscribe mqtt://localhost 'warehouses/#' --count 5

Consulta MQTT y echolot mqtt.

5. Todo a la vezCopy Anchor Link

Cada solicitud tiene su propia pestaña. Mantén abiertas en tres pestañas Order updates, Support chat y Warehouse sensors, y conecta cada una: todas las conexiones siguen abiertas mientras cambias de una a otra. Cuando una sesión se cierra, Echolot la guarda en el Historial con todo el registro de mensajes, para que puedas volver a leerla más adelante (⌘Y).

Los servidores locales también sirven gRPC: ejecuta bun run grpc y envía las solicitudes de Inventory. Watch stock emite en streaming una docena de niveles de stock y termina. Consulta gRPC.

Siguientes pasosCopy Anchor Link

• WebSocket y SSE: subprotocolos, mensajes binarios, comprobaciones en sesiones.
• Socket.IO y MQTT: todos los ajustes.
• Probar una API y ejecutarla en CI: las sesiones también se ejecutan en Ejecución y envían sus mensajes guardados.