Mercure-Hub: Começar com o Mercure-hub
Esta documentação faz parte do guia Introdução. Consulte o guia completo aqui: Como começar com Mercure-hub.
👋 Bem-vindo à documentação da Stackhero!
A Stackhero oferece uma solução Mercure-Hub cloud pronta a usar que proporciona uma série de benefícios, incluindo:
- Pedidos e tamanhos de mensagens ilimitados.
- Nome de domínio personalizável seguro com HTTPS (por exemplo, https://real-time.sua-empresa.com).
- Atualizações fáceis com apenas um clique.
- Desempenho ótimo e segurança robusta alimentados por uma VM privada e dedicada.
- Disponível na 🇪🇺 Europa e 🇺🇸 EUA.
Poupe tempo e simplifique a sua vida: são necessários apenas 5 minutos para experimentar a solução Mercure-Hub cloud hosting da Stackhero!
No lado do cliente (o seu front end), um simples código JavaScript que utiliza a API HTML5 SSE é tudo o que precisa.
Nota: Neste exemplo, o subscritor não está autenticado. Para que este exemplo funcione, deve permitir subscritores anónimos no painel de controlo do Stackhero.
const endpoint = '<XXXXXX>.stackhero-network.com';
const url = new URL('https://' + endpoint + '/.well-known/mercure');
// Adicionar tópicos para ouvir
url.searchParams.append('topic', `https://${endpoint}/users/1234`);
url.searchParams.append('topic', `https://${endpoint}/books/1`);
const eventSource = new EventSource(url);
// O callback é invocado cada vez que uma atualização é publicada
eventSource.onmessage = e => console.log(e);
No lado do servidor (o seu back end), quando quiser enviar uma atualização, basta enviar um pedido POST para a API do Mercure-hub. Abaixo está um exemplo usando Node.js juntamente com as bibliotecas JsonWebToken e Request :
const jwt = require('jsonwebtoken');
const request = require('request');
const endpoint = '<XXXXXX>.stackhero-network.com';
const publisherJwtKey = '<your publisher JWT key>';
// Definir os dados a enviar
const data = {
// O tópico onde os dados serão enviados
topic: `https://${endpoint}/books/1`,
// Os dados a serem enviados para o tópico
data: JSON.stringify({
available: false,
date: new Date()
})
};
// Gerar o token bearer
const bearer = jwt.sign(
{ mercure: { publish: [ data.topic ] } },
publisherJwtKey,
{
expiresIn: 60, // O token expira em um minuto
noTimestamp: true // Não incluir o timestamp 'emitido em' para evitar erros "Token usado antes de ser emitido"
}
);
// Enviar os dados para o Mercure-hub para que distribua a atualização aos clientes
request.post(
{
url: `https://${endpoint}/.well-known/mercure`,
auth: { bearer },
form: data
},
(err, res) => err ? console.error(err) : console.log(res)
);
E pronto! Agora tem um subscritor no front end e um publicador no back end a trabalhar juntos sem problemas.