Erstellen eines WebSocket-Servers mit Spring Boot

WebSocket ist ein Protokoll, das die Kommunikation zwischen dem Server und dem Browser ermöglicht. Es hat einen Vorteil gegenüber RESTful HTTP, da die Kommunikation sowohl bidirektional als auch in Echtzeit erfolgt. Dadurch kann der Server den Client jederzeit benachrichtigen, anstatt dass der Client in regelmäßigen Abständen nach Aktualisierungen fragt.

In dieser Serie von Beiträgen zeige ich Ihnen drei verschiedene Möglichkeiten, wie Sie einen WebSocket-Server in Java mit Spring Boot, dem Spark-Frameworkund der Java-API für WebSockets.

Voraussetzungen

Sie werden Folgendes verwenden Gradle verwenden, um Ihre Abhängigkeiten zu verwalten und Ihre Anwendung auszuführen.

Außerdem müssen Sie sicherstellen, dass Sie eine Kopie des JDK installiert haben. In diesem Tutorial werde ich JDK 8 verwenden.

WebSockets mit Spring Boot

Spring Boot ermöglicht es Ihnen, produktionsreife Spring Applications innerhalb eines lauffähigen JARs zu erstellen.

Das Projekt erstellen

Sie können verwenden Spring Initializr verwenden, um Ihre Anwendung zu booten und die benötigten Pakete auszuwählen.

Für dieses Beispiel benötigen Sie die Websocket Abhängigkeit. Ich werde auch Gradle verwenden, also werden Sie es ändern wollen, um ein Gradle-Projekt zu erzeugen.

Spring Initializer Homepage

Wenn Sie auf die Schaltfläche Projekt generieren klicken, wird eine Zip-Datei heruntergeladen. Entpacken Sie diese in ein Verzeichnis Ihrer Wahl.

Erstellen Sie den WebSocket-Handler

WebSocket-Nachrichten können sowohl Text als auch binär sein. Sie werden einen Handler erstellen, der beide Arten von Nachrichten verarbeiten kann.

Erstellen Sie eine neue Klasse namens WebSocketHandler die die Klasse AbstractWebSocketHandler in dem com.example.websocketdemo Paket erweitert. AbstractWebSocketHandler erfordert, dass Sie zwei Methoden implementieren, handleTextMessage und handleBinaryMessage die aufgerufen werden, wenn eine neue Text- oder Binärnachricht empfangen wird.

Zu Demonstrationszwecken werden Sie einen Echo-Server erstellen, der die empfangene Nachricht an den Absender zurückschickt.

Fügen Sie die folgenden Implementierungen hinzu:

@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {
    System.out.println("New Text Message Received");
    session.sendMessage(message);
}

@Override
protected void handleBinaryMessage(WebSocketSession session, BinaryMessage message) throws IOException {
    System.out.println("New Binary Message Received");
    session.sendMessage(message);
}

Registrieren des WebSocket-Handlers

Um die WebSocketHandlerzu verwenden, muss es in Spring's WebSocketHandlerRegistry. Mit dem Folgenden werden zwei Dinge erreicht:

1. Sie registriert die WebSocketHandler auf dem /socket Pfad.

2. Sie ermöglicht es allen Browser-Clients, Nachrichten an den Server zu senden. Sie müssen nicht mehr einen bestimmten Ursprung haben.

Erstellen Sie eine neue Klasse namens WebSocketConfiguration die die Schnittstelle WebSocketConfigurer Schnittstelle in dem com.example.websocketdemo Paket implementiert.

Kommentieren Sie WebSocketConfiguration mit den @Configuration und @EnableWebSocket Anmerkungen.

WebSocketConfigurer erfordert die Implementierung einer registerWebSocketHandlers Methode.

Fügen Sie die folgende Implementierung in das Register ein WebSocketHandler:

@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(new WebSocketHandler(), "/socket").setAllowedOrigins("*");
}

Da Sie neben Textnachrichten auch mit binären Nachrichten zu tun haben werden, ist es sinnvoll, die maximale Größe der binären Nachrichten festzulegen. Dieser Wert wird im Server-Container gespeichert. Sie können diesen Wert außer Kraft setzen, indem Sie eine neue Server-Container-Fabrik als Teil Ihrer WebSocketConfiguration.

Fügen Sie den folgenden Code ein, um eine neue ServletServerContainerFactoryBean in WebSocketConfiguration oberhalb der registerWebSocketHandlers Methode, die Sie zuvor hinzugefügt haben:

