Mercure-Hub: Pierwsze kroki z Mercure-hub
Ta dokumentacja jest częścią przewodnika Pierwsze kroki. Pełny przewodnik znajdziesz tutaj: Jak zacząć z Mercure-hub.
👋 Witamy w dokumentacji Stackhero!
Stackhero oferuje gotowe do użycia rozwiązanie Mercure-Hub cloud, które zapewnia wiele korzyści, w tym:
- Nieograniczone żądania i rozmiary wiadomości.
- Dostosowywalna nazwa domeny zabezpieczona za pomocą HTTPS (na przykład, https://real-time.twoja-firma.com).
- Łatwe aktualizacje za pomocą jednego kliknięcia.
- Optymalna wydajność i solidne zabezpieczenia dzięki prywatnej i dedykowanej VM.
- Dostępne w 🇪🇺 Europie i 🇺🇸 USA.
Oszczędzaj czas i upraszczaj sobie życie: wystarczy 5 minut, aby wypróbować rozwiązanie Mercure-Hub cloud hosting Stackhero!
Po stronie klienta (twój front end), prosty kod JavaScript wykorzystujący API HTML5 SSE to wszystko, czego potrzebujesz.
Uwaga: W tym przykładzie subskrybent nie jest uwierzytelniony. Aby ten przykład działał, musisz zezwolić na anonimowych subskrybentów w panelu Stackhero.
const endpoint = '<XXXXXX>.stackhero-network.com';
const url = new URL('https://' + endpoint + '/.well-known/mercure');
// Dodaj tematy do nasłuchiwania
url.searchParams.append('topic', `https://${endpoint}/users/1234`);
url.searchParams.append('topic', `https://${endpoint}/books/1`);
const eventSource = new EventSource(url);
// Callback jest wywoływany za każdym razem, gdy publikowana jest aktualizacja
eventSource.onmessage = e => console.log(e);
Po stronie serwera (twój back end), gdy chcesz wysłać aktualizację, po prostu wyślij żądanie POST do API Mercure-hub. Poniżej znajduje się przykład użycia Node.js wraz z bibliotekami JsonWebToken i Request:
const jwt = require('jsonwebtoken');
const request = require('request');
const endpoint = '<XXXXXX>.stackhero-network.com';
const publisherJwtKey = '<your publisher JWT key>';
// Zdefiniuj dane do wysłania
const data = {
// Temat, do którego dane będą przesyłane
topic: `https://${endpoint}/books/1`,
// Dane do wysłania do tematu
data: JSON.stringify({
available: false,
date: new Date()
})
};
// Generuj token bearer
const bearer = jwt.sign(
{ mercure: { publish: [ data.topic ] } },
publisherJwtKey,
{
expiresIn: 60, // Token wygasa po jednej minucie
noTimestamp: true // Nie dołączaj znacznika czasu 'wydany o', aby uniknąć błędów "Token użyty przed wydaniem"
}
);
// Wyślij dane do Mercure-hub, aby rozesłał aktualizację do klientów
request.post(
{
url: `https://${endpoint}/.well-known/mercure`,
auth: { bearer },
form: data
},
(err, res) => err ? console.error(err) : console.log(res)
);
I to wszystko! Masz teraz subskrybenta na front endzie i wydawcę na back endzie, którzy współpracują bezproblemowo.