Coder Social home page Coder Social logo

technextacg / notifications Goto Github PK

View Code? Open in Web Editor NEW
31.0 10.0 19.0 31.33 MB

Push Notification and Real Time Notification application on Angular 5, NodeJS, Apache Kafka, MongoDB with Spring Boot App

License: MIT License

JavaScript 17.49% TypeScript 13.26% HTML 4.12% CSS 43.52% Java 21.61%
angular5 nodejs mongodb kafka push-notifications realtime-notifications expressjs mongoose spring-data-mongodb spring-kafka

notifications's Introduction

Notification Applications

This application is a POC for the Push Notification and Real Time Notification handling in an Angular 5 Web Application.

Features!

  • Real Time Notifications: Using Socket Connection between NodeJS Server and Angular 5 Application. N|Solid

  • Push Notifications: Using Google FCM registers the Application's Service Worker on Chrome to enable Push Notifications. N|Solid

Components

The Application consists of the following components:

  • Spring Boot Application (:8080)
  • Apache Kafka (:9092)
  • Apache ZooKeeper (:2181)
  • NodeJS server (:3000)
  • Angular 5 Application (:8081)
  • MongoDB (Required in Replication) (:27017)

Architecture Diagram

N|Solid

Data Flow Diagram

N|Solid

Tech

Frameworks and Softwares used in the application are :

  • Spring Boot - a rapid application development platform
  • Spring Kafka - supports development of Kafka-based messaging solutions.
  • Spring Data MongoDB - provides integration with the MongoDB document database
  • Apache Kafka - a fast, scalable, durable, and fault-tolerant publish-subscribe messaging system
  • Apache ZooKeeper - a centralized open-source server for maintaining and managing configuration information, naming conventions and synchronization for distributed cluster environment.
  • MongoDB - a NoSQL database
  • node.js - evented I/O for the backend
  • express - fast node.js network app framework
  • Mongoose - a MongoDB object modeling tool designed to work in an asynchronous environment
  • Angular - HTML enhanced for web apps!

Installation

Application Prerequisite :

Scripts

*Start MongoDB in Replication:

sudo /usr/bin/mongod --replSet rs0 --quiet --config /etc/mongod.conf &

Create MongoDB Database and required collections:

$ use notification-db
$ db.createCollection("messages")
$ db.createCollection("notifications")
$ db.createCollection("subscribers")

Create Kafka Topic:

/bin/kafka-topics.sh --create \
    --zookeeper <hostname>:<port> \
    --topic <topic-name> \
    --partitions <number-of-partitions> \
    --replication-factor <number-of-replicating-servers>

#example:
sh /bin/kafka-topics.sh --create \
    --zookeeper localhost:2181 \
    --replication-factor 1 \
    --partitions 1 \
    --topic notif-topic
	
#check the kafka topic list
sh /bin/kafka-topics.sh --list --zookeeper localhost:2181

#Test with Console Producer and Consumer
sh /bin/kafka-console-producer.sh --broker-list localhost:9092 --topic notif-topic
sh /bin/kafka-console-consumer.sh --bootstrap-server localhost:9092 --topic notif-topic --from-beginning

Build and start the Spring Boot Application: Before build configure SpringBootApp\src\main\resources\application.yml for kafka and mongoDB host address.

$ cd SpringBootApp
$ mvn clean install
$ cd target
$ nohup java -jar notification-0.0.1-SNAPSHOT.jar &

Start the NodeJS Express Application:

$ cd NodejsServer

$ npm run server 
#OR
$ node server.js &
$ disown

Start the Angular 5 Application: Before build configure NodejsServer\config\database.config.js for mongoDB host address and database name and replica set name

$ cd Angular5App

$ npm install @angular/cli -g 
$ npm install bootstrap4-plus-jquery --save 
$ npm install jquery --save 
$ npm install ngx-bootstrap --save 
$ npm install socket.io-client --save 
$ npm install @types/socket.io-client
$ npm install -g http-server

$ ng build --prod
$ cp ngsw-worker.js dist/
$ cd dist 

$ npm run start_http 
#OR
$ http-server -c-1 --proxy http://localhost:3000 &
$ disown

Test

Hit the below REST API from Postman - REST Client

POST http://localhost:8080/messages
Content-Type: application/json

Request Body:
{
"title" : "Event Approval Pending!", 
"text" : "Event 123 pending for you approval", 
"url" : "https://www.someurl.com/event/123"
}

Todos

  • Create Authentication/User based Notifications
  • Use Docker for environment setup

License

MIT

Author

Sushant Verma ([email protected])

notifications's People

Contributors

sushant-v avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.