Projekt aplikacji chat - Spring Boot/JMS/JS/STOMP

Na jednym ze swoich LiveStreamów stworzyłem aplikacje chatu, która pozwala na dynamiczna wymianę wiadomości tekstowych wraz z automatycznym wyświetleniem treści na interfejsie użytkownika.

Aplikacja została zbudowana z wykorzystaniem technologii:

Spring Boot/JMS – część backendowa projektu.
JavaScript – umożliwiający dynamiczne wyświetlanie wiadomości na GUI.
STOMP – prosty protokół wymiany danych tekstowych.

Backend

Zadaniem backendu jest zarządzanie wiadomości za pomocą kolejki. Dlatego w pierwszej kolejności należy utworzyć model dla komunikatu, który będzie wymieniany:

public class ChatMessage {

    private String value;
    private String user;

    public String getUser() {
        return user;
    }

    public void setUser(String user) {
        this.user = user;
    }

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }

    public ChatMessage(String value) {
        this.value = value;
    }

    public ChatMessage() {
    }
}

W następnej kolejności zostanie utworzona kolejna i protokół STOMP:

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

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

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

Zadaniem tych metod jest:

registerStompEndpoints – utworzenie punktu końcowego dla protokołu STOMP na podstawie dostarczonego URL.
configureMessageBroker – skonfigurowanie brokera wiadomości

Należy też do naszej kolejki dodać punkt końcowy z poziomu, którego możliwe będzie przesyłanie wiadomości. Metoda ta posiada dwie adnotacje. Pierwsza z nich wskazuje pod jakim endpointem jest przyjmowana wiadomość, natomiast druga adnotacja pozwala na umieszczanie wiadomości w kolejce.

@Controller
public class ChatMessageController {

    @MessageMapping("/chat")
    @SendTo("/topic/messages")
    public ChatMessage get(ChatMessage chatMessage) {
        return chatMessage;
    }
}

Cześć backendowa za nami!

Frontend

W HTML tworzymy formatkę umożlwiająca wymianę danych. Ma ona pole do wprowadzania nicku, tekstu oraz umożliwia w momencie załadowania się strony połączyć się z kolejką za pośrednictwem JS.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello chat!!!</title>
    </head>
    <body onload="connect()">
        <div>
            <label>User:</label>
            <input id="user" type="text"/><br>

            <label>You message:</label>
            <input id="messageToSend" type="text"/><br>

            <button onclick="sendMessage()">Send</button>
            <p id="reponse"></p>
        </div>
        <script src="js.js"></script>
        <script src="stomp.js"></script>
    </body>
</html>

W JS tworzone są 3 metody:

showMessage – umożliwia wyświetlanie wiadomości na GUI.
connect – umożliwia na połączenie się z kolejką. Implementacja bazuje na bibliotece stomp.js.
sendMessage – do wysyłania wiadomości z formularza HTML, wiadomości z tego formularza trafiają do kolejki, stąd odniesienie do app/chat, gdzie /app jest prefiksem zdefiniowanym w pliku WebSocketConfig, natomiast punktem końcowym jest /chat określony w klasie ChatMessageController.