🚀 Kafka Demo Dashboard

Полноценная демо-система для вебинара по Apache Kafka с React фронтендом для управления Producer и Consumer сервисами.

🏗️ Архитектура

Система состоит из следующих компонентов:

Kafka Broker - Apache Kafka 7.4.0
Zookeeper - Координация кластера Kafka
Schema Registry - Валидация схем сообщений
Producer Service - Node.js сервис для отправки сообщений
Consumer Service - Node.js сервис для потребления сообщений
React Frontend - Веб-интерфейс для управления
Kafka UI - Веб-интерфейс для мониторинга Kafka

🚀 Быстрый старт

1. Запуск инфраструктуры

# Запуск Kafka, Zookeeper, Schema Registry и Kafka UI
docker-compose up -d

Или используйте готовые скрипты:

Windows:

scripts\windows\start-docker-full.bat

Linux/macOS:

./scripts/linux-macos/start-docker-full.sh

⚠️ Проблемы с Docker? См. DOCKER_SETUP.md для решения проблем с Docker Desktop.

2. Установка зависимостей

Автоматическая установка (рекомендуется):

Windows:

scripts\windows\start-demo.bat

Linux/macOS:

./scripts/linux-macos/start-demo.sh

Ручная установка:

# Producer сервис
cd services/producer
npm install

# Consumer сервис
cd ../services/consumer
npm install

# React фронтенд
cd ../services/frontend
npm install

3. Запуск сервисов

# Terminal 1: Producer сервис
cd services/producer
npm start

# Terminal 2: Consumer сервис
cd services/consumer
npm start

# Terminal 3: React фронтенд
cd services/frontend
npm start

🌐 Доступные сервисы

React Dashboard: http://localhost:3000
Producer API: http://localhost:3001
Consumer API: http://localhost:3002
Kafka UI: http://localhost:8080
Schema Registry: http://localhost:8081
Kafka Broker: localhost:9092

📖 Использование

1. Создание топиков

Откройте React Dashboard
В разделе "Producer Service" нажмите "Create New Topic"
Введите название топика

2. Отправка сообщений

Выберите топик из списка или введите новый
Введите сообщение
Опционально укажите ключ сообщения
Нажмите "Send Message"

3. Потребление сообщений

В разделе "Consumer Service" введите названия топиков через запятую
Нажмите "Start Consumer"
Сообщения будут отображаться в реальном времени в разделе "Received Messages"

4. Schema Registry и валидация схем

Создание схемы: Используйте Schema Registry API для регистрации Avro схем
Валидация: Настройте Producer для автоматической валидации сообщений по схеме
Совместимость: Проверяйте совместимость версий схем при обновлении
Мониторинг: Используйте Kafka UI для управления схемами

Подробные инструкции см. в SCHEMA_REGISTRY.md

Быстрое тестирование Schema Registry

# Переход в папку schemas
cd schemas

# Простой тест создания Avro схемы
./test-avro-schema.sh

# Создание полного набора схем
./create-schemas.sh

⚠️ Требования: Установите jq для работы со скриптами

5. Мониторинг

Используйте Kafka UI для просмотра топиков, партиций и сообщений
Schema Registry для управления схемами
Kafka UI для удобного веб-интерфейса управления схемами

🔧 Конфигурация

Producer Service

Порт: 3001
Kafka brokers: localhost:9092
Автоматическое создание топиков включено

Consumer Service

Порт: 3002
Kafka brokers: localhost:9092
Group ID: demo-consumer-group
WebSocket для real-time обновлений

Kafka Configuration

Брокер ID: 1
Партиции: 1 (для демо)
Replication Factor: 1 (для демо)
Автосоздание топиков включено

📁 Структура проекта

