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…