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:
- Se establece como
SERVER_NAME
el nombre de dominio por el cual se llamará al hub de Mercure y el puerto. - 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. - Las directivas cors_origins y publish_origins apuntan a la dirección URL de la aplicación, evitando que se genere un error
CORS
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.