nlz-it.net: Random IT stuff

Welcome to nlz-it.net
just a random IT blog.

GIB MIR DEIN GELD

If you like, support me ;-)

Wem die Seite gefällt,
kurz auf die Werbung klicken.
(AddBlocker Deaktivieren natürlich)

 

In diesem kleinen Projekt sollen lediglich die Grundlagen gezeigt werden, wie eine Websocket Verbindung aufgebaut werden kann. Als kleines Beispiel dafür wird eine minimale Chat-Website aufgebaut. Über diese Seite können dann Nachrichten versendet werde. Der Fokus liegt dabei auf "Keep it Simple".

Der gesamte Quellcode ist über Bitbucket erreichbar: Clone Repository

Kleine Erläuterungen:

Da der gesamte Quellcode offen steht wird hier nur auf ein paar kleine Dinge kurz eingegangen.

Wo finde ich was und wozu bruache ich es:

Dateiname

Pfad

Wozu/Was wird hier gemacht

 Application.java  src/ main/ java/ main  Start der Spring Application
 WebSocketConfig.java  src/ main/ java/ main/ configuration

 Hier wird die eigentliche Websocketverbindung konfiguriert

   //Stelle einen Kanal zur Verfügung, über diesen kommuniziert wird.
@Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }
//stelle eine Endpunkt zur Registrierung der Clients bereit.
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat-app").withSockJS();
    }
//do-stuff wenn die Verbindung abbricht
    @Override
    public void onApplicationEvent(SessionDisconnectEvent event) {
        System.out.println(event.toString());
    

Am besten in die app.js reinschauen, woriauf sich der Client Verbindet und welchen Kanal dieser Abnoniert(subscripe). Dann wird dieses Klasse etwas klarer.

 ChatController.java  src/ main/ java/ main/ controller

Einfacher Controller, der eine Nachricht empfängt, diese auf der Konsole ausgibt und wieder zurücksenset. Durch das Zurücksenden auf den Kanal wird sichergestellt, das alle Clints die diesen Kanal aboniert ahebn, diese NAchricht auch erhalten.

@MessageMapping("/hello") //recieved message from
    @SendTo("/topic/greetings") // the response is send as broadcast channel to /topic/greetings
    public ChatMessage greeting (ChatMessage message){
        System.out.println(message.getName());
        System.out.println(message.getContent());
        return message;
    }
 ChatMessage.java  src/ main/ java/ main/ hello Einfaches Domain Objekt damit Java die Empfangenen JSON Pakete auf ein Objekt Mappen kann.

 Client Seite

   
 app.js  /src/ main/ resources/ static

 Hier ist die Client-Seite realisiert. Wirklich interresant ist dabei lediglich die connect Funktion. Hier wird eine WebsocketVerbindung hersgestellt und ein Kanal Aboniert.

function connect(){
    var socket = new SockJS('/chat-app');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/greetings', function (antwort) {
            printMessage('<b>'+JSON.parse(antwort.body).name +'</b><BLOCKQUOTE>'+JSON.parse(antwort.body).content);
        });
    });
}

Alle anderen Funktionen sind recht klein und deren Namen erläutern deren Funktion.

 index.html  /src/ main/ resources/ static  Einfache HTML Seite zum Anzeigen des Chates ;-)

 Sowiet so gut. Das war es auch schon. Einfach das Projekt Klonen, bauen und die *.jar Datei ausführen. Die Anwendung starten auf den Port 8080. Wem das zu viel ist, kann die fertige JAR Datei auch direkt Downloaden. Zum starten:

java -jar [PFAD/ZUR/JAR/DATEI].jar

Have Fun.

Zum Seitenanfang
JSN Boot template designed by JoomlaShine.com
Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.