Mercure-Hub: Pradžia

Kaip pradėti naudotis Mercure-hub

👋 Sveiki atvykę į Stackhero dokumentaciją!

Stackhero siūlo paruoštą naudoti Mercure-Hub cloud sprendimą, kuris suteikia daugybę privalumų, įskaitant:

• Neriboti užklausų ir pranešimų dydžiai.
• Pritaikomas domeno vardas, apsaugotas HTTPS (pavyzdžiui, https://real-time.jūsų-įmonė.com).
• Lengvi atnaujinimai vienu paspaudimu.
• Optimali veikla ir tvirta sauga, užtikrinama privačiu ir dedikuotu VM.
• Prieinama 🇪🇺 Europoje ir 🇺🇸 JAV.

Taupykite laiką ir supaprastinkite savo gyvenimą: tereikia 5 minučių, kad išbandytumėte Stackhero Mercure-Hub cloud hosting sprendimą!

Kas yra Mercure-hub

Įsivaizduokite, kad turite svetainę, kuri parduoda knygas, ir norite realiu laiku rodyti turimą atsargą.

Duomenų siuntimas iš back end į front end gali būti sudėtingas. Mercure-hub tai supaprastina, leisdamas siųsti duomenis tiesiai į klientų naršykles vos per kelias minutes. Geriausia tai, kad jis veikia su bet kuria programavimo kalba, nes naudoja HTTP protokolą!

Kaip veikia Mercure-hub

Apsvarstykite scenarijų, kai klientas peržiūri knygą su ID 1.

Front end pusėje jūs užsiprenumeruojate temą /books/1 Mercure-hub naudodami Server-Sent Events (SSE) API, natūralią HTML5 funkciją. Su maždaug 10 JavaScript kodo eilučių ir be išorinių bibliotekų, šis metodas išlieka paprastas ir efektyvus.

Back end pusėje, kai knyga yra nupirkta, siunčiate HTTP užklausą į Mercure-hub, kad atnaujintumėte atsargą. Pavyzdžiui, jei yra 7 knygos su ID 1 ir vartotojas perka vieną, atnaujinta atsarga tampa 6.

Jūsų back end siunčia { stockCount: 6 } į temą /books/1 Mercure-hub, kad kiekvienas vartotojas, peržiūrintis tą knygą, iš karto gautų atnaujintą atsargų skaičių. Šis procesas reikalauja tik HTTP užklausos iš back end ir kelių kodo eilučių front end pusėje.

Šis principas gali būti naudojamas duomenims siųsti iš serverio į klientą, tarp klientų ar net tarp serverių.

Pradžia su Mercure-hub

Kliento pusėje (jūsų front end) paprastas JavaScript kodas, naudojantis HTML5 SSE API, yra viskas, ko jums reikia.

Pastaba: Šiame pavyzdyje prenumeratorius nėra autentifikuotas. Kad šis pavyzdys veiktų, turite leisti anoniminius prenumeratorius Stackhero prietaisų skydelyje.

const endpoint = '<XXXXXX>.stackhero-network.com';

const url = new URL('https://' + endpoint + '/.well-known/mercure');

// Pridėti temas klausymui
url.searchParams.append('topic', `https://${endpoint}/users/1234`);
url.searchParams.append('topic', `https://${endpoint}/books/1`);

const eventSource = new EventSource(url);

// Kiekvieną kartą, kai paskelbiama atnaujinimas, iškviečiamas atgalinis skambutis
eventSource.onmessage = e => console.log(e);

Serverio pusėje (jūsų back end), kai norite išsiųsti atnaujinimą, tiesiog siųskite POST užklausą į Mercure-hub API. Žemiau pateiktas pavyzdys naudojant Node.js kartu su JsonWebToken ir Request bibliotekomis:

const jwt = require('jsonwebtoken');
const request = require('request');

const endpoint = '<XXXXXX>.stackhero-network.com';
const publisherJwtKey = '<your publisher JWT key>';

// Apibrėžti duomenis siuntimui
const data = {
  // Tema, kurioje bus siunčiami duomenys
  topic: `https://${endpoint}/books/1`,

  // Duomenys, kurie bus siunčiami į temą
  data: JSON.stringify({
    available: false,
    date: new Date()
  })
};

// Generuoti bearer tokeną
const bearer = jwt.sign(
  { mercure: { publish: [ data.topic ] } },
  publisherJwtKey,
  {
    expiresIn: 60, // Tokenas galioja vieną minutę
    noTimestamp: true // Neįtraukti 'išduota' laiko žymės, kad išvengtumėte "Token used before issued" klaidų
  }
);

// Siųsti duomenis į Mercure-hub, kad jis išplatintų atnaujinimą klientams
request.post(
  {
    url: `https://${endpoint}/.well-known/mercure`,
    auth: { bearer },
    form: data
  },
  (err, res) => err ? console.error(err) : console.log(res)
);

Ir viskas! Dabar turite prenumeratorių front end ir leidėją back end, kurie veikia kartu sklandžiai.

Mercure-hub kliento kodo pavyzdys

Jei norite išbandyti Mercure-hub, galite peržiūrėti kodo pavyzdžius, esančius https://github.com/stackhero-io/mercureHubGettingStarted.

Šie veikiantys pavyzdžiai apima paprastą front end puslapį ir Node.js back end serverį, kurie demonstruoja, kaip Mercure veikia praktikoje.

Paprastas back end ir front end komunikacijos su Mercure-hub pavyzdys

Prenumeratorių autentifikavimas

Ankstesniuose pavyzdžiuose prenumeratoriai nebuvo autentifikuoti ir jums reikėjo leisti "anoniminius prenumeratorius" Stackhero prietaisų skydelyje.

Norėdami autentifikuoti prenumeratorius, generuojate JWS (JSON Web Signature) naudodami "Subscriber JWT key", apibrėžtą Stackhero prietaisų skydelyje. JWS tada siunčiamas naudojant naršyklės slapukus arba authorization antraštę.

Kadangi Server-Sent Events API nepalaiko pasirinktinių antraščių apibrėžimų, turi būti naudojami slapukai. Tačiau, naudojant slapukus, jūsų Mercure-hub serveris ir klientas turi dalintis tuo pačiu domenu (arba subdomenu).

Jei norite naudoti SSE tarp skirtingų domenų, apsvarstykite EventSource polyfill, kuris leidžia antraščių apibrėžimus. Viena galimybė yra https://github.com/Yaffle/EventSource.

Pirmiausia, generuokite JWS savo klientui jūsų serverio pusėje. Pavyzdys yra backend/subscriberJwsGenerator.js. Tiesiog įveskite savo prenumeratoriaus JWT ir paleiskite skriptą naudodami node subscriberJwsGenerator.js.

Tada, front end pusėje, faile frontend/subscriberWithAuthorization.html, užpildykite savo endpoint ir sugeneruotą JWS. Atidarykite failą savo naršyklėje ir Mercure-hub dabar veiks su autentifikacija!

Nepamirškite nuimti varnelės nuo "Leisti anoniminius prenumeratorius" Stackhero prietaisų skydelyje!