Implement Push Notifications in Realtime Application

Share

Summary

This video tutorial demonstrates how to implement push notifications in realtime applications using Spring Boot, WebSocket, and Angular. It builds upon a previous video and provides a step-by-step guide to adding notification functionality to a chat application.

Highlights

Introduction
00:00:02

The video introduces the tutorial on implementing push notifications in a realtime application using Spring Boot, WebSocket, and Angular, building on code from a previous video. The goal is to enable real-time notifications, similar to those seen in chat applications.

Backend Implementation: Notification Service
00:03:08

The tutorial begins with the backend implementation, creating a new 'NotificationService' in the Spring Boot application. This service uses a messaging template to push notifications to specific topics (public and private). Public notifications are sent to a general topic, while private notifications are sent to a specific user's topic based on their ID.

Backend Implementation: Controller Modifications
00:09:04

The video explains how to modify the controllers to call the notification service whenever a new message is sent (either public or private). It involves injecting the NotificationService into the controllers and calling the appropriate 'send' method to push notifications.

Frontend Implementation: Setting up Observables
00:13:12

The tutorial moves to the frontend, focusing on the Angular application. It creates observables to track the number of notifications. A BehaviorSubject is used to hold and update the current notification count and push it to the UI.

Frontend Implementation: Incrementing Counter
00:15:24

The video details how to increment the notification counter whenever a new notification is received. A function 'addNoty' implemented to update the BehaviorSubject and log the count for debugging.

Frontend Implementation: Subscribing to Topics
00:18:38

The tutorial guides on subscring to the public and private topics to listen for the new notifications using the stomp client. When a new notification is received the 'addNoty' counter is called to increment the UI and show the notification count.

Frontend Implementation: Displaying Notification Icon
00:27:50

The video walks through adding the angular material for the showing the notification number. the 'mat-badge' is used for showing the number of notifications received.

Testing and Styling
00:31:59

The video tests the implemented feature and fixes some UI bugs. The UI is improved by moving the notification icon to after right.

Testing with Postman
00:36:03

The tutorial shows how to test the REST API with Postman. The backend is tested using Postman to send both private and public notifications, demonstrating that the private notifications are received only by the intended user, while public notifications are broadcasted to all users connected to the application.

Conclusion
00:39:07

The video concludes by summarizing the key concepts covered in the tutorial, including setting up WebSocket connections, sending messages via REST APIs, implementing private messages, using the handshake handler, configuring the message broker, and using Angular Material UI components. It encourages viewers to stay tuned for future videos on realtime application development.

Recently Summarized Articles

Loading...