@Bean
public ServletServerContainerFactoryBean createWebSocketContainer() {
    ServletServerContainerFactoryBean container = new ServletServerContainerFactoryBean();
    container.setMaxBinaryMessageBufferSize(1024000);
    return container;
}

Damit kann ein Bild mit einer Größe von bis zu 1 MB hochgeladen werden.

Erstellen Sie einen Client zum Testen Ihrer Anwendung

Sie müssen einen Client erstellen, um Ihren WebSocket-Server zu testen. Sie werden testen wollen, ob Sie sowohl Text- als auch Binärnachrichten senden können. Dies lässt sich mit JavaScript bewerkstelligen.

Fügen Sie folgendes zu index.html innerhalb des Ordners src/main/resources/static Ordners hinzu:

<html>
<head>
    <style>
        #messages {
            text-align: left;
            width: 50%;
            padding: 1em;
            border: 1px solid black;
        }
    </style>
    <title>Sample WebSocket Client</title>
</head>
<body>
<div class="container">
    <div id="messages" class="messages"></div>
    <div class="input-fields">
        <p>Type a message and hit send:</p>
        <input id="message"/>
        <button id="send">Send</button>

        <p>Select an image and hit send:</p>
        <input type="file" id="file" accept="image/*"/>

        <button id="sendImage">Send Image</button>
    </div>
</div>
</body>
<script>
    const messageWindow = document.getElementById("messages");

    const sendButton = document.getElementById("send");
    const messageInput = document.getElementById("message");

    const fileInput = document.getElementById("file");
    const sendImageButton = document.getElementById("sendImage");

    const socket = new WebSocket("ws://localhost:8080/socket");
    socket.binaryType = "arraybuffer";

    socket.onopen = function (event) {
        addMessageToWindow("Connected");
    };

    socket.onmessage = function (event) {
        if (event.data instanceof ArrayBuffer) {
            addMessageToWindow('Got Image:');
            addImageToWindow(event.data);
        } else {
            addMessageToWindow(`Got Message: ${event.data}`);
        }
    };

    sendButton.onclick = function (event) {
        sendMessage(messageInput.value);
        messageInput.value = "";
    };

    sendImageButton.onclick = function (event) {
        let file = fileInput.files[0];
        sendMessage(file);
        fileInput.value = null;
    };

    function sendMessage(message) {
        socket.send(message);
        addMessageToWindow("Sent Message: " + message);
    }

    function addMessageToWindow(message) {
        messageWindow.innerHTML += `<div>${message}</div>`
    }

    function addImageToWindow(image) {
        let url = URL.createObjectURL(new Blob([image]));
        messageWindow.innerHTML += `<img src="${url}"/>`
    }
</script>
</html>

Starten Sie die Anwendung

Ihr WebSocket-Server ist nun vollständig. Starten Sie Ihre Anwendung mit dem gradle bootRun Befehl innerhalb des Verzeichnisses der Anwendung.

Sie können Ihre Bewerbung abrufen unter http://localhost:8080 wo Sie mit der folgenden Seite begrüßt werden:

Sample JavaScript-enabled client for testing the WebSocket server

Die Meldung "connected" zeigt an, dass der JavaScript-Client eine Verbindung herstellen konnte.

Versuchen Sie, eine Textnachricht zu senden, indem Sie in das Eingabefeld tippen und auf die Schaltfläche "Senden" klicken. Versuchen Sie auch, ein Bild hochzuladen. In beiden Fällen sollten Sie die gleiche Nachricht und das gleiche Bild zurückerhalten.

Sample JavaScript-enabled client showing a text and binary message echoed back

Schlussfolgerung

In diesem Tutorial haben Sie gelernt, wie man einen WebSocket-Server mit Spring Boot erstellt, der sowohl binäre als auch Textnachrichten empfangen kann. Den fertigen Code für dieses Tutorial finden Sie auf der Seite nexmo-community/websocket-spring-boot Repository.

Haben Sie schon das Spark-Framework ausprobiert? Vielleicht möchten Sie wissen, wie man Erstellen eines WebSocket-Servers mit dem Spark-Framework.

Wussten Sie, dass Sie WebSocket als Endpunkt in einem Call Control Objekt? Sehen Sie sich dieses Beispiel an Streaming von Anrufen an einen Browser mit Voice WebSockets.