kafka-demo/
├── README.md                   # Основная документация проекта
├── docker-compose.yml          # Docker инфраструктура
├── scripts/                    # Скрипты запуска по платформам
│   ├── windows/               # Windows batch файлы
│   │   ├── start-demo.bat     # Основной скрипт запуска
│   │   ├── test-services.bat  # Тестирование сервисов
│   │   └── start-docker-full.bat # Полный Docker стек
│   └── linux-macos/           # Unix/Linux/macOS shell скрипты
│       ├── start-demo.sh      # Основной скрипт запуска
│       ├── test-services.sh   # Тестирование сервисов
│       └── start-docker-full.sh # Полный Docker стек
├── services/                   # Микросервисы
│   ├── producer/              # Producer сервис
│   │   ├── package.json
│   │   └── server.js
│   ├── consumer/              # Consumer сервис
│   │   ├── package.json
│   │   └── server.js
│   └── frontend/              # React приложение
│       ├── public/
│       ├── src/
│       │   ├── App.js
│       │   ├── App.css
│       │   ├── index.js
│       │   └── index.css
│       └── package.json
├── schemas/                    # Schema Registry документация и скрипты
│   ├── README.md              # Обзор Schema Registry
│   ├── QUICKSTART.md          # Быстрый старт
│   ├── SCHEMA_REGISTRY.md     # Полное руководство
│   ├── create-schemas.sh      # Скрипт создания схем
│   ├── test-avro-schema.sh    # Тест Avro схемы
│   └── INSTALL_JQ.md          # Установка jq
└── readme/                     # Дополнительная документация
    ├── QUICKSTART.md          # Быстрый старт
    ├── LAUNCH.md              # Инструкции по запуску
    ├── ARCHITECTURE_SIMPLE.md # Упрощенная архитектура
    ├── ARCHITECTURE_DIAGRAM.md # Детальная архитектура
    ├── TESTING.md             # Руководство по тестированию
    ├── DOCKER_SETUP.md        # Настройка Docker
    ├── NO_DOCKER_SETUP.md     # Альтернатива без Docker
    ├── START_DOCKER.md        # Запуск Docker Desktop
    └── PROJECT_SUMMARY.md     # Краткое описание проекта

🖥️ Скрипты запуска по платформам

Windows

scripts\windows\start-demo.bat - Основной скрипт запуска
scripts\windows\test-services.bat - Тестирование сервисов
scripts\windows\start-docker-full.bat - Полный Docker стек

Linux/macOS

./scripts/linux-macos/start-demo.sh - Основной скрипт запуска
./scripts/linux-macos/test-services.sh - Тестирование сервисов
./scripts/linux-macos/start-docker-full.sh - Полный Docker стек

🛠️ Разработка

Запуск в режиме разработки

# Producer с автоперезагрузкой
cd producer
npm run dev

# Consumer с автоперезагрузкой
cd consumer
npm run dev

# React с hot reload
cd frontend
npm start

Логи

# Просмотр логов Docker контейнеров
docker-compose logs -f

# Логи конкретного сервиса
docker-compose logs -f kafka
docker-compose logs -f schema-registry

🧪 Тестирование

Проверка здоровья сервисов

# Producer
curl http://localhost:3001/health

# Consumer
curl http://localhost:3002/health

# Schema Registry
curl http://localhost:8081/subjects

Отправка тестового сообщения

curl -X POST http://localhost:3001/send-message \
  -H "Content-Type: application/json" \
  -d '{
    "topic": "test-topic",
    "message": "Hello Kafka!",
    "key": "test-key"
  }'

🚨 Устранение неполадок

Проблемы с подключением к Kafka

Убедитесь, что Docker контейнеры запущены
Проверьте логи: docker-compose logs kafka
Убедитесь, что порт 9092 доступен

Producer не может отправить сообщения

Проверьте подключение к Kafka
Убедитесь, что топик существует
Проверьте логи Producer сервиса

Consumer не получает сообщения

Убедитесь, что Consumer запущен
Проверьте подписку на правильные топики
Проверьте Group ID

React приложение не подключается

Убедитесь, что Producer и Consumer сервисы запущены
Проверьте CORS настройки
Проверьте консоль браузера на ошибки

🔒 Безопасность

⚠️ Внимание: Данная демо-система предназначена только для локальной разработки и демонстрации. Не используйте в продакшене без дополнительной настройки безопасности.

📚 Дополнительные ресурсы

🤝 Поддержка

Для вопросов по демо-системе обращайтесь к автору вебинара.

Удачного изучения Apache Kafka! 🎉

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
readme		readme
schemas		schemas
scripts		scripts
services		services
.gitignore		.gitignore
README.md		README.md
docker-compose.yml		docker-compose.yml

gsmirnov94/kafka-demo

Folders and files

Latest commit

History

Repository files navigation