Skip to main content
se añadieron 1019 caracteres en el cuerpo
Origen Enlace
Francisco
  • 739
  • 8
  • 21

Por último, del lado del cliente en la vista twig, se crea un objeto de tipo EventSource implementando los eventos asociados, para ello se completa con la url del servidor Mercure (mediante la función twig que implementa el Mercure bundle) y el URI del topic al que nos suscribiremos:

<script type="text/javascript">
    const eventSource = new EventSource("{{ mercure('stnotif', { subscribe:'stnotif'})|escape('js')}}", {withCredentials: true});

    eventSource.onopen = function () {
        console.log('Socket opened!');
    }

    eventSource.onmessage = function (e) {
        console.log('Notificacion recibida!');
        var data = JSON.parse(e.data);
        document.querySelectorAll('.totalNotifNoAtendidas').forEach(function (el) {
            el.innerHTML = data.totalNoAtendidas;
        });
    }

    eventSource.onerror = function () {
        console.log('Error en el socket!');
    }
</script>

Con estos ajustes funciona adecuadamente la "notificación en tiempo real" de la cantidad de solicitudes pendientes que van registrándose.

Con estos ajustes funciona adecuadamente la "notificación en tiempo real" de la cantidad de solicitudes pendientes que van registrándose.

Por último, del lado del cliente en la vista twig, se crea un objeto de tipo EventSource implementando los eventos asociados, para ello se completa con la url del servidor Mercure (mediante la función twig que implementa el Mercure bundle) y el URI del topic al que nos suscribiremos:

<script type="text/javascript">
    const eventSource = new EventSource("{{ mercure('stnotif', { subscribe:'stnotif'})|escape('js')}}", {withCredentials: true});

    eventSource.onopen = function () {
        console.log('Socket opened!');
    }

    eventSource.onmessage = function (e) {
        console.log('Notificacion recibida!');
        var data = JSON.parse(e.data);
        document.querySelectorAll('.totalNotifNoAtendidas').forEach(function (el) {
            el.innerHTML = data.totalNoAtendidas;
        });
    }

    eventSource.onerror = function () {
        console.log('Error en el socket!');
    }
</script>

Con estos ajustes funciona adecuadamente la "notificación en tiempo real" de la cantidad de solicitudes pendientes que van registrándose.

Origen Enlace
Francisco
  • 739
  • 8
  • 21

Ya dí con la solución, aun me queda por entender algunos conceptos del componente Messenger de Symfony que ayudan a desacoplar el código, pero para este caso al menos me sirve para iniciar:

El principal problema estaba en la recipe de Mercure, quedando de la siguiente manera el fichero mercure.yaml:

mercure:
    hubs:
        default:
            url: '%env(MERCURE_URL)%'
            public_url: '%env(MERCURE_PUBLIC_URL)%'
            jwt:
                secret: '%env(MERCURE_JWT_SECRET)%'
                publish: ['stnotif']
                subscribe: ['stnotif']

Tanto en publish como en subscribe establezco el nombre del topic bajo el cual se va a publicar en el hub de Mercure, y al cual desde la aplicación nos suscribiremos.

Estas dos configuraciones garantizan se genere adecuadamente el JWT en el formato esperado por Mercure.

Otro aspecto, la aplicación es accesible mediante HTTPS, por tanto las variables de entorno MERCURE_URL y MERCURE_PUBLIC_URL deben apuntar al mismo dominio, en este caso es un virtual host con un dominio ficticio, haciendo posible el intercambio de la cookie de session entre la aplicación web y el hub de mercure. Quedando dichas variables en el fichero .env.local: de la siguiente manera:

'MERCURE_URL' => 'https://pami.local:3000/.well-known/mercure',
'MERCURE_PUBLIC_URL' => 'https://pami.local:3000/.well-known/mercure',
'MERCURE_JWT_SECRET' => 'MySecret',

La otra adecuación la realicé en el Caddy file del binario de Mercure, quedando de la siguiente manera:

# Learn how to configure the Mercure.rocks Hub on https://mercure.rocks/docs/hub/config
{
    {$GLOBAL_OPTIONS}
}

{$SERVER_NAME:pami.local:3000}

tls C:\wamp64\bin\apache\apache2.4.41\conf\ssl\pami.local.crt C:\wamp64\bin\apache\apache2.4.41\conf\ssl\pami.local.key

route {
    encode zstd gzip

    mercure {
        # Transport to use (default to Bolt)
        transport_url {$MERCURE_TRANSPORT_URL:bolt://mercure.db}
        # Publisher JWT key
        publisher_jwt {env.MERCURE_PUBLISHER_JWT_KEY} {env.MERCURE_PUBLISHER_JWT_ALG}
        # Subscriber JWT key
        subscriber_jwt {env.MERCURE_SUBSCRIBER_JWT_KEY} {env.MERCURE_SUBSCRIBER_JWT_ALG}
        cors_origins https://pami.local
        publish_origins https://pami.local
        # Extra directives
        {$MERCURE_EXTRA_DIRECTIVES}
    }

    respond /healthz 200

    respond "Not Found" 404
}

Importante destacar de este fichero:

  1. Se establece como SERVER_NAME el nombre de dominio por el cual se llamará al hub de Mercure y el puerto.
  2. Se establece como valor de la directiva tls las rutas de los ficheros .crt y .key relacionados al certificado de seguridad de la aplicación.
  3. Las directivas cors_origins y publish_origins apuntan a la dirección URL de la aplicación, evitando que se genere un error CORS

Con estos ajustes funciona adecuadamente la "notificación en tiempo real" de la cantidad de solicitudes pendientes que van registrándose.