WebSockets ja reaaliaikaiset järjestelmät Springillä · Oppitunti

Käyttäjäilmoitusten toteuttaminen

Rakentakaa vankka ilmoitusjärjestelmä, joka toimittaa käyttäjille välittömiä hälytyksiä ja päivityksiä reaaliajassa.

Oppitunti 3/411 vaihetta

Käyttäjäilmoitusten toteuttaminen on ilmainen WebSockets ja reaaliaikaiset järjestelmät Springillä-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu WebSockets ja reaaliaikaiset järjestelmät Springillä-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. WebSockets ja reaaliaikaiset järjestelmät Springillä-kurssilla on yhteensä 4 oppituntia.

Mitä käyttäjäilmoitukset ovat?

Käyttäjäilmoitukset ovat olennaisia moderneissa sovelluksissa. Ne pitävät käyttäjät ajan tasalla tärkeistä tapahtumista, päivityksistä ja viesteistä reaaliajassa.

Ajatelkaa sosiaalisen median ilmoituksia, uusien sähköpostien ilmoituksia tai pelikutsuja. Ne lisäävät sitoutumista ja varmistavat, etteivät käyttäjät jää paitsi tärkeistä tiedoista.

Ilmoitusjärjestelmän ydin

Vankkaan reaaliaikaiseen ilmoitusjärjestelmään kuuluu yleensä muutama keskeinen komponentti:

Taustapalvelu: Luo ja lähettää ilmoitukset.
Viestinvälittäjä: Reitittää ilmoitukset tehokkaasti oikeille käyttäjille.
Asiakaspuolen logiikka: Vastaanottaa, näyttää ja hallitsee ilmoituksia.

Keskitymme sovelluksen sisäiseen reaaliaikaisuuteen Spring WebSocketsin ja STOMP:n avulla.

Ilmoitusmallin laatiminen

Ensin tarvitsemme ilmoituksille tietorakenteen. Tämä malli määrittää, mitä tietoja kukin ilmoitus sisältää.

Keskeisiä kenttiä ovat usein:

id: Yksilöllinen tunniste.
recipientId: Ilmoituksen vastaanottaja.
senderId: Ilmoituksen lähettäjä (valinnainen).
message: Varsinainen sisältö.
type: Luokka, kuten "message", "alert" tai "friend_request".
timestamp: Luontiajankohta.
isRead: Onko käyttäjä nähnyt ilmoituksen? (true/false)

Ilmoitusten luominen palvelimella

Palvelimella tapahtuma, kuten uusi viesti tai käyttäjän toiminto, käynnistää Notification-olion luomisen. Tämän jälkeen olio käsitellään ja lähetetään.

Tässä on yksinkertainen Java-luokka, joka esittää ilmoitusmalliamme:

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 + "']";
  }
}

Käyttäjäilmoitusten kohdentaminen

Kun ilmoitus halutaan lähettää tietylle käyttäjälle, hyödynnämme STOMP:n käyttäjäkohteita. Springin viestipohjainen apuväline tekee tästä yksinkertaista.

Kohde näyttää yleensä tältä: /user/{userId}/queue/notifications. Kun palvelin lähettää viestin tähän kohteeseen, Spring reitittää sen automaattisesti kyseiseen userId-tunnukseen liittyvään WebSocket-istuntoon tai -istuntoihin.

Näin varmistetaan, että ilmoituksen vastaanottaa vain tarkoitettu vastaanottaja.

Ilmoitusten välittäminen (palvelinkonsepti)

Palvelimella, kun tapahtuma käynnistää ilmoituksen, backend-palvelu luo Notification-olion. Sen jälkeen se lähettää ilmoituksen vastaanottajan yksityiseen STOMP-jonoon Springin SimpMessagingTemplate-luokan avulla.

convertAndSendToUser-metodi on tässä keskeinen, sillä se yhdistää käyttäjätunnuksen käyttäjän aktiiviseen WebSocket-istuntoon tai -istuntoihin.

SimpMessagingTemplate tarvitsee Spring-kontekstin, mutta voimme havainnollistaa ilmoitusoliota ja käsitteellistä lähetystä seuraavasti:

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.");
  }
}

