Mercure-Hub: Empezando con Mercure-hub
Esta documentación forma parte de la guía Introducción. Consulte la guía completa aquí: Cómo empezar con Mercure-hub.
👋 ¡Bienvenido a la documentación de Stackhero!
Stackhero ofrece una solución Mercure-Hub cloud lista para usar que proporciona una serie de beneficios, incluyendo:
- Solicitudes y tamaños de mensajes ilimitados.
- Nombre de dominio personalizable asegurado con HTTPS (por ejemplo, https://real-time.su-empresa.com).
- Actualizaciones sin esfuerzo con solo un clic.
- Rendimiento óptimo y seguridad robusta impulsados por una VM privada y dedicada.
- Disponible en 🇪🇺 Europa y 🇺🇸 USA.
Ahorre tiempo y simplifique su vida: solo toma 5 minutos probar la solución de Mercure-Hub cloud hosting de Stackhero!
En el lado del cliente (su front end), solo necesita un simple código JavaScript que utilice la API HTML5 SSE.
Nota: En este ejemplo, el suscriptor no está autenticado. Para que este ejemplo funcione, debe permitir suscriptores anónimos en el panel de Stackhero.
const endpoint = '<XXXXXX>.stackhero-network.com';
const url = new URL('https://' + endpoint + '/.well-known/mercure');
// Añadir temas para escuchar
url.searchParams.append('topic', `https://${endpoint}/users/1234`);
url.searchParams.append('topic', `https://${endpoint}/books/1`);
const eventSource = new EventSource(url);
// El callback se invoca cada vez que se publica una actualización
eventSource.onmessage = e => console.log(e);
En el lado del servidor (su back end), cuando desea enviar una actualización, simplemente envíe una solicitud POST a la API de Mercure-hub. A continuación se muestra un ejemplo utilizando Node.js junto con las bibliotecas JsonWebToken y Request:
const jwt = require('jsonwebtoken');
const request = require('request');
const endpoint = '<XXXXXX>.stackhero-network.com';
const publisherJwtKey = '<your publisher JWT key>';
// Definir los datos a enviar
const data = {
// El tema donde se enviarán los datos
topic: `https://${endpoint}/books/1`,
// Los datos a enviar al tema
data: JSON.stringify({
available: false,
date: new Date()
})
};
// Generar el token bearer
const bearer = jwt.sign(
{ mercure: { publish: [ data.topic ] } },
publisherJwtKey,
{
expiresIn: 60, // El token expira en un minuto
noTimestamp: true // No incluir el timestamp 'emitido en' para evitar errores "Token usado antes de ser emitido"
}
);
// Enviar los datos a Mercure-hub para que distribuya la actualización a los clientes
request.post(
{
url: `https://${endpoint}/.well-known/mercure`,
auth: { bearer },
form: data
},
(err, res) => err ? console.error(err) : console.log(res)
);
¡Eso es todo! Ahora tiene un suscriptor en el front end y un publicador en el back end trabajando juntos sin problemas.