Realtime web notification Using Apache Kafka, Spring WebSocket and Angular

In this story, I’ll explain you how to send notifications to the web client without refreshing the web browser.

We are going to create a simple real-time web application that demonstrates how to use Kafka as a message broker with Spring Boot as the backend and Angular 9 on the front end.

Setup kafka instance

Many installation methods are recommended in official documents. Here we are using docker compose to easily setup a kafka instance.

version: '3.7'
services:
  zoo1:
    image: zookeeper:3.4.9
    hostname: zoo1
    ports:
      - "2181:2181"  
    environment:
        ZOO_MY_ID: 1
        ZOO_PORT: 2181
        ZOO_SERVERS: server.1=zoo1:2888:3888
kafka1:
    image: confluentinc/cp-kafka:5.5.1
    hostname: kafka1
    ports:
      - "9092:9092"
      - "29092:29092"      
    environment:
      KAFKA_ADVERTISED_LISTENERS: LISTENER_DOCKER_INTERNAL://127.0.0.1:29092,LISTENER_DOCKER_EXTERNAL://127.0.0.1:9092
      KAFKA_LISTENER_SECURITY_PROTOCOL_MAP: LISTENER_DOCKER_INTERNAL:PLAINTEXT,LISTENER_DOCKER_EXTERNAL:PLAINTEXT
      KAFKA_INTER_BROKER_LISTENER_NAME: LISTENER_DOCKER_INTERNAL
      KAFKA_ZOOKEEPER_CONNECT: "zoo1:2181"
      KAFKA_CREATE_TOPICS: notification:1:1:compact
      KAFKA_BROKER_ID: 1
      KAFKA_LOG4J_LOGGERS: "kafka.controller=INFO,kafka.producer.async.DefaultEventHandler=INFO,state.change.logger=INFO"
      KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 1
    depends_on:
      - zoo1

Start the zookeeper and kafka instance with docker-compose up -d

Backend side code

Create 2 Spring Boot projects (producer kafka and consumer kafka). You need to import the kafka dependencies into your pom.xml file.

<dependency>
    <groupId>org.springframework.kafka</groupId>
    <artifactId>spring-kafka</artifactId>
</dependency>

KafkaProducerConfiguration.java

The next step is to create an endpoint and a class of service to send the messages to the Kafka topic.