Server-Java-Spring Websockets

[ff_java]

Hallo Zusammen,
ich versuche eine kleine Chat Applikation zu entwickeln, und bin dabei folgendem Tutorial gefolgt. (https://www.callicoder.com/spring-boot-websocket-chat-example/)
Nun ist allerdings die Anforderung die Clientseite aus dem Projekt auszugliedern, bevor der Service deployt wird. Also das ich die Index.html, main.css und die main.js getrennt lagere. Nun weiß ich allerdings nicht was ich tun muss, um den Client wieder mit dem Server zu verbinden.
Muss hier ein Pfad angepasst werden, z.B. beim new SockJS(...) oder wie stelle ich diese Verbindung her.
Kann mir hier vielleicht jemand weiterhelfen?
Vielen Dank
Beste Grüße
Florian

 

[kneitzel]

Also wenn ich Dich richtig verstanden habe, dann willst Du die statischen Dinge nicht mehr per spring boot ausliefern sondern über einen anderen Server (z.B. ein apache Webserver oder lokale Dateien).

Nach meinem Verständnis sollte es da dann ausreichen, die entsprechende URL anzugeben, so wie es z.B. bei https://github.com/sockjs/sockjs-client angegeben wurde.

Also statt dem bisher hart kodierten /ws muss es dann halt ein http://localhost:8080/ws oder so sein. In der Applikation macht da der Browser einiges selbst, aber wenn Auslieferung der Seite und der Web Socket getrennt sind, dann musst Du die korrekte URL halt selbst angeben.

 

[ff_java]

Danke für das Feedback. Das hab ich auch schon probiert, leider wird so aber die onError-Funktion ausgelöst.

 

[kneitzel]

Kannst Du Details nennen?
a) Was ist Deine genaue Konfiguration? Also zum einen genau die Seite - was hast Du genau geändert? Welche URL hast du genau angegeben und so.
b) Wie ist dein genaues Vorgehen? (Also ich hoffe mal, dass Du die Spring Boot Applikation auch gestartet hast und so ...)
c) Was ist der genaue Fehler? onError bekommt doch auch einen Fehler ausgegeben. Und siehst Du etwas bei der Console der Spring Boot Applikation?

Es kann sich auch lohnen, einfach im Browser die Entwickler Konsole zu öffnen. Da bekommt man Fehler auch meist gut angezeigt und kann Requests sowie die Antworten nachvollziehen und so ...

Also ich würde jetzt raten, dass es ein Security Thema ist, da Du nun einen anderen Server ansprichst, als die Seite geladen wurde. Das wird spring boot per default nicht mögen. Das wirst Du aber bestimmt im Detail sagen können. Das was ich meine, würde ich z.B. unter https://developer.mozilla.org/de/docs/Web/HTTP/CORS nachlesen lassen (So es diese Problematik ist.)

 

[kneitzel]

Ok, ich habe jetzt einmal die Zeit gefunden, das selbst einmal auszuprobieren.

Meine Vermutung stimmte, es ist das vermutete Problem. Dieses konkrete Problem lässt sich lösen durch eine kleine Anpassung der WebSocketConfig, in der eine Methode leicht angepasst werden muss:

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").setAllowedOrigins("*").withSockJS();
    }

Das setAllowedOrigins ist hinzu gekommen.

Evtl. hilft es Dir, wenn ich kurz mein Vorgehen umschreibe:
- Den Beispielcode von https://github.com/callicoder/spring-boot-websocket-chat-demo herunter geladen, entpackt und gestartet
- Die Verzeichnisstruktur aus dem static Verzeichnis in ein temp Verzeichnis kopiert.
- In der HTML Seite die Links zum css und zur js jeweils am Anfang mit einem . versehen (also Start mit "./" statt nur mit "/")
- Aufruf der HTML Seite aus dem temp Verzeichnis heraus mit Chrome, Developer .
==> "Access to XMLHttpRequest at 'http://localhost:8080/ws/info?t=1589867374734' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." (Danach wird sich bestimmt gut in Google suchen lassen.

Das mit dem setAllowedOrigins ist dann eine einfache Lösungsmöglichkeit. Das dürfte wohl auch in den meisten Anleitungen / Tutorials so auftauchen meine ich (Sowas meine ich zumindest am öftesten gelesen zu haben, aber ich möchte mich da nicht unbedingt festlegen. Da kennen sich andere evtl. noch deutlich besser aus und halten ggf. andere Lösungen für besser..).

 

[ff_java]

Hallo,
vielen Dank für die Antwort. Mit dieser Änderung funktioniert das.
Ich habe auch mal deine Schritte ausgeführt und verstehe es jetzt schon besser.
Vielleicht kannst du mir auch spontan bei meinem zweiten Problem in diesem Kontext helfen. Ich werde auch wie von dir beschrieben ganz explizit auf die Problematik eingehen und Details nennen.
Ich möchte den Client in einem Typescript Projekt nutzen und das Ganze mit Webpack bündeln. Aktuell wird ja im Javascript-Code SockJS und Stomp für die Erstellung eines Clients genutzt:

     var socket = new SockJS('/ws');
     stompClient = Stomp.over(socket);
     stompClient.connect({}, onConnected, onError);

Wenn ich nun das Ganze mit Typescript und Webpack nutzen möchte, muss ich ja entsprechende imports für SockJS und Stomp bereitstellen.
Bei meiner Recherche schien es mir am besten auf sockjs-client (https://github.com/sockjs/sockjs-client) und stompjs (https://github.com/stomp-js/stompjs) zurückzugreifen. Genutzt werden könnte dies ja über

import * as SockJS from 'sockjs-client';
import * as Stomp from 'stompjs';

Vorher habe ich entsprechend die Installation vorgenommen und die Typings installiert

npm i sockjs-client --save
npm i stompjs --save

Wenn ich allerdings new SockJS('http://localhost:8080/ws') erstellen möchte, kommt folgende Fehlermeldung:
This expression is not constructable.
Type '{ default: { (url: string, _reserved?: any, options?: Options | undefined): WebSocket; new (url: string, _reserved?: any, options?: Options | undefined): WebSocket; ... 4 more ...; CLOSED: 3; }; ... 4 more ...; CLOSED: 3; }' has no construct signatures.ts(2351)
communication.component.ts(9, 1): Type originates at this import. A namespace-style import cannot be called or constructed, and will cause a failure at runtime. Consider using a default import or import require here instead.

Auch finde ich keine Verbindung dieser beiden Bibliotheken, um die bisherige Logik entsprechend umzusetzen.

Falls du mir auch hierbei eine Lösung nennen kannst, wäre ich sehr dankbar.
Beste Grüße

 

[kneitzel]

Also mit Typescript kann ich nicht wirklich helfen. Ich bin in erster Linie auf dem Backend zuhause....

Aber wenn ich mir die Doku etwas ansehe (StompJS habe ich z.B. https://stomp-js.github.io/guide/stompjs/using-stompjs-v5.html gefunden), dann sieht es etwas anders aus.

Da findet man für TypeScript ein Import, der etwas anders aussieht. Und auch der Code sieht da komplett anders aus ... aber das kann ich nicht weiter bewerten, da Ich in TypeScript bisher nichts groß gemacht habe ....