GEDOPLAN
SpringWebprogrammierung

WebSockets + Spring Boot + Angular (1/2)

SpringWebprogrammierung
sheep gdd6a069b5 640
boot sheep gdd6a069b5 640

Die klassische Kommunikation zwischen JavaScript Anwendung und Backend findet zustandslos getriggert durch den Client statt. Doch was, wenn unser Backend “wichtige Neuigkeiten” für unser Frontend hat?

“Polling” mag dem ein oder anderen Pragmatiker dazu einfallen. Dabei sendet der Client in festgelegten Intervallen entsprechende Requests an unser Backend, um festzustellen, ob es neue Daten gibt. Technisch eine einfache Lösung, die jedoch dazu führt, dass (insbesondere bei steigenden Userzahlen) unnötig viele Requests von unserem Server beantwortet werden müssen.

WebSockets dagegen stellen eine konstante bidirektionale Verbindung zwischen Server und Client dar und ermöglichen es uns Nachrichten in Echtzeit auszutauschen. In Spring Boot benötigen wir dazu eine zusätzliche Dependency

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-websocket</artifactId>
		</dependency>

Innerhalb unserer Spring Boot Anwendung werden wir in den meisten Fällen zusätzlich STOMP einsetzen. Stomp ist ein weit verbreitetes Nachrichtenprotokoll, das out-of-the-box von Spring unterstützt wird und das speziell für Skriptsprachen entwickelt wurde und somit auch eine einfache Integration in unsere Angular Anwendung bietet.

Der erste Schritt besteht nun die gewünschten Websocket Endpunkte zu konfigurieren:

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/notifier");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").setAllowedOriginPatterns("*");
    }

/ws ist der Endpunkt unter dem Websocket Verbindungen zugelassen werden.

/notifier ist der Pfadpräfix unter dem sich Clients registrieren, um Nachrichten von unserem Backend zu empfangen, z.B. http://…/ws/notifier/messages

/app ist der Pfadpräfix den die Clients dazu verwenden können Nachrichten an das Backend zu schicken, z.B. http://…/ws/app/new-message

Empfangen

In unseren Controllern können wir nun, ähnlich wie bei klassischen Rest-Endpunkten, Methoden annotieren, um auf Nachrichten zu reagieren

@Controller
@RequiredArgsConstructor
public class MessageController {

    private final MessageDummyService messageDummyService;

    @MessageMapping("/message")
    public void addMessage(MessageDto message) {
        messageDummyService.addMessage(message);
    }
}

Zusätzlichen könnten wir auch mittels @SendTo(“/notifier/new-message”) und einem entsprechenden Rückgabe-Objekt direkt mittels WebSocket Nachricht antworten

Senden

Innerhalb eines Services lassen sich Nachrichten bequem per Messaging Template absetzen

@Service
@RequiredArgsConstructor
public class MessageDummyServiceImpl implements MessageDummyService {

    private final SimpMessagingTemplate simpMessagingTemplate;

    private void sendMessage() {
        simpMessagingTemplate.convertAndSend("/notifier/message", new MessageDto("Lorem Ipsum", Instant.now()));
    }
}

…aber bitte mit JSON

Damit unser Nachrichtenaustausch über WebSockets analog zu unseren Rest-Endpunkten mit JSON Formaten arbeitet, ergänzen wir unsere WebSocketConfig oben um eine zusätzliche Konfiguration

    @Override
    public boolean configureMessageConverters(List<MessageConverter> messageConverters) {
        DefaultContentTypeResolver resolver = new DefaultContentTypeResolver();
        resolver.setDefaultMimeType(MimeTypeUtils.APPLICATION_JSON);
        MappingJackson2MessageConverter converter = new MappingJackson2MessageConverter();
        converter.setObjectMapper(objectMapper);
        converter.setContentTypeResolver(resolver);
        messageConverters.add(converter);
        return false;
    }

Das war’s erst einmal schon für unser Backend.

Im nächsten Teil schauen wir uns die Gegenseite, unsere Angularanwendung, an.

Alles Live und In Farbe: https://github.com/GEDOPLAN/spring-angular-websocket

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Autor

Diesen Artikel teilen

LinkedIn
Xing

Gibt es noch Fragen?

Fragen beantworten wir sehr gerne! Schreibe uns einfach per Kontaktformular.

Kurse

weitere Blogbeiträge

IT-Training - GEDOPLAN
Jakarta EE (Java EE)

JPA + Rest, JSON-B in Action

“JSR 367” alias JSON-B soll es endlich richten: ein standardisiertes JSON-Binding, ähnlich der Verarbeitung von XML mit JAXB. Gerade bei…

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!