Preskoči na glavni sadržaj
Programeri Ažuriranja uživo

Ažuriraj poruke uživo

Poruka ne mora ostati onakva kakva je objavljena. Prikaži napredak dok posao traje, zamijeni loader rezultatom, ukloni gumbe kad netko odluči ili je izbriši. Svi u kanalu odmah vide promjenu.

Što možeš napraviti

  • Ažuriraj karticuPromijeni tekst, boju i gumbe na istom mjestu.
  • Prikaži napredakLoader koji prolazi kroz korake, a zatim rezultat.
  • Izbriši jeUkloni poruku kad više ne vrijedi.
  • Slušaj jeOdgovori, reakcije i pritisci gumba na tvojoj poruci, uživo.

U aplikaciji

Objavljena s loaderom

Ažurirana: korak 2 od 3

Ažurirana: gotovo, s gumbom

Jedna poruka, dvaput ažurirana preko svog callback URL-a. Nitko ne vidi tri poruke, samo jednu koja se mijenja.

Brzi početak

  1. Sačuvaj callback URL

    Svaka objava putem webhooka i svaki zahtjev naredbe dolazi s callback_url za tu poruku.

    bash
    BODY='{"message_container": {"color": "blue", "loader": true, "loader_text": "Deploying…"}}'
    SIG=$(printf '%s' "$BODY" | openssl dgst -sha256 -hmac "$MSSGS_WEBHOOK_SECRET" | sed 's/^.* //')
    
    curl -X POST "$MSSGS_WEBHOOK_URL" -H "Content-Type: application/json" \
      -H "X-Mssgs-Signature: sha256=$SIG" -d "$BODY"
    
    # {"success": true, "message_id": "...", "callback_url": "https://mss.gs/api/v1/trigger-callback/8f14e45f-..."}
  2. PUT za ažuriranje

    Pošalji novo stanje. Kartica se mijenja na istom mjestu za sve.

    bash
    curl -X PUT "$CALLBACK_URL" -H "Content-Type: application/json" \
      -d '{"message_container": {"color": "green", "title": "Deploy complete", "description": "v2.1 is live."}}'
  3. DELETE za uklanjanje

    Tijelo zahtjeva nije potrebno.

    bash
    curl -X DELETE "$CALLBACK_URL"

Ažuriranje poruke

Pošalji JSON metodom PUT na callback_url. Šalji samo ono što želiš promijeniti.

PoljeTipŠto radi
message_containerobjectNova kartica. Pogledaj kartice poruka.
actionsarrayNovi gumbi. "actions": [] uklanja sve; ako polje izostaviš, gumbi ostaju.
contentstringNovi tekst.
title, description, color, loader, ...stringSkraćeni oblik: polja kartice na najvišoj razini automatski se pakiraju u karticu.
Novi message_container zamjenjuje staru karticu u cijelosti: polje koje izostaviš nestaje. Prenose se samo njezin tip, naziv i avatar. Zato svaki put pošalji cijelu karticu.

Odgovori

StatusKôdZnačenje
200{"success": true}Prihvaćeno. Ažuriranje slijedi odmah nakon toga.
400MISSING_FIELDSU tijelu zahtjeva nema ničega za ažuriranje.
400INVALID_BODYTijelo zahtjeva nije ispravan JSON.
400kôd gumbaNešto nije u redu s gumbom, pogledaj gumbe.
401INVALID_TOKENURL nije ispravan.
404TOKEN_NOT_FOUNDURL je istekao ili je iskorišten za brisanje poruke.
502PUBLISH_FAILEDAžuriranje nije moglo biti isporučeno. Pokušaj ponovno.

Koliko dugo radi

30 minuta od trenutka kad je poruka objavljena ili kad je naredba upotrijebljena. Ažuriranje ne produljuje taj rok. Brisanjem poruke URL se troši. Kroz ažuriranje ne možeš dodavati datoteke.

Prikaz napretka

Objavi karticu s loaderom, ažuriraj njezin podtekst kako posao napreduje i završi rezultatom. Loader je spinner s jednim retkom teksta i manjim retkom ispod njega (loader_text, loader_sub_text).

javascript
const { callback_url } = await post({
  message_container: { color: 'blue', loader: true, loader_text: 'Deploying…', loader_sub_text: 'Step 1 of 3: building' }
});

const update = (body) => {
  return fetch(callback_url, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
};

await build();
await update({ message_container: { color: 'blue', loader: true, loader_text: 'Deploying…', loader_sub_text: 'Step 2 of 3: running migrations' } });

await migrate();
await update({
  message_container: { color: 'green', title: 'Deploy complete', description: 'v2.1 is live on production.' },
  actions: [{ type: 'url:https://ci.example.com/deploys/218', text: 'View logs', color: 'green' }]
});

Brisanje poruke

Pošalji DELETE na callback_url i poruka nestaje za sve. Nakon toga URL se više ne može koristiti.

Slušanje poruke

stream_url je stream uživo (Server-Sent Events) onoga što se događa s tvojom porukom. Otvori ga i događaji stižu čim se dogode, svaki kao JSON redak data: čiji type govori o čemu je riječ:

sse
curl -N "$STREAM_URL"

data: {"type": "reaction", "message_id": "...", "emoji": ":tada:", "action": "add", "member_guid": "...", "member": {...}, "ts": 1790000000000}

data: {"type": "action", "message_id": "...", "action_id": "approve", "action": {"id": "approve", "payload": {"deploy": 218}, ...}, "member_guid": "...", "member": {...}, "ts": 1790000004200}

data: {"type": "reply", "message_id": "...", "content": "Ship it!", "member_guid": "...", "member": {...}, "ts": 1790000009800}

event: expired
data: {}
DogađajKadaPodaci
actionPritisnut je gumb.action_id te spremljeni gumb u action s njegovim payload
reactionReakcija je dodana ili uklonjena.emoji te action: add, remove ili removeall
replyNetko je odgovorio na poruku.content odgovora
expiredStream se zatvara. Šalje se kao imenovani događaj.Nema
Događaji se ne spremaju za kasnije. Otvori stream čim dobiješ URL: ono što se dogodi prije nego što se povežeš ne šalje se. Svaki događaj sadrži i message_id, tko je to učinio (member_guid, member) i kada (ts). Redak s komentarom svakih 20 sekundi drži vezu otvorenom.

Slušanje u JavaScriptu

javascript
const events = new EventSource(streamUrl);

// Every event arrives as a plain message; its kind is in "type".
events.onmessage = (e) => {
  const ev = JSON.parse(e.data);
  if ((ev.type === 'action') && (ev.action_id === 'approve')) {
    startDeploy(ev.action.payload.deploy);
  }
};

// The one named event: the stream is closing.
events.addEventListener('expired', () => {
  events.close();
});

Gdje ga dobivaš

Odakle dolaziOtvoren
Objava putem webhooka s gumbima10 minuta ili sat vremena uz "sse_event_extended_timeout": true
Svaki zahtjev naredbe10 minuta

Pogreške

StatusKôdZnačenje
401INVALID_TOKENToken u URL-u nije ispravan.
404NOT_FOUNDStream je istekao ili nikad nije postojao.

Nastavi graditi