first commit

SwyxWeb: React-Frontend und Spring-Boot-Backend mit SwyxTray-Mock.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-20 11:03:34 +02:00
co-authored by Claude Opus 5
commit ae397e1ea3
44 changed files with 6640 additions and 0 deletions
@@ -0,0 +1,15 @@
package de.appcreation.swyxweb;
import de.appcreation.swyxweb.config.WebSocketProperties;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
@SpringBootApplication
@EnableConfigurationProperties(WebSocketProperties.class)
public class BackendApplication {
public static void main(String[] args) {
SpringApplication.run(BackendApplication.class, args);
}
}
@@ -0,0 +1,19 @@
package de.appcreation.swyxweb.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* Erlaubt dem Vite-Dev-Server den Zugriff auf die REST-Endpunkte.
*/
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOriginPatterns("*")
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS");
}
}
@@ -0,0 +1,31 @@
package de.appcreation.swyxweb.config;
import de.appcreation.swyxweb.websocket.SwyxTrayMockHandler;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
/**
* Stellt den SwyxTray-Mock unter dem konfigurierten Pfad bereit, damit sich die
* Startseite auch ohne die echte SwyxTray-App testen lässt.
*/
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
private final SwyxTrayMockHandler handler;
private final WebSocketProperties properties;
public WebSocketConfig(SwyxTrayMockHandler handler, WebSocketProperties properties) {
this.handler = handler;
this.properties = properties;
}
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(handler, properties.path())
// Der Browser meldet sich von einem anderen Origin (Vite-Dev-Server) aus an.
.setAllowedOriginPatterns("*");
}
}
@@ -0,0 +1,15 @@
package de.appcreation.swyxweb.config;
import org.springframework.boot.context.properties.ConfigurationProperties;
/**
* Verbindungsdaten des WebSocket-Servers, die das Frontend über /api/config abholt.
*/
@ConfigurationProperties(prefix = "app.websocket")
public record WebSocketProperties(String host, int port, String path, boolean secure) {
/** Fertige URL, z. B. ws://192.168.180.135:8080/ws */
public String url() {
return (secure ? "wss" : "ws") + "://" + host + ":" + port + path;
}
}
@@ -0,0 +1,38 @@
package de.appcreation.swyxweb.web;
import de.appcreation.swyxweb.config.WebSocketProperties;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
* Liefert dem Frontend die Laufzeit-Konfiguration, damit die WebSocket-Adresse
* nicht im JavaScript-Bundle fest verdrahtet werden muss.
*/
@RestController
@RequestMapping("/api")
public class ConfigController {
private final WebSocketProperties properties;
public ConfigController(WebSocketProperties properties) {
this.properties = properties;
}
public record ClientConfig(String websocketUrl, String host, int port, String path) {
}
@GetMapping("/config")
public ClientConfig config() {
return new ClientConfig(
properties.url(),
properties.host(),
properties.port(),
properties.path());
}
@GetMapping("/health")
public java.util.Map<String, String> health() {
return java.util.Map.of("status", "UP");
}
}
@@ -0,0 +1,32 @@
package de.appcreation.swyxweb.web;
import de.appcreation.swyxweb.websocket.LineState;
import de.appcreation.swyxweb.websocket.SwyxTrayMockHandler;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
/**
* Auslöser für den SwyxTray-Mock: simuliert einen eingehenden Anruf, damit sich
* die Anrufmeldung der Startseite ohne echte Telefonanlage prüfen lässt.
*
* <pre>curl -X POST "http://localhost:8080/api/mock/incoming-call?number=%2B493012345&name=Muster%20GmbH"</pre>
*/
@RestController
@RequestMapping("/api/mock")
public class MockController {
private final SwyxTrayMockHandler mock;
public MockController(SwyxTrayMockHandler mock) {
this.mock = mock;
}
@PostMapping("/incoming-call")
public LineState incomingCall(
@RequestParam(required = false) String number,
@RequestParam(required = false) String name) {
return mock.simulateIncomingCall(number, name);
}
}
@@ -0,0 +1,86 @@
package de.appcreation.swyxweb.websocket;
import com.fasterxml.jackson.annotation.JsonIgnore;
/**
* Leitungseintrag im Snapshot Feldnamen und Werte wie bei der echten
* SwyxTray-App: {@code state} trägt den Namen aus der CLMgr-Aufzählung
* {@code LineState}, {@code stateText} den deutschen Klartext aus SwyxIt!.
*
* <p>Mitgeschnitten und damit bestätigt sind {@code LSInactive / 0 / "frei"} und
* {@code LSRinging / 3 / "klingelt"}; die Werte für Wählen und Gespräch sind der
* Aufzählung nachempfunden. Die Startseite wertet {@code state} und
* {@code stateText} aus, nicht {@code stateCode}.
*/
public record LineState(
int line,
String state,
int stateCode,
String stateText,
String peer,
String peerNumber,
String peerName,
boolean busy,
boolean selected) {
public static final String FREE = "LSInactive";
public static final String RINGING = "LSRinging";
public static final String DIALING = "LSDialing";
public static final String ACTIVE = "LSActive";
/** Platzhalter der App für eine Leitung ohne Gegenstelle. */
private static final String NO_PEER = "unbekannt";
public static LineState free(int line) {
return new LineState(line, FREE, 0, "frei", NO_PEER, "", "", false, false);
}
public static LineState ringing(int line, String number, String name) {
return occupied(line, RINGING, 3, "klingelt", number, name);
}
@JsonIgnore
public boolean isRinging() {
return RINGING.equals(state);
}
public static LineState dialing(int line, String number, String name) {
return occupied(line, DIALING, 2, "wählt", number, name);
}
public LineState connected() {
return occupied(line, ACTIVE, 6, "verbunden", peerNumber, peerName);
}
/** Nur für den Mock die App kennt dieses Feld nicht, also nicht serialisieren. */
@JsonIgnore
public boolean isFree() {
return FREE.equals(state);
}
private static LineState occupied(
int line, String state, int stateCode, String stateText, String number, String name) {
return new LineState(
line, state, stateCode, stateText,
peerOf(number, name),
number == null ? "" : number,
name == null ? "" : name,
true, true);
}
/**
* Fertige Anzeigeform: Name mit Nummer in Klammern; fehlt eines, nur der
* vorhandene Wert.
*/
private static String peerOf(String number, String name) {
boolean hasName = name != null && !name.isBlank();
boolean hasNumber = number != null && !number.isBlank();
if (hasName && hasNumber) {
return name + " (" + number + ")";
}
if (hasName) {
return name;
}
return hasNumber ? number : NO_PEER;
}
}
@@ -0,0 +1,15 @@
package de.appcreation.swyxweb.websocket;
/**
* Tab des Firefox-Plugins im Mock Feldnamen wie in der Quittung auf
* {@code tabs}: {@code {"id":43,"title":"…","url":"https://…","active":true}}.
*
* <p>Die echte SwyxTray-App erzeugt diese Einträge nicht selbst; sie reicht die
* Antwort des Plugins unverändert durch.
*/
public record MockTab(int id, String title, String url, boolean active) {
public MockTab withActive(boolean nowActive) {
return new MockTab(id, title, url, nowActive);
}
}
@@ -0,0 +1,405 @@
package de.appcreation.swyxweb.websocket;
import java.io.IOException;
import java.net.URI;
import java.util.ArrayList;
import java.util.Collections;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicInteger;
import tools.jackson.databind.JsonNode;
import tools.jackson.databind.ObjectMapper;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
/**
* Simuliert die SwyxTray-App für Entwicklung und Test im Format, das gegen die
* echte App (Version 1.0.0.0, {@code protocol: 1}) mitgeschnitten wurde.
*
* <ul>
* <li>Beim Verbinden: {@code {"app":"SwyxTray",…,"type":"hello"}}, danach ein Snapshot.</li>
* <li>Kommando: {@code {"id":7,"cmd":"call","number":"…"}}
* → {@code {"id":7,"ok":true,"line":2,"type":"result"}}</li>
* <li><b>Keine Ereignisnachrichten.</b> Jede Änderung geht als vollständiger
* {@code snapshot} über alle Leitungen raus auch ein eingehender Anruf.</li>
* </ul>
*
* Ein eingehender Anruf lässt sich über {@code POST /api/mock/incoming-call} auslösen.
*
* <p>Seit Protokoll 6 beantwortet der Mock zusätzlich {@code tabs}, {@code opentab} und
* {@code closetab}. Die echte App reicht diese Kommandos an das Firefox-Plugin durch;
* der Mock spielt das Plugin und führt eine Liste vorgetäuschter Tabs im Speicher.
*/
@Component
public class SwyxTrayMockHandler extends TextWebSocketHandler {
private static final Logger log = LoggerFactory.getLogger(SwyxTrayMockHandler.class);
/** So viele Leitungen meldet die echte App. */
private static final int LINE_COUNT = 4;
/** Vorgetäuschte Fenstertitel für {@code focus} damit beide Zweige prüfbar sind. */
private static final List<String> MOCK_WINDOWS = List.of(
"SwyxIt!", "SwyxWeb Google Chrome", "Kundenakte Muster GmbH");
/** Protokollstand der echten App seit der Tab-Verwaltung. */
private static final int PROTOCOL_VERSION = 6;
private final ObjectMapper mapper;
private final Map<String, WebSocketSession> sessions = new ConcurrentHashMap<>();
private final Map<Integer, LineState> lines = new ConcurrentHashMap<>();
// Vorgetäuschte Tabs des Firefox-Plugins, in der Reihenfolge des Öffnens.
private final Map<Integer, MockTab> tabs = Collections.synchronizedMap(new LinkedHashMap<>());
private final AtomicInteger nextTabId = new AtomicInteger(41);
private final AtomicInteger nextSession = new AtomicInteger();
// Serialisiert Begrüßung und Snapshot, damit die Reihenfolge garantiert ist.
private final Object sendLock = new Object();
public SwyxTrayMockHandler(ObjectMapper mapper) {
this.mapper = mapper;
for (int line = 1; line <= LINE_COUNT; line++) {
lines.put(line, LineState.free(line));
}
// Zwei Tabs von Anfang an, damit die Startseite etwas anzuzeigen hat.
addTab("SwyxWeb", "http://localhost:5173/");
addTab("Kundenakte Muster GmbH", "https://crm.example.local/kunden/4711");
}
@Override
public void afterConnectionEstablished(WebSocketSession session) {
sessions.put(session.getId(), session);
log.info("SwyxTray-Mock: Client {} verbunden ({} aktiv)", session.getId(), sessions.size());
synchronized (sendLock) {
sendText(session, toJson(hello()));
sendText(session, toJson(snapshot()));
}
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
sessions.remove(session.getId());
log.info("SwyxTray-Mock: Client {} getrennt ({}) {} aktiv", session.getId(), status, sessions.size());
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) {
JsonNode request;
try {
request = mapper.readTree(message.getPayload());
} catch (Exception e) {
sendText(session, toJson(result(0, false, null, "Ungültiges JSON: " + e.getMessage())));
return;
}
int id = request.path("id").asInt(0);
String cmd = request.path("cmd").asString(null);
log.debug("SwyxTray-Mock: Kommando {} (id={})", cmd, id);
if (cmd == null) {
sendText(session, toJson(result(id, false, null, "Feld 'cmd' fehlt.")));
return;
}
try {
// `focus` rührt keine Leitung an und schickt deshalb auch keinen Snapshot.
if ("focus".equals(cmd)) {
boolean focused = focus(request.path("title").asString(null),
request.path("url").asString(null));
sendText(session, toJson(focusResult(id, focused)));
return;
}
// Die drei Tab-Kommandos gehen bei der echten App ans Firefox-Plugin;
// sie berühren die Leitungen ebenfalls nicht.
switch (cmd) {
case "tabs" -> {
sendText(session, toJson(tabsResult(id, listTabs())));
return;
}
case "opentab" -> {
sendText(session, toJson(openTabResult(id, openTab(request.path("url").asString(null)))));
return;
}
case "closetab" -> {
closeTab(request.path("tabId"));
sendText(session, toJson(result(id, true, null, null)));
return;
}
default -> { /* weiter unten */ }
}
Integer line = switch (cmd) {
case "call" -> dial(request.path("number").asString(null));
case "answer" -> answer(requiredLine(request));
case "hangup" -> hangup(requiredLine(request));
case "ping", "status" -> null;
default -> throw new IllegalArgumentException("Unbekanntes Kommando '" + cmd + "'.");
};
sendText(session, toJson(result(id, true, line, null)));
broadcastSnapshot();
} catch (IllegalArgumentException | IllegalStateException e) {
sendText(session, toJson(result(id, false, null, e.getMessage())));
}
}
// --- Kommandos -------------------------------------------------------
/**
* Nimmt den Wählauftrag an und belegt eine freie Leitung wie CLMgr, das
* asynchron wählt; der Verlauf kommt über die folgenden Snapshots.
*/
private int dial(String number) {
if (number == null || number.isBlank()) {
throw new IllegalArgumentException("Parameter 'number' fehlt.");
}
int line = freeLine();
lines.put(line, LineState.dialing(line, number.trim(), null));
log.info("SwyxTray-Mock: Wähle {} auf Leitung {}", number, line);
return line;
}
private int answer(int line) {
lines.put(line, occupied(line).connected());
return line;
}
private int hangup(int line) {
occupied(line);
lines.put(line, LineState.free(line));
return line;
}
/**
* Simuliert {@code focus}: Fenster mit passendem Titel „in den Vordergrund holen",
* sonst „Browser starten". Der Mock öffnet natürlich nichts, er protokolliert nur
* die Antworten entsprechen aber denen der echten App.
*
* @return {@code true}, wenn ein Fenster gefunden wurde
*/
private boolean focus(String title, String url) {
if (title == null || title.isBlank()) {
throw new IllegalArgumentException("Feld 'title' fehlt.");
}
String wanted = title.trim();
boolean found = MOCK_WINDOWS.stream()
.anyMatch(window -> window.toLowerCase().contains(wanted.toLowerCase()));
if (found) {
log.info("SwyxTray-Mock: Fenster '{}' in den Vordergrund geholt", wanted);
return true;
}
if (url == null || url.isBlank()) {
throw new IllegalArgumentException(
"Kein Fenster mit Titel '" + wanted + "' gefunden und keine URL angegeben.");
}
log.info("SwyxTray-Mock: Kein Fenster '{}' würde {} im Browser öffnen", wanted, url.trim());
return false;
}
/** Die offenen Tabs in der Reihenfolge des Öffnens. */
private List<MockTab> listTabs() {
synchronized (tabs) {
return List.copyOf(tabs.values());
}
}
/**
* Simuliert {@code opentab}. Die echte App prüft die Adresse selbst und lässt
* nur absolute http(s)-Adressen durch der Mock hält sich an dieselbe Regel.
*
* @return Kennung des neuen Tabs
*/
private int openTab(String url) {
if (url == null || url.isBlank()) {
throw new IllegalArgumentException("Feld 'url' fehlt.");
}
String wanted = url.trim();
URI uri;
try {
uri = URI.create(wanted);
} catch (IllegalArgumentException e) {
throw new IllegalArgumentException("Ungültige URL '" + wanted + "'.");
}
String scheme = uri.getScheme() == null ? "" : uri.getScheme().toLowerCase();
if (!uri.isAbsolute() || !(scheme.equals("http") || scheme.equals("https"))) {
throw new IllegalArgumentException(
"Nur absolute http(s)-Adressen sind erlaubt, nicht '" + wanted + "'.");
}
MockTab tab = addTab(uri.getHost() == null ? wanted : uri.getHost(), wanted);
log.info("SwyxTray-Mock: Tab {} für {} geöffnet", tab.id(), wanted);
return tab.id();
}
/** Simuliert {@code closetab}; eine unbekannte Kennung ergibt einen Fehler. */
private void closeTab(JsonNode tabId) {
if (!tabId.isNumber()) {
throw new IllegalArgumentException("Feld 'tabId' fehlt.");
}
int id = tabId.asInt();
synchronized (tabs) {
if (tabs.remove(id) == null) {
throw new IllegalArgumentException("Kein Tab mit der Kennung " + id + ".");
}
}
log.info("SwyxTray-Mock: Tab {} geschlossen", id);
}
/** Legt einen Tab an; der zuletzt geöffnete ist der aktive. */
private MockTab addTab(String title, String url) {
MockTab tab = new MockTab(nextTabId.incrementAndGet(), title, url, true);
synchronized (tabs) {
tabs.replaceAll((id, existing) -> existing.withActive(false));
tabs.put(tab.id(), tab);
}
return tab;
}
/** Löst einen eingehenden Anruf aus: Leitung belegen, Snapshot verschicken. */
public LineState simulateIncomingCall(String number, String name) {
int line = freeLine();
LineState state = LineState.ringing(
line,
number == null || number.isBlank() ? "+493012345" : number.trim(),
name == null || name.isBlank() ? null : name.trim());
lines.put(line, state);
log.info("SwyxTray-Mock: Eingehender Anruf von {} auf Leitung {}", state.peer(), line);
broadcastSnapshot();
return state;
}
// --- Hilfsmittel -----------------------------------------------------
private int requiredLine(JsonNode request) {
JsonNode node = request.path("line");
if (!node.isNumber()) {
throw new IllegalArgumentException("Parameter 'line' fehlt.");
}
return node.asInt();
}
private LineState occupied(int line) {
LineState state = lines.get(line);
if (state == null || state.isFree()) {
throw new IllegalArgumentException("Leitung " + line + " ist nicht belegt.");
}
return state;
}
private int freeLine() {
for (int line = 1; line <= LINE_COUNT; line++) {
if (lines.get(line).isFree()) {
return line;
}
}
throw new IllegalStateException("Alle Leitungen sind belegt.");
}
private Map<String, Object> hello() {
Map<String, Object> message = new LinkedHashMap<>();
message.put("app", "SwyxTray");
message.put("version", "mock");
message.put("protocol", PROTOCOL_VERSION);
message.put("session", nextSession.incrementAndGet());
message.put("type", "hello");
return message;
}
/** Vollzustand über <b>alle</b> Leitungen, auch die freien wie die echte App. */
private Map<String, Object> snapshot() {
List<LineState> entries = new ArrayList<>(LINE_COUNT);
for (int line = 1; line <= LINE_COUNT; line++) {
entries.add(lines.get(line));
}
boolean anyRinging = entries.stream().anyMatch(state -> state.isRinging());
boolean anyBusy = entries.stream().anyMatch(state -> !state.isFree());
Map<String, Object> message = new LinkedHashMap<>();
message.put("connected", true);
message.put("serverUp", true);
// Gesamtzustand wie die echte App: "Ringing"/"Eingehender Ruf" bzw. "Idle"/"Bereit".
message.put("overall", anyRinging ? "Ringing" : anyBusy ? "Busy" : "Idle");
message.put("statusText", anyRinging ? "Eingehender Ruf" : anyBusy ? "Im Gespräch" : "Bereit");
message.put("user", "Mock, M.");
message.put("server", "127.0.0.1");
message.put("lines", entries);
message.put("type", "snapshot");
return message;
}
/** Quittung auf {@code focus}; trägt statt der Leitung das Feld {@code focused}. */
private Map<String, Object> focusResult(int id, boolean focused) {
Map<String, Object> message = new LinkedHashMap<>();
message.put("id", id);
message.put("ok", true);
message.put("focused", focused);
message.put("type", "result");
return message;
}
/** Quittung auf {@code tabs}; trägt die Liste der Tabs. */
private Map<String, Object> tabsResult(int id, List<MockTab> entries) {
Map<String, Object> message = new LinkedHashMap<>();
message.put("id", id);
message.put("ok", true);
message.put("tabs", entries);
message.put("type", "result");
return message;
}
/** Quittung auf {@code opentab}; trägt die Kennung des neuen Tabs. */
private Map<String, Object> openTabResult(int id, int tabId) {
Map<String, Object> message = new LinkedHashMap<>();
message.put("id", id);
message.put("ok", true);
message.put("tabId", tabId);
message.put("type", "result");
return message;
}
private Map<String, Object> result(int id, boolean ok, Integer line, String error) {
Map<String, Object> message = new LinkedHashMap<>();
message.put("id", id);
message.put("ok", ok);
if (line != null) {
message.put("line", line);
}
if (error != null) {
message.put("error", error);
}
message.put("type", "result");
return message;
}
private void broadcastSnapshot() {
String json = toJson(snapshot());
synchronized (sendLock) {
sessions.values().forEach(session -> sendText(session, json));
}
}
private String toJson(Object value) {
return mapper.writeValueAsString(value);
}
private void sendText(WebSocketSession session, String json) {
if (!session.isOpen()) {
return;
}
// sendMessage ist nicht threadsicher Zugriffe pro Session serialisieren.
synchronized (session) {
try {
session.sendMessage(new TextMessage(json));
} catch (IOException e) {
log.warn("Senden an {} fehlgeschlagen: {}", session.getId(), e.getMessage());
}
}
}
}
@@ -0,0 +1,14 @@
spring.application.name=swyxweb-backend
# Port dieser Anwendung (REST-API und der eingebaute Test-Endpunkt /ws).
server.address=0.0.0.0
server.port=8080
# Adresse des WebSocket-Servers, die das Frontend über /api/config als
# Verbindungsziel bekommt. Unabhängig vom Port dieser Anwendung.
app.websocket.host=192.168.180.135
app.websocket.port=17654
app.websocket.path=/ws
app.websocket.secure=false
logging.level.de.appcreation.swyxweb=DEBUG
@@ -0,0 +1,13 @@
package de.appcreation.swyxweb;
import org.junit.jupiter.api.Test;
import org.springframework.boot.test.context.SpringBootTest;
@SpringBootTest
class BackendApplicationTests {
@Test
void contextLoads() {
}
}