Creación de un servidor WebSocket con Spark Framework

WebSocket es un protocolo que permite la comunicación entre el servidor y el navegador. Tiene una ventaja sobre RESTful HTTP porque las comunicaciones son bidireccionales y en tiempo real. Esto permite que el servidor notifique al cliente en cualquier momento, en lugar de que el cliente busque actualizaciones a intervalos regulares.

En esta serie de posts, voy a mostrarte tres formas diferentes de crear un servidor WebSocket en Java utilizando Spring Booty el Spark Frameworky la API de Java para WebSockets.

Requisitos previos

Utilizará Gradle para gestionar tus dependencias y ejecutar tu aplicación.

Además, tendrás que asegurarte de que tienes una copia del JDK instalada. Voy a utilizar JDK 8 en este tutorial.

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 con el framework Spark

Spark es un micromarco para crear aplicaciones web Java y Kotlin.

Crear el proyecto

Utilizarás Gradle para inicializar una nueva aplicación Java. Puedes usar el siguiente comando para crear un directorio para tu proyecto, navegar a ese directorio e inicializar la aplicación:

Añadir la dependencia de Spark

Añada la siguiente dependencia al bloque dependencies del bloque build.gradle:

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

A diferencia de Creación de un servidor WebSocket con Spring Bootlos WebSockets con Spark sólo funcionan con el servidor embebido Jetty y tendrás que definir la ruta y el manejador antes de cualquier ruta HTTP.

Crear el manejador WebSocket

Los mensajes WebSocket pueden ser tanto de texto como binarios. Vas a crear un manejador que pueda manejar ambos mensajes.

Crea una nueva clase llamada WebSocketHandler y anótala con @WebSocket:

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

@WebSocket
public class WebSocketHandler {
    
}

Cada evento que WebSocketHandler se define mediante una anotación. Puede utilizar la anotación @OnWebSocketMessage para etiquetar métodos de recepción de eventos binarios o de texto.

Para fines de demostración, vas a crear un servidor de eco que hará eco del mensaje recibido de vuelta al remitente.

Añade los siguientes métodos:

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

Tenga en cuenta que la firma del método determina qué tipo de mensaje manejará el método. Véase la OnWebSocketMessage documentación sobre anotaciones para obtener una lista de las firmas de método admitidas.

Registrar el WebSocket Handler

Para poder utilizar el WebSocketHandlerdebe estar registrado.

Abre la clase App que Gradle ha creado para ti. Borra el método getGreeting y el contenido del método main ya que no los necesitarás.

Dentro del método main añada lo siguiente para registrar el método WebSocketHandler en la /socket ruta:

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

Cree un cliente para probar su aplicación

Necesitarás crear un cliente para probar tu servidor WebSocket. Usted querrá probar el envío de mensajes de texto y binarios. Esto se puede lograr con JavaScript.

Cree la carpeta resources dentro de la carpeta src/main carpeta. Dentro de la resources cree la carpeta static carpeta.

Añade lo siguiente a index.html dentro de la carpeta src/main/resources/static carpeta:

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

Ahora necesitarás configurar Spark para que busque tu index.html y para inicializar el servidor cuando se ejecute la aplicación. También puedes definir el puerto en el que el servidor escuchará las conexiones.

Dentro del main de la clase App añada lo siguiente webSocket:

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

Iniciar la aplicación

Su servidor WebSocket está ahora completo. Inicie su aplicación utilizando el comando gradle run dentro del directorio de la aplicación.

Puede acceder a su solicitud en http://localhost:8080 donde aparecerá la siguiente página:

Connected

El mensaje "conectado" indica que el cliente JavaScript ha podido establecer una conexión.

Intenta enviar un mensaje de texto escribiendo en el campo de entrada y pulsando el botón enviar. Prueba también a subir una imagen. En ambos casos, debería recibir el mismo mensaje y la misma imagen.

Connected Check

Conclusión

En este tutorial aprendiste a crear un servidor WebSocket usando Spark que puede recibir tanto mensajes binarios como de texto. El código final de este tutorial se puede encontrar en la página web de nexmo-community/websocket-spark-framework repositorio.

¿Desea implementar WebSockets en su solución Spring existente? Quizás quiera aprender sobre Cómo crear un servidor WebSocket con Spring Boot?

¿No tiene marcos? No hay problema. Permanece atento al próximo tutorial en el que te mostraré cómo crear un servidor WebSocket utilizando la API Java para WebSockets.

¿Sabías que puedes utilizar WebSocket como endpoint en un Objeto de Control de Llamada Nexmo? Mira este ejemplo en Streaming de Llamadas a un Navegador con WebSockets de Voice.

¿Quieres ver un uso interesante de WebSockets? Eche un vistazo a nexmo-community/dtmf-snake para ver un código que te permite jugar al juego de la serpiente utilizando señales de doble tono multifrecuencia.