springboot-kafka-websocket

The goal of this project is to implement two Spring Boot applications: bitcoin-api and bitcoin-client. The bitcoin-api application simulates BTC price changes, while the bitcoin-client application listens to these changes and updates a real-time UI. The bitcoin-client UI is secured using Basic Authentication.

Proof-of-Concepts & Articles

On ivangfr.github.io, I have compiled my Proof-of-Concepts (PoCs) and articles. You can easily search for the technology you are interested in by using the filter. Who knows, perhaps I have already implemented a PoC or written an article about what you are looking for.

Additional Readings

• [Medium]: Building a Web Chat with Social Login using Spring Boot: Introduction
• [Medium]: News Producer and Consumer Tutorial

Project Overview

flowchart TB
    subgraph mysql ["MySQL"]
        db[("prices")]
    end

    subgraph kafka ["Kafka"]
        Topic["com.ivanfranchin.bitcoin.api.price"]
    end

    subgraph bitcoin-api ["bitcoin-api:9081\n(Spring Boot)"]
        RestCtrl["PriceController\nREST /api/bitcoin/last"]
        SwaggerUI["Swagger UI"]
        SimRunner["SimulationRunner"]
        Scheduler["PriceScheduler"]
        Emitter["PriceEventEmitter"]
    end

    subgraph bitcoin-client ["bitcoin-client:9082\n(Spring Boot)"]
        Listener["priceEventListener"]
        WS["WebSocket / STOMP"]
        UI["Thymeleaf UI"]
    end

    subgraph users ["Users"]
        HTTP["REST Clients"]
        Browser["Browser"]
    end

    SimRunner -->|"creates"| db
    db -->|"reads latest"| Scheduler
    Scheduler -->|"triggers"| Emitter
    Emitter -->|"pushes Price events"| Topic

    Topic -->|"consumes"| Listener
    Listener -->|"sends to"| WS
    WS -->|"pushes price"| UI

    UI -->|"sends chat comment"| WS
    WS -->|"broadcasts chat comment\n(all/private)"| UI

    HTTP -->|"calls"| RestCtrl
    Browser <-->|"accesses"| UI
    Browser -->|"accesses"| SwaggerUI
    SwaggerUI -->|"uses"| RestCtrl
    RestCtrl -->|"reads"| db

Loading

Applications

• bitcoin-api

  Spring Boot Web Java application service that simulates BTC price changes and pushes those changes to Kafka

• bitcoin-client

  Spring Boot Web Java application that was implemented using Thymeleaf as HTML template. It reads from Kafka and updates its UI using Websocket. It has also a chat where users can talk to each other by sending messages publicly or privately.

Prerequisites

• Java 25 or higher
• A containerization tool (e.g., Docker, Podman, etc.)

Start Environment

• Open a terminal and inside the springboot-kafka-websocket root folder run:

  docker compose up -d

• Wait for Docker containers to be up and running. To check it, run:

  docker ps -a

Running applications with Maven

Inside the springboot-kafka-websocket root folder, run the following Maven commands in different terminals:

• bitcoin-api

  ./mvnw clean spring-boot:run --projects bitcoin-api \
    -Dspring-boot.run.jvmArguments="-Dserver.port=9081"

• bitcoin-client

  ./mvnw clean spring-boot:run --projects bitcoin-client \
    -Dspring-boot.run.jvmArguments="-Dserver.port=9082"

Running Applications as Docker containers

Build Application's Docker Image

• In a terminal, make sure you are inside the springboot-kafka-websocket root folder.

• In order to build the application docker images, run the following script:

  ./build-docker-images.sh

Application's Environment Variables

• bitcoin-api

  Environment Variable	Description
  MYSQL_HOST	Specify host of the MySQL database to use (default localhost)
  MYSQL_PORT	Specify port of the MySQL database to use (default 3306)
  KAFKA_HOST	Specify host of the Kafka message broker to use (default localhost)
  KAFKA_PORT	Specify port of the Kafka message broker to use (default 29092)

• bitcoin-client

  Environment Variable	Description
  KAFKA_HOST	Specify host of the Kafka message broker to use (default localhost)
  KAFKA_PORT	Specify port of the Kafka message broker to use (default 29092)

Start Application's Docker container

• In a terminal, make sure you are inside the springboot-kafka-websocket root folder.

• Run the following script:

  ./start-apps.sh

Applications URLs

Application	URL	Credentials (user/pass)
bitcoin-api	http://localhost:9081/swagger-ui.html
bitcoin-client	http://localhost:9082	user1/123 or user2/123

The gif below shows two users checking real-time the BTC price changes. Additionally, they are using a chat channel to communicate with each other.

Useful Links & Commands

• Kafdrop

  Kafdrop can be accessed at http://localhost:9000

• MySQL

  docker exec -it -e MYSQL_PWD=secret mysql mysql -uroot --database bitcoindb
  select * from prices;

Shutdown

• To stop applications

  • If they were started with Maven, go to the terminals where they are running and press Ctrl+C.

  • If they were started as Docker containers, go to a terminal and, inside the springboot-kafka-websocket root folder, run the script below:

    ./stop-apps.sh

• To stop and remove docker compose containers, network and volumes, go to a terminal and, inside the springboot-kafka-websocket root folder, run the following command:

  docker compose down -v

Running Tests

The tests do not require a running environment — no MySQL or Kafka needed.

• Run all tests (both modules)

  ./mvnw clean test

• Run tests for a single module

  ./mvnw clean test --projects bitcoin-api
  ./mvnw clean test --projects bitcoin-client

• Run a single test class

  ./mvnw test --projects bitcoin-api -Dtest=PriceControllerTests
  ./mvnw test --projects bitcoin-client -Dtest=SecurityConfigTests

• Run a single test method

  ./mvnw test --projects bitcoin-api -Dtest=PriceControllerTests#testGetLastPriceReturnsLatestBitcoinPrice

Cleanup

To remove the Docker images created by this project, go to a terminal and, inside the springboot-kafka-websocket root folder, run the script below:

./remove-docker-images.sh

Code Formatting

Uses Spotless Maven Plugin + Google Java Format (Java) and Prettier (JS/HTML) for automated formatting.

• Check formatting:

  ./mvnw spotless:check

• Auto-fix formatting:

  ./mvnw spotless:apply

Formatting is enforced automatically during ./mvnw verify.

How to optimize the GIF in the documentation folder

• [Medium]: How I Reduce GIF and Screenshot Sizes for My Technical Articles on macOS

Support

If you find this useful, consider buying me a coffee:

License

This project is licensed under the MIT License.