Basiscommunicatie tussen client en server
Implementeer eenvoudig berichtenverkeer van client naar server en omgekeerd en demonstreer daarmee basale realtime-interactie.
Basiscommunicatie tussen client en server is een gratis WebSockets en realtime systemen met Spring-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject WebSockets en realtime systemen met Spring. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus WebSockets en realtime systemen met Spring bevat in totaal 4 lessen.
Basisprincipes van berichtenuitwisseling
In vorige lessen heb je je Spring WebSocket-applicatie opgezet en de endpoints geconfigureerd. Nu gaan we ervoor zorgen dat deze praat!
Bij realtimecommunicatie draait alles om het heen en weer sturen van berichten tussen clients, zoals webbrowsers, en de server. In deze les leer je de basis van de werking van deze interactie.
Client stuurt naar server
De meest voorkomende interactie begint met een client die een bericht naar de server stuurt. Dit bericht kan een gebruikersactie, chatbericht of opdracht zijn.
- De client brengt een WebSocket-verbinding tot stand.
- Vervolgens stuurt de client gegevens naar een specifieke serverbestemming.
- Spring handelt de ontvangst van dit bericht aan de serverkant af.
Ontvanger aan de serverkant (Spring)
Spring gebruikt annotaties om het afhandelen van binnenkomende berichten eenvoudig te maken. De annotatie @MessageMapping koppelt een methode aan een specifiek bestemmingspad, vergelijkbaar met @GetMapping voor HTTP.
Wanneer een client een bericht naar bijvoorbeeld /app/hello stuurt, wordt de methode met de annotatie @MessageMapping("/hello") aangeroepen.
De serverontvanger implementeren
Laten we kijken naar een eenvoudige methode aan de serverkant die een bericht ontvangt. Let erop dat het invoerbericht rechtstreeks aan een Java-object kan worden gekoppeld, bijvoorbeeld een 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;
}
}Server stuurt naar client
Na het verwerken van het bericht van een client moet de server vaak een antwoord sturen of updates naar clients verspreiden. Zo werkt realtime-interactie echt.
Spring biedt handige manieren om berichten terug te sturen naar clients, vaak met behulp van een berichtenmakelaar.
De serverzender implementeren
Om direct een antwoord te sturen naar de client die het bericht heeft verzonden, kun je de annotatie @SendTo gebruiken. Deze routeert de retourwaarde van je methode met @MessageMapping naar een specifiek onderwerp.
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;
}
}Verzenden aan de clientkant (JavaScript)
Aan de clientkant, meestal een webbrowser, gebruik je JavaScript om met het WebSocket-endpoint te communiceren. Bibliotheken zoals SockJS en STOMP.js maken dit proces eenvoudiger.
- Maak verbinding met het WebSocket-endpoint.
- Stuur berichten naar de bestemmingen van
@MessageMappingop de server. - Abonneer je op de bestemmingen met serveronderwerpen om berichten te ontvangen.
Eenvoudige JavaScript-client
Zo stuurt een eenvoudige JavaScript-client een bericht. De client gebruikt een STOMP-client om verbinding te maken en gegevens naar de bestemming /app/hello van de server te sturen.
// 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!");
});Volledig echo-voorbeeld (server)
Laten we alles samenvoegen! Deze Spring Boot-server ontvangt een bericht, drukt het af en stuurt vervolgens een begroeting terug naar een openbaar onderwerp. Je kunt dit uitvoeren als een Spring Boot-applicatie.
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 + "!";
}
}Controle van berichtenstroom
Stel je een Spring WebSocket-applicatie voor waarin een client een bericht naar /app/chat stuurt en de server antwoordt op /topic/updates. Welke van de volgende uitspraken over deze interactie zijn juist?
Samenvatting: basisprincipes van berichtenuitwisseling
Goed gedaan! Je hebt de basisprincipes geleerd van communicatie tussen clients en servers met Spring WebSockets:
- Clients sturen berichten naar bestemmingen op de server met STOMP-bibliotheken aan de clientkant.
- Servers ontvangen berichten met
@MessageMapping. - Servers kunnen direct antwoorden met
@SendToom berichten naar onderwerpen te verspreiden.
Dit vormt de basis voor alle realtime-interacties. Hierna gaan we dieper in op het STOMP-protocol voor een meer gestructureerde uitwisseling van berichten.
Leer WebSockets en realtime systemen met Spring met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Basiscommunicatie tussen client en server” gratis?
Ja — de volledige tekst van “Basiscommunicatie tussen client en server” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus WebSockets en realtime systemen met Spring wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus WebSockets en realtime systemen met Spring bevat in totaal 4 lessen.
Wat leer ik in “Basiscommunicatie tussen client en server”?
Implementeer eenvoudig berichtenverkeer van client naar server en omgekeerd en demonstreer daarmee basale realtime-interactie. Je oefent met WebSockets en realtime systemen met Spring door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met WebSockets en realtime systemen met Spring te beginnen?
Ervaring vooraf is niet nodig. WebSockets en realtime systemen met Spring op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Basiscommunicatie tussen client en server”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over WebSockets en realtime systemen met Spring?
Ja. Elke les over WebSockets en realtime systemen met Spring bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Spring Boot voor WebSockets
- WebSocket-endpoints configureren
- Basiscommunicatie tussen client en server
- WebSocket-lifecycle-events afhandelen in Spring