WebSockets og sanntidssystemer med Spring · leksjon

Implementering av brukervarsler

Bygg et robust varslingssystem som leverer øyeblikkelige varsler og oppdateringer til brukere i sanntid.

Leksjon 3 av 411 trinn

Implementering av brukervarsler er en gratis leksjon i WebSockets og sanntidssystemer med Spring på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i WebSockets og sanntidssystemer med Spring, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i WebSockets og sanntidssystemer med Spring inneholder totalt 4 leksjoner.

Hva er brukervarsler

Brukervarsler er avgjørende i moderne applikasjoner. De holder brukerne informert om viktige hendelser, oppdateringer eller meldinger i sanntid.

Tenk på varsler fra sosiale medier, meldinger om nye e-poster eller invitasjoner til spill. De øker engasjementet og sørger for at brukerne ikke går glipp av viktig informasjon.

Kjerne i varslingssystemet

Et robust sanntidsbasert varslingssystem består vanligvis av noen få nøkkelkomponenter:

Backend-tjeneste: Genererer og sender varsler.
Meldingsmegler: Ruter varsler effektivt til de riktige brukerne.
Klientlogikk: Mottar, viser og håndterer varsler.

Vi fokuserer på aspektet ved varsler i appen og i sanntid, ved hjelp av Spring WebSockets og STOMP.

Utforming av en varslingsmodell

Først trenger vi en datastruktur for varslene våre. Denne modellen definerer hvilken informasjon hvert varsel inneholder.

Viktige felter omfatter ofte:

id: Unik identifikator.
recipientId: Hvem som mottar varselet.
senderId: Hvem som sendte det (valgfritt).
message: Det faktiske innholdet.
type: Kategori (for eksempel "message", "alert", "friend_request").
timestamp: Når det ble opprettet.
isRead: Har brukeren sett det? (true/false)

Oppretting av varsler på serversiden

På serveren utløser en hendelse, for eksempel en ny melding eller en brukerhandling, opprettelsen av et Notification-objekt. Dette objektet behandles og sendes deretter videre.

Her er en enkel Java-klasse som representerer varslingsmodellen vår:

public class Notification {
  private String id;
  private String recipientId;
  private String senderId;
  private String message;
  private String type;
  private long timestamp;
  private boolean isRead;

  // Constructor
  public Notification(String recipientId, String senderId, String message, String type) {
    this.id = java.util.UUID.randomUUID().toString();
    this.recipientId = recipientId;
    this.senderId = senderId;
    this.message = message;
    this.type = type;
    this.timestamp = System.currentTimeMillis();
    this.isRead = false;
  }

  // Getters (and setters if needed)
  public String getId() { return id; }
  public String getRecipientId() { return recipientId; }
  public String getSenderId() { return senderId; }
  public String getMessage() { return message; }
  public String getType() { return type; }
  public long getTimestamp() { return timestamp; }
  public boolean isRead() { return isRead; }
  public void setRead(boolean read) { isRead = read; }

  @Override
  public String toString() {
    return "Notification [recipient=" + recipientId + ", msg='" + message + "']";
  }
}

Ruting av brukervarsler

For å sende et varsel til en bestemt bruker benytter vi STOMP-brukerdestinasjoner. Spring sin meldingsmal gjør dette enklere.

Destinasjonen ser vanligvis slik ut: /user/{userId}/queue/notifications. Når serveren sender en melding til denne destinasjonen, ruter Spring den automatisk til WebSocket-økten eller WebSocket-øktene som er knyttet til userId.

Dette sikrer at bare den tiltenkte mottakeren mottar varselet.

Sende varsler (serverkonsept)

På serveren vil en backend-tjeneste opprette et Notification-objekt når en hendelse utløser et varsel. Deretter sender den dette varselet til mottakerens private STOMP-kø ved hjelp av Spring sin SimpMessagingTemplate.

Metoden convertAndSendToUser er avgjørende her, fordi den kobler bruker-ID-en til brukerens aktive WebSocket-økt(er).

Selv om SimpMessagingTemplate krever en Spring-kontekst, kan vi illustrere varselobjektet og en konseptuell sending:

public class Notification {
  private String recipientId;
  private String message;
  private long timestamp;

  public Notification(String recipientId, String message) {
    this.recipientId = recipientId;
    this.message = message;
    this.timestamp = System.currentTimeMillis();
  }

  public String getRecipientId() { return recipientId; }
  public String getMessage() { return message; }
  public long getTimestamp() { return timestamp; }

  @Override
  public String toString() {
    return "Notification [to=" + recipientId + ", msg='" + message + "']";
  }

