Erstellen eines WebSocket-Servers mit dem Spark-Framework

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.

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

WebSockets mit dem Spark-Framework

Spark ist ein Mikro-Framework für die Erstellung von Java- und Kotlin-Webanwendungen.

Das Projekt erstellen

Sie werden Gradle verwenden, um eine neue Java-Anwendung zu initialisieren. Sie können den folgenden Befehl verwenden, um ein Verzeichnis für Ihr Projekt zu erstellen, zu diesem Verzeichnis zu navigieren und die Anwendung zu initialisieren:

Hinzufügen der Spark-Abhängigkeit

Fügen Sie die folgende Abhängigkeit zu dem dependencies Block von build.gradle:

compile 'com.sparkjava:spark-core:2.7.2'

Im Gegensatz zu Erstellen eines WebSocket-Servers mit Spring Bootfunktionieren WebSockets mit Spark nur mit dem eingebetteten Jetty Server, und Sie müssen den Pfad und den Handler vor allen HTTP-Routen definieren.

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 und annotieren Sie sie mit @WebSocket:

import org.eclipse.jetty.websocket.api.annotations.WebSocket;

@WebSocket
public class WebSocketHandler {
    
}

Jedes Ereignis, das der WebSocketHandler behandelt, wird durch eine Anmerkung definiert. Sie können mit der @OnWebSocketMessage Anmerkung können Sie Methoden für den Empfang von Binär- oder Textereignissen kennzeichnen.

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

Fügen Sie die folgenden Methoden hinzu:

@OnWebSocketMessage
public void handleTextMessage(Session session, String message) throws IOException {
    System.out.println("New Text Message Received");
    session.getRemote().sendString(message);
}

@OnWebSocketMessage
public void handleBinaryMessage(Session session, byte[] buffer, int offset, int length) throws IOException {
    System.out.println("New Binary Message Received");
    session.getRemote().sendBytes(ByteBuffer.wrap(buffer));
}

Beachten Sie, dass die Methodensignatur bestimmt, welche Art von Nachricht die Methode verarbeitet. Siehe die OnWebSocketMessage Dokumentation zur Anmerkung für eine Liste der unterstützten Methodensignaturen.

Registrieren des WebSocket-Handlers

Für die Nutzung des WebSocketHandlerzu verwenden, muss sie registriert werden.

Öffnen Sie die App Klasse, die Gradle für Sie erstellt hat. Löschen Sie die getGreeting Methode und den Inhalt der main Methode, da Sie beides nicht mehr benötigen werden.

Innerhalb der Hauptmethode fügen Sie Folgendes hinzu, um die WebSocketHandler auf den /socket Pfad:

@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    webSocket("/socket", WebSocketHandler.class);
}

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.

Erstellen Sie den resources Ordner innerhalb des src/main Ordners. Innerhalb des Ordners resources Ordners erstellen Sie den static Ordner.

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>

Nun müssen Sie Spark so konfigurieren, dass es nach Ihrem index.html zu suchen und den Server zu initialisieren, wenn die Anwendung ausgeführt wird. Sie können auch den Port festlegen, an dem der Server auf Verbindungen wartet.

Innerhalb der main Methode der App Klasse fügen Sie Folgendes hinzu webSocket:

staticFileLocation("static");
port(8080)
init();

Starten Sie die Anwendung

Ihr WebSocket-Server ist nun vollständig. Starten Sie Ihre Anwendung mit dem gradle run 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:

Connected

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.

Connected Check

Schlussfolgerung

In diesem Tutorial haben Sie gelernt, wie man mit Spark einen WebSocket-Server 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-spark-framework Repository.

Sie möchten WebSockets in Ihr bestehendes Spring Anwendung integrieren? Vielleicht möchten Sie mehr erfahren über Erstellen eines WebSocket-Servers mit Spring Boot?

Keine Frameworks? Kein Problem! Bleiben Sie dran für das nächste Tutorial, in dem ich Ihnen zeige, wie Sie einen WebSocket-Server mit der Java API für WebSockets erstellen.

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

Möchten Sie eine interessante Verwendung von WebSockets sehen? Sehen Sie sich die nexmo-Gemeinschaft/dtmf-snake Repository, um einen Code zu sehen, mit dem man ein Schlangenspiel unter Verwendung von Dual-Tone-Multifrequenzsignalen spielen kann.