Créer un serveur WebSocket avec le Spark Framework

WebSocket est un protocole qui permet la communication entre le serveur et le navigateur. Il présente un avantage par rapport à RESTful HTTP car les communications sont à la fois bidirectionnelles et en temps réel. Cela permet au serveur d'informer le client à tout moment, au lieu que le client demande des mises à jour à intervalles réguliers.

Dans cette série de billets, je vais vous montrer trois façons différentes de créer un serveur WebSocket en Java en utilisant Spring Bootle Spark Frameworket l API Java pour WebSockets.

Conditions préalables

Vous utiliserez Gradle pour gérer vos dépendances et exécuter votre application.

En outre, vous devez vous assurer qu'une copie du JDK est installée. J'utiliserai le JDK 8 dans ce tutoriel.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

WebSockets avec le Spark Framework

Spark est un micro-cadre pour la création d'applications web Java et Kotlin.

Créer le projet

Vous allez utiliser Gradle pour initialiser une nouvelle application Java. Vous pouvez utiliser la commande suivante pour créer un répertoire pour votre projet, naviguer vers ce répertoire et initialiser l'application :

Ajouter la dépendance Spark

Ajoutez la dépendance suivante au bloc dependencies de build.gradle:

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

Contrairement à Créer un serveur WebSocket avec Spring Bootles WebSockets avec Spark ne fonctionnent qu'avec le serveur embarqué Jetty et vous devrez définir le chemin et le gestionnaire avant toute route HTTP.

Créer le gestionnaire WebSocket

Les messages WebSocket peuvent être à la fois textuels et binaires. Vous allez créer un gestionnaire capable de traiter ces deux types de messages.

Créer une nouvelle classe appelée WebSocketHandler et l'annoter avec @WebSocket:

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

@WebSocket
public class WebSocketHandler {
    
}

Chaque événement traité par le WebSocketHandler est défini par une annotation. Vous pouvez utiliser l'annotation @OnWebSocketMessage pour marquer les méthodes de réception d'événements binaires ou textuels.

À des fins de démonstration, vous allez créer un serveur d'écho qui renverra le message reçu à l'expéditeur.

Ajouter les méthodes suivantes :

@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));
}

Notez que la signature de la méthode détermine le type de message que la méthode traitera. Voir la documentation sur les OnWebSocketMessage documentation sur les annotations pour obtenir la liste des signatures de méthodes prises en charge.

Enregistrer le gestionnaire WebSocket

Pour pouvoir utiliser le WebSocketHandleril faut l'enregistrer.

Ouvrez la App que Gradle a créée pour vous. Supprimez la méthode getGreeting et le contenu de la méthode main car vous n'en aurez pas besoin.

A l'intérieur de la méthode principale, ajoutez ce qui suit pour enregistrer l'élément WebSocketHandler sur le /socket chemin :

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

Créer un client pour tester votre application

Vous devrez créer un client pour tester votre serveur WebSocket. Vous voudrez tester l'envoi de messages textuels et binaires. Cela peut être réalisé avec JavaScript.

Créez le dossier resources à l'intérieur du dossier src/main à l'intérieur du dossier. A l'intérieur du resources créer le dossier static dossier.

Ajoutez ce qui suit à index.html à l'intérieur du dossier src/main/resources/static à l'intérieur du dossier

<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>

Vous devez maintenant configurer Spark pour qu'il recherche votre fichier index.html et pour initialiser le serveur lors de l'exécution de l'application. Vous pouvez également définir le port sur lequel le serveur écoutera les connexions.

A l'intérieur de la main de la classe App ajouter ce qui suit webSocket:

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

Démarrer l'application

Votre serveur WebSocket est maintenant terminé. Démarrez votre application en utilisant la commande gradle run dans le répertoire de l'application.

Vous pouvez accéder à votre application à l'adresse suivante http://localhost:8080 où vous serez accueilli par la page suivante :

Connected

Le message "connecté" indique que le client JavaScript a pu établir une connexion.

Essayez d'envoyer un message texte en tapant dans le champ de saisie et en cliquant sur le bouton d'envoi. Essayez également de télécharger une image. Dans les deux cas, vous devriez voir le même message et la même image renvoyés.

Connected Check

Conclusion

Dans ce tutoriel, vous avez appris à créer un serveur WebSocket en utilisant Spark qui peut recevoir des messages binaires et textuels. Le code complet de ce tutoriel peut être trouvé sur le site Web de nexmo-community/websocket-spark-framework sur le dépôt nexmo-community/websocket-spark-framework.

Vous souhaitez intégrer les WebSockets dans votre système existant Spring existante ? Peut-être voulez-vous en savoir plus sur Créer un serveur WebSocket avec Spring Boot?

Pas de cadre ? Pas de problème ! Restez à l'écoute pour le prochain tutoriel dans lequel je vous montrerai comment créer un serveur WebSocket à l'aide de l'API Java pour les WebSockets.

Saviez-vous que vous pouvez utiliser WebSocket comme point de terminaison dans un Nexmo Call Control Object? Regardez cet exemple sur Streaming d'appels vers un navigateur avec des WebSockets Voice.

Vous voulez voir une utilisation intéressante des WebSockets ? Jetez un coup d'œil à l'application nexmo-community/dtmf-snake pour voir du code qui vous permet de jouer à un jeu de serpent en utilisant des signaux multifréquences à double tonalité.