WebSockets og realtidssystemer med Spring · Lektion

Grundlæggende klient-server-meddelelser

Implementer enkel afsendelse af meddelelser fra klient til server og omvendt, og demonstrer grundlæggende interaktion i realtid.

Lektion 3 af 411 trin

Grundlæggende klient-server-meddelelser er en gratis WebSockets og realtidssystemer med Spring-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i WebSockets og realtidssystemer med Spring, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. WebSockets og realtidssystemer med Spring-kurset indeholder 4 lektioner i alt.

Grundlæggende om meddelelser

I de tidligere lektioner opsatte du din Spring WebSocket-applikation og konfigurerede dens endpoints. Nu får vi den til at tale!

Kommunikation i realtid handler om at sende meddelelser frem og tilbage mellem klienter (f.eks. webbrowsere) og serveren. I denne lektion lærer du det grundlæggende i, hvordan denne interaktion fungerer.

Klienten sender til serveren

Den mest almindelige interaktion begynder med, at en klient sender en meddelelse til serveren. Meddelelsen kan være en brugerhandling, en chatmeddelelse eller en kommando.

  • Klienten opretter en WebSocket-forbindelse.
  • Derefter sender den data til en bestemt "destination" på serveren.
  • Spring håndterer modtagelsen af denne meddelelse på serversiden.

Modtager på serversiden (Spring)

Spring bruger annotationer til at gøre håndteringen af indgående meddelelser enkel. Annotationen @MessageMapping knytter en metode til en bestemt destinationssti, på samme måde som @GetMapping gør for HTTP.

Når en klient sender en meddelelse til f.eks. /app/hello, kaldes metoden med annotationen @MessageMapping("/hello").

Implementering af servermodtageren

Lad os se på en enkel metode på serversiden, som modtager en meddelelse. Bemærk, hvordan den indgående meddelelse kan knyttes direkte til et Java-objekt (f.eks. en String).

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.stereotype.Controller;

@Controller
public class GreetingController {

    @MessageMapping("/hello")
    public String handleHello(String message) {
        System.out.println("Received from client: " + message);
        return "Server received: " + message; 
    }
}

Serveren sender til klienten

Efter behandling af en klients meddelelse skal serveren ofte sende et svar eller udsende opdateringer til klienter. Det er sådan, interaktion i realtid for alvor opstår.

Spring tilbyder praktiske måder at sende meddelelser tilbage til klienter på, ofte ved hjælp af en meddelelsesbroker.

Implementering af serversenderen

Hvis du vil sende et øjeblikkeligt svar til den klient, der sendte meddelelsen, kan du bruge annotationen @SendTo. Den dirigerer returværdien fra din @MessageMapping-metode til et bestemt emne.

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class GreetingController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public String handleHello(String message) {
        System.out.println("Received: " + message);
        return "Hello from Server: " + message;
    }
}

Afsendelse på klientsiden (JavaScript)

På klientsiden, typisk i en webbrowser, bruger du JavaScript til at kommunikere med WebSocket-endpointet. Biblioteker som SockJS og STOMP.js gør denne proces enklere.

  • Opret forbindelse til WebSocket-endpointet.
  • Send meddelelser til serverens destinationer for @MessageMapping.
  • Abonnér på serverens destinationer for "emner" for at modtage meddelelser.

Enkel JavaScript-klient

Sådan sender en grundlæggende JavaScript-klient en meddelelse. Den bruger en STOMP-klient til at oprette forbindelse og sende data til serverens destination /app/hello.

// This assumes SockJS and STOMP.js are loaded
var socket = new SockJS('/ws'); // Your WebSocket endpoint
var stompClient = Stomp.over(socket);

stompClient.connect({}, function (frame) {
    console.log('Connected: ' + frame);

    // Subscribe to a topic to receive messages
    stompClient.subscribe('/topic/greetings', function (greeting) {
        console.log("Received from server: " + greeting.body);
    });

    // Send a message to the server
    stompClient.send("/app/hello", {}, "Hello Spring!");
});

Komplet ekkoeksempel (server)

Lad os samle det hele! Denne Spring Boot-server modtager en meddelelse, udskriver den og sender derefter en hilsen tilbage til et offentligt emne. Du kan køre dette som en Spring Boot-applikation.

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.stereotype.Controller;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@SpringBootApplication
public class WebSocketServerApp {
    public static void main(String[] args) {
        SpringApplication.run(WebSocketServerApp.class, args);
    }
}

@Configuration
@EnableWebSocketMessageBroker
class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS(); // WebSocket endpoint
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic"); // Enable a simple broker for /topic destinations
        config.setApplicationDestinationPrefixes("/app"); // Client messages for @MessageMapping
    }
}

@Controller
class GreetingController {
    @MessageMapping("/hello") // Client sends to /app/hello
    @SendTo("/topic/greetings") // Server sends response to /topic/greetings
    public String greet(String message) throws Exception {
        Thread.sleep(1000); // Simulate processing delay
        System.out.println("Server received: " + message);
        return "Server says: " + message + "!";
    }
}

Kontrol af meddelelsesflow

Forestil dig en Spring WebSocket-applikation, hvor en klient sender en meddelelse til /app/chat, og serveren svarer på /topic/updates. Hvilke af følgende udsagn er sande om denne interaktion?

Opsummering: Grundlæggende meddelelser

Godt arbejde! Du har lært det grundlæggende i meddelelser mellem klient og server i Spring WebSockets:

  • Klienter sender meddelelser til serverdestinationer ved hjælp af STOMP-biblioteker på klientsiden.
  • Servere modtager meddelelser ved hjælp af @MessageMapping.
  • Servere kan svare med det samme ved hjælp af @SendTo for at udsende meddelelser til emner.

Dette danner grundlaget for al interaktion i realtid. I næste afsnit ser vi nærmere på STOMP-protokollen for at få mere strukturerede meddelelser!

Gratis at komme i gang

Lær WebSockets og realtidssystemer med Spring med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
12
Lektioner
48

Ofte stillede spørgsmål

Er lektionen “Grundlæggende klient-server-meddelelser” gratis?

Ja — hele teksten til “Grundlæggende klient-server-meddelelser” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af WebSockets og realtidssystemer med Spring-kurset, skal du opgradere til CoddyKit PRO. WebSockets og realtidssystemer med Spring-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Grundlæggende klient-server-meddelelser”?

Implementer enkel afsendelse af meddelelser fra klient til server og omvendt, og demonstrer grundlæggende interaktion i realtid. Du øver dig i WebSockets og realtidssystemer med Spring med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på WebSockets og realtidssystemer med Spring?

Der kræves ingen tidligere erfaring. WebSockets og realtidssystemer med Spring på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Grundlæggende klient-server-meddelelser”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne WebSockets og realtidssystemer med Spring-lektion?

Ja. Alle WebSockets og realtidssystemer med Spring-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Spring Boot til WebSockets
  2. Konfiguration af WebSocket-endpoints
  3. Grundlæggende klient-server-meddelelser
  4. Håndtering af WebSocket-livscyklushændelser i Spring
← Tilbage til WebSockets og realtidssystemer med Spring