  public static void main(String[] args) {
    // This simulates creating and conceptually sending a notification
    String userId = "user123";
    String notificationMessage = "You have a new message!";
    Notification newNotification = new Notification(userId, notificationMessage);

    System.out.println("Created notification: " + newNotification);
    System.out.println("Spring's SimpMessagingTemplate would then send this to /user/" + userId + "/queue/notifications");
    System.out.println("Client-side would receive this via their WebSocket subscription.");
  }
}

Klienten lytter etter oppdateringer

På klientsiden, for eksempel i en nettleser, må brukeren abonnere på sin personlige varselkø. Dette gjøres via WebSocket-tilkoblingen etter autentisering.

Abonnementets destinasjon samsvarer med serverens sendemønster: /user/queue/notifications.

Alle meldinger som serveren sender til denne destinasjonen for den autentiserte brukeren, mottas av klienten.

Abonnement på klientsiden (JS)

Her er et enkelt JavaScript-eksempel som bruker et STOMP-klientbibliotek, for eksempel stomp.js eller @stomp/stompjs, til å koble til og abonnere.

// Assume 'stompClient' is already connected to WebSocket
// and authenticated.

// Function to handle incoming notifications
function onNotificationReceived(notification) {
  console.log("Received notification:", notification.body);
  // Parse JSON body, e.g., JSON.parse(notification.body)
  // Then update UI to display the notification
  displayNotification(JSON.parse(notification.body));
}

// Function to display notification in UI
function displayNotification(notifObj) {
    const notifArea = document.getElementById("notificationArea");
    const newNotif = document.createElement("div");
    newNotif.innerHTML = `<b>${notifObj.message}</b> 
                              <small>(${new Date(notifObj.timestamp).toLocaleTimeString()})</small>`;
    notifArea.prepend(newNotif);
}

// Subscribe to the user's private notification queue
stompClient.subscribe('/user/queue/notifications', onNotificationReceived);

console.log("Subscribed to /user/queue/notifications");
// In a real app, you'd have a 'connect' function first.
// Example: stompClient.connect({}, frame => { ... subscribe here ... });

Markere varsler som lest

Når en bruker har sett et varsel, er det god praksis å markere det som lest. Dette innebærer vanligvis en separat interaksjon, og gjøres ikke direkte via WebSockets for selve oppdateringen.

Klienten kan sende et enkelt kall til REST-API-et, for eksempel en PUT- eller POST-forespørsel, til backend-tjenesten for å angi hvilket eller hvilke varsler som skal markeres som lest.

Backend-tjenesten oppdaterer deretter varselets isRead-status i databasen.

Kontrollere levering av varsler

De har bygget et system som sender varsler i sanntid til bestemte brukere. Hvordan sørger serveren for at et varsel bare når den tiltenkte mottakeren?

Besvar den i den interaktive leksjonen

Oppsummering: Bygge varslingssystemer

I denne leksjonen har vi sett på hvordan man implementerer et system for varsler til brukere i sanntid.

Vi utformet en Notification-modell.
Vi lærte å bruke Spring sin SimpMessagingTemplate sammen med convertAndSendToUser for målrettet levering.
Vi forsto hvordan klienter abonnerer på sine private køer (/user/queue/notifications).
Vi diskuterte hvordan varsler kan markeres som lest via et REST-API.

Disse prinsippene gjør det mulig å bygge engasjerende og interaktive applikasjoner som holder brukerne oppdatert umiddelbart!

Gratis å komme i gang

Lær deg WebSockets og sanntidssystemer med Spring med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Implementering av brukervarsler» gratis?

Ja – hele teksten i «Implementering av brukervarsler» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av WebSockets og sanntidssystemer med Spring-kurset, kan du oppgradere til CoddyKit PRO. Kurset i WebSockets og sanntidssystemer med Spring inneholder totalt 4 leksjoner.

Hva lærer jeg i «Implementering av brukervarsler»?

Bygg et robust varslingssystem som leverer øyeblikkelige varsler og oppdateringer til brukere i sanntid. Du øver på WebSockets og sanntidssystemer med Spring med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med WebSockets og sanntidssystemer med Spring?

Ingen tidligere erfaring er nødvendig. WebSockets og sanntidssystemer med Spring på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Implementering av brukervarsler»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne WebSockets og sanntidssystemer med Spring-leksjonen?

Ja. Alle WebSockets og sanntidssystemer med Spring-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Server-Sent Events (SSE) kontra WebSockets
Arkitekturer for push av sanntidsdata
Implementering av brukervarsler
Sporing av tilstedeværelse og nettstatus

← Tilbake til WebSockets og sanntidssystemer med Spring