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 w pełni zarządzaną usługę Mercure-Hub cloud, zaprojektowaną tak, aby dostarczanie danych w czasie rzeczywistym było proste i niezawodne. Otrzymujesz:

• Nielimitowane żądania i rozmiary wiadomości dla pełnej elastyczności.
• Własną domenę z wbudowanym zabezpieczeniem HTTPS (na przykład https://real-time.twoja-firma.com).
• Bezproblemowe aktualizacje jednym kliknięciem, które pozwalają utrzymać Twój hub zawsze aktualny bez żadnych trudności.
• Wysoką wydajność i silne zabezpieczenia na prywatnej, dedykowanej infrastrukturze.
• Wiele regionów: 🇪🇺 Europa oraz 🇺🇸 USA dla niskich opóźnień w dostarczaniu danych.

Szybki start: uruchomienie środowiska Mercure-Hub cloud hosting i rozpoczęcie przesyłania aktualizacji w czasie rzeczywistym do Twoich aplikacji zajmuje tylko 5 minut.

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.