Buscar en la documentación

Módulo de tiempo real (frontend)

Conexión con Reverb, bus de avisos y qué hace cada pantalla cuando otra persona cambia algo.

Módulo realtime3 min de lecturaVer en GitHub

Mantiene una conexión con Reverb mientras hay sesión y avisa a las pantallas que algo cambió. Los avisos no traen datos: cada pantalla vuelve a consultar la API, que aplica los permisos (Módulo Realtime).

Conexión

  • Cuándo. La abre useRealtimeConnection, que vive en el shell. El shell solo existe con sesión, así que la conexión se abre al entrar y se cierra al salir. Arranca 1,5 s después de abrir la app, para no competir con lo que la pantalla necesita mostrar.
  • Cómo se conecta.
    • Pide GET /realtime para conocer la clave pública y la ruta (/ws). Lo guarda en sessionStorage, así que se pide una vez por pestaña.
    • Se conecta con Laravel Echo al mismo dominio de la app, por el gateway, con wss si la página va por https.
    • Pusher pide una firma por canal, todas en el mismo momento: el autorizador las junta y las pide en una sola petición, con el cliente HTTP de la app, que lleva el token de la sesión.
  • Canales (channelsFor): el personal siempre; incidents.all con incidents.view.any; incidents.unassigned con incidents.view.unassigned. Si los permisos cambian, entra a los nuevos y sale de los que ya no aplican.
  • Sin el aviso propio. El cliente HTTP manda el X-Socket-ID de la pestaña (shared/http/socketId.ts) y la API no le avisa de sus propios cambios.
  • Reconexión. Al volver la conexión publica reconnected, por si se perdió algún aviso.
  • Si el tiempo real falla, la app sigue igual, sin avisos.

Avisos y qué hace cada pantalla

Las pantallas escuchan el bus con useRealtime(evento, función), que deja de escuchar sola al desmontar. No conocen Echo ni los canales.

Pantallaincidentreconnected
Detalle (conversación)Con comment: si la conversación ya se cargó, vuelve a pedir lo más reciente y lo une; si no, ajusta el número del botónVuelve a pedir la conversación si se había cargado
Listado de incidentesAviso “Hay N incidentes con cambios de otras personas · Actualizar” (cuenta incidentes, no avisos); no mueve las filasVuelve a consultar
Detalle y vista previaSi es el mismo incidente y no hay una acción en curso, se vuelven a leer los datos y el historialVuelve a consultar (detalle)
Formulario de ediciónSi es el mismo incidente: aviso “Otra persona cambió este incidente…” con “Recargar”; no toca lo que se escribió—
DashboardRefresca las cifras, como máximo una vez cada 10 s y nunca en modo PersonalizarIgual

Por el canal personal (useRealtimeNotices):

  • assigned: pide el incidente a la API y muestra “Te asignaron TZ-26-0142: título” con “Abrir”. Es la opción action de notify en useFeedback, que deja el aviso 8 s en lugar de 4.
  • notifications: lo escucha el centro de notificaciones, que vuelve a pedir las sin leer y, si el panel está abierto, la pestaña que se ve.
  • session: vuelve a pedir la sesión (session.refresh()).
    • Si la sesión ya no vale, la API responde UNAUTHENTICATED y el cliente HTTP lleva al login con “Tu sesión terminó”.
    • Si cambiaron los permisos, el menú y los botones se ajustan y los canales se actualizan.

Capas

CapaPiezaQué hace
domainrealtime.tsTipos de aviso y a qué canales se suscribe cada persona
infrastructureechoClient.tsConfiguración de conexión y creación de Echo con su autorizador
applicationuseRealtimeConnection, realtimeBus (onRealtime, emitRealtime, useRealtime)Conexión, canales y bus de avisos
presentationuseRealtimeNoticesAviso de asignación y cambios de sesión

Dónde está en el código