Push Notifications and Real Time Notifications in Web Application.

4 min readJul 10, 2018

Extensible, scalable, fault tolerant and high performance system notification handling and processing in any web based application running on browser.

Why Notifications?

What is the benefit of implementing notification feature in a web application?

● User Engagement
1) Increases user engagement (E commerce — 278%, Music — 177%, Food & Drink -100%)
2) Higher Conversion and CTR .
3) Read within the first 3 minutes compared with 22% for emails.
● Usability & Effectiveness
1) Immediate responses and reception of important information.
2) Help to maximize the efficiency and productivity of workers.
3) Quick and easy to manage and track.

Notification Scenarios

Most of the uses cases for notifications belong to below scenarios:

● Transactional Notifications
► Event-triggered
► Pending tasks
► Change in Status, etc

● System Notifications
► Time sensitive reminders
► Upcoming Events
► News & Announcements
► System Upgrades
► Security Alerts, etc

● User Notifications
► One to One Communications
► Asking Feedback, etc

Types of Notifications

Notifications generated in a web based applications are mainly of below two types with a basic differences as explained below:

● On Page/ Real Time Notifications

► Triggered by the server when application is open.
► User is connected and using the application.
► Usually opens a browser pop-up or displays a message within the application window.
► Message delivery managed by the application itself.

● Off Page/Push Notifications

► Pushed by the server even when application is not running on browser.
► User is disconnected and not using the application.
► Opens a bubble outside the application window.
► Message delivery managed by individual browser’s push service.

Features!

Real Time Notifications: Using Socket Connection between NodeJS Server and Angular 5 Application.

Push Notifications: Using Google FCM registers the Application’s Service Worker on Chrome to enable Push Notifications.

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

Data Flow Diagram

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 :

Node.js — v8+ to run.
Java — v8+
Apache Kafka — Running on :9092
Apache ZooKeeper — Running on :2181
MongoDB — Running in replication on :27017

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/jsonRequest Body:
{
"title" : "Event Approval Pending!", 
"text" : "Event 123 pending for you approval", 
"url" : "https://www.someurl.com/event/123"
}