📈 Flutter Series — Connecting the Spring Boot WebSocket Market Data

Real-time applications are becoming the norm, especially in domains like stock trading, sports updates, and messaging platforms. In this tutorial, we’ll build a real-time stock market dashboard using Flutter on the frontend and Spring Boot as the backend, communicating over WebSockets.

We’ll cover:

• Setting up a Spring Boot WebSocket backend for market data
• Creating a WebSocket client in Flutter
• Displaying live stock data with a responsive dashboard UI

🏗️ Backend: Spring Boot WebSocket Setup

We’ll simulate market data on the backend and push updates to connected clients over WebSocket.

✅ Spring Boot Dependencies (pom.xml)

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
</dependencies>

✅ WebSocket Configuration

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").setAllowedOriginPatterns("*").withSockJS();
    }

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

✅ Simulated Market Data Broadcaster

@Component
public class StockPriceSimulator {

    private final SimpMessagingTemplate template;
    private final Random random = new Random();

    public StockPriceSimulator(SimpMessagingTemplate template) {
        this.template = template;
    }

    @Scheduled(fixedRate = 1000)
    public void sendUpdates() {
        Stock stock = new Stock("AAPL", 150 + random.nextDouble() * 5);
        template.convertAndSend("/topic/stocks", stock);
    }
}

✅ Stock Model

public class Stock {
    private String symbol;
    private double price;

    // constructor, getters, setters
}

✅ Main App Class

@SpringBootApplication
@EnableScheduling
public class MarketWebSocketApp {
    public static void main(String[] args) {
        SpringApplication.run(MarketWebSocketApp.class, args);
    }
}

Run the backend: [http://localhost:8080/ws](http://localhost:8080/ws)

💻 Frontend: Flutter WebSocket Client

Now, we’ll build the Flutter app that connects to this backend.

✅ pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  stomp_dart_client: ^0.4.4

✅ Stock Model

class Stock {
  final String symbol;
  final double price;

  Stock({required this.symbol, required this.price});

  factory Stock.fromJson(Map<String, dynamic> json) {
    return Stock(
      symbol: json['symbol'],
      price: json['price'],
    );
  }
}

✅ WebSocket Service (STOMP)

import 'dart:convert';
import 'package:stomp_dart_client/stomp.dart';
import 'package:stomp_dart_client/stomp_frame.dart';
import 'stock.dart';

class WebSocketService {
  late StompClient stompClient;
  Function(Stock)? onStockUpdate;

  void connect() {
    stompClient = StompClient(
      config: StompConfig.SockJS(
        url: 'http://localhost:8080/ws',
        onConnect: onConnect,
        onWebSocketError: (dynamic error) => print(error),
        onStompError: (dynamic error) => print(error),
      ),
    );

    stompClient.activate();
  }

  void onConnect(StompFrame frame) {
    stompClient.subscribe(
      destination: '/topic/stocks',
      callback: (StompFrame frame) {
        if (frame.body != null && onStockUpdate != null) {
          final stock = Stock.fromJson(jsonDecode(frame.body!));
          onStockUpdate!(stock);
        }
      },
    );
  }

  void disconnect() {
    stompClient.deactivate();
  }
}

✅ Real-Time Stock Dashboard

import 'package:flutter/material.dart';
import 'stock.dart';
import 'websocket_service.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final WebSocketService wsService = WebSocketService();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stock Dashboard',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: DashboardPage(wsService),
    );
  }
}

class DashboardPage extends StatefulWidget {
  final WebSocketService wsService;

  DashboardPage(this.wsService);

  @override
  _DashboardPageState createState() => _DashboardPageState();
}

class _DashboardPageState extends State<DashboardPage> {
  Stock? currentStock;

  @override
  void initState() {
    super.initState();
    widget.wsService.onStockUpdate = (stock) {
      setState(() {
        currentStock = stock;
      });
    };
    widget.wsService.connect();
  }

  @override
  void dispose() {
    widget.wsService.disconnect();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Real-Time Stock Dashboard')),
      body: Center(
        child: currentStock == null
            ? CircularProgressIndicator()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(currentStock!.symbol,
                      style: TextStyle(fontSize: 40)),
                  Text('\$${currentStock!.price.toStringAsFixed(2)}',
                      style: TextStyle(fontSize: 30)),
                ],
              ),
      ),
    );
  }
}

🧪 Testing and Running the App

• Start the Spring Boot backend: mvn spring-boot:run
• Run the Flutter app on a mobile emulator or Chrome (use a proxy to allow local WebSocket access)
• Watch live stock data update every second!

✅ Final Thoughts

By integrating Flutter with a Spring Boot backend over WebSockets, you can create powerful real-time apps like trading platforms, dashboards, or collaborative tools. In this example, we created a working prototype of a stock market dashboard using the STOMP protocol, SockJS, and Flutter Streams.

Want to add authentication, error recovery, or visual charts? Stay tuned for Part 2!