Skip to content

Backend Integration & Data Flow

  • The Tour Manager UI is connected to a FastAPI backend via HTTP and WebSocket connections. This backend communicates with ROS2 services to send and receive information about tours and system states.

Goal of the API Integration

  • The purpose of the interface is to enable the creation, editing, and transfer of tours, as well as to transmit status information such as the robot’s position or system messages to the UI in real time.

Communication Types

  • HTTP (e.g. fetch in Svelte)

Retrieving tour data

Creating new tours

Deleting or updating tours

  • WebSocket Used for:

Transmitting live data (e.g., feedback on robot status)

State changes such as starting or stopping a tour

WebSocket Implementation in the UI

The WebSocket connection is set up in the file routes/edit_tour/+page.svelte to ensure that the tour detail view remains synchronized with the backend in real time.

  1. open ws://<HOST>:7000/ws
  2. on open -> send {"action":"subscribe","tourId": "<current tour id>"}

  3. on message with {"type":"update","data":{…}} -> merge into local tour state

  4. Dev toggle: Disabled by default via useWebSocket = false to avoid errors when no WS server is running. When set to true, the UI will attempt the connection on mount.

  5. Test action: The button "Send test message to WS" calls sendWsMessage(...) if the socket isnt connected, the console logs a warning and nothing is sent

  6. Current status/prerequisite: The UI code is in place but wont work until a backend WebSocker endpoint exists at ws://<HOST>:7000/ws that accepts the subscribe message and emits update events. Once that server is available, set useWebSocket = true and adjust <HOST> (or configure a proxy) to enable live updates.

Example payloads - Subscribe : {"action":"subscribe","tourId":"tour_eso"} - Update (from server): {"type":"update","data":{"name":"ESO Tour","steps":[…]}}

  • Backend teams can implement any message schema, but the UI currently expects the above subscribe and update shapes.

UI Files Related to the Backend

lib/state/server_state.svelte

Manages the global list of tours (tours)

Updated based on API responses

routes/+page.svelte

Sends HTTP requests (e.g., via fetch) to API endpoints

Creates new tours and navigates to the edit view

routes/edit_tour/+page.svelte

Allows editing of individual tours with direct state updates

lib/state/ws.ts (falls vorhanden)

Establishes and manages the WebSocket connection