Asiakas kuuntelee päivityksiä

Asiakaspuolella, esimerkiksi verkkoselaimessa, käyttäjän on tilattava henkilökohtainen ilmoitusjono. Tämä tehdään WebSocket-yhteyden kautta, kun käyttäjä on tunnistautunut.

Tilauksen kohde vastaa palvelinpuolen lähetysmallia: /user/queue/notifications.

Asiakas vastaanottaa kaikki palvelimen tähän kohteeseen tunnistetulle käyttäjälle lähettämät viestit.

Asiakaspuolen tilaus (JS)

Tässä on perusesimerkki JavaScript-koodista, jossa käytetään STOMP-asiakaskirjastoa, kuten stomp.js- tai @stomp/stompjs-kirjastoa, yhteyden muodostamiseen ja tilauksen tekemiseen.

// 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 ... });

Ilmoitusten merkitseminen luetuiksi

Kun käyttäjä on tarkastellut ilmoitusta, se kannattaa merkitä luetuksi. Tämä tehdään yleensä erillisellä toiminnolla, ei suoraan WebSocket-yhteyden kautta itse päivitystä varten.

Asiakas voi lähettää backend-palvelulle yksinkertaisen REST API -kutsun, esimerkiksi PUT- tai POST-pyynnön, jossa ilmoitetaan, mikä ilmoitus tai mitkä ilmoitukset tulee merkitä luetuiksi.

Backend-palvelu päivittää tämän jälkeen ilmoituksen isRead-tilan tietokannassa.

Ilmoituksen toimituksen tarkistus

Olette rakentaneet järjestelmän, joka lähettää reaaliaikaisia ilmoituksia tietyille käyttäjille. Miten palvelin varmistaa, että ilmoitus saapuu vain tarkoitetulle vastaanottajalle?

Vastaa interaktiivisessa oppitunnissa

Kertaus: ilmoitusten lähettäjien rakentaminen

Tässä oppitunnissa tutustuimme reaaliaikaisen käyttäjien ilmoitusjärjestelmän toteuttamiseen.

Suunnittelimme Notification-mallin.
Opimme käyttämään Springin SimpMessagingTemplate-luokkaa ja convertAndSendToUser-metodia kohdennettuun toimitukseen.
Opimme, miten asiakkaat tilaavat omat yksityiset jononsa (/user/queue/notifications).
Käsittelimme ilmoitusten merkitsemistä luetuiksi REST API -rajapinnan kautta.

Näiden periaatteiden avulla voitte rakentaa kiinnostavia ja vuorovaikutteisia sovelluksia, jotka pitävät käyttäjät ajan tasalla välittömästi!

Aloita maksutta

Opi WebSockets ja reaaliaikaiset järjestelmät Springillä tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 48

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Käyttäjäilmoitusten toteuttaminen” ilmainen?

Kyllä – oppitunnin ”Käyttäjäilmoitusten toteuttaminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko WebSockets ja reaaliaikaiset järjestelmät Springillä-kurssin, päivitä CoddyKit PROhon. WebSockets ja reaaliaikaiset järjestelmät Springillä-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Käyttäjäilmoitusten toteuttaminen”?

Rakentakaa vankka ilmoitusjärjestelmä, joka toimittaa käyttäjille välittömiä hälytyksiä ja päivityksiä reaaliajassa. Harjoittelet WebSockets ja reaaliaikaiset järjestelmät Springillä-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni WebSockets ja reaaliaikaiset järjestelmät Springillä-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin WebSockets ja reaaliaikaiset järjestelmät Springillä-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Käyttäjäilmoitusten toteuttaminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä WebSockets ja reaaliaikaiset järjestelmät Springillä-oppitunnilla?

Kyllä. Jokainen WebSockets ja reaaliaikaiset järjestelmät Springillä-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Server-Sent Events (SSE) vai WebSockets
Reaaliaikaisen tiedon push-arkkitehtuurit
Käyttäjäilmoitusten toteuttaminen
Paikallaolon ja online-tilan seuranta

← Takaisin: WebSockets ja reaaliaikaiset järjestelmät Springillä