Summary
Highlights
The video introduces the implementation of real-time notifications in a book social network application using Spring Boot and Angular. It showcases a live preview of the notification system, where users receive immediate updates when a book is borrowed, returned, or when a return is approved. The UI is enhanced with toast notifications and banners.
The video explains how to use the ngx-toaster library to enhance the UI with popup notifications. It describes the various configurations available, such as toast types, placement, progress bar, and duplicate prevention. The installation and configuration of ngx-toaster in the Angular application are demonstrated.
The video details the backend websocket configuration using Spring Boot. It includes adding necessary dependencies like `spring-boot-starter-websocket` and `spring-security-messaging`. The creation of a `WebsocketConfig` class with annotations to enable websocket message broker and override methods to configure message broker, stomp endpoints, and message converters are shown step by step.
A notification system is built by creating a `Notification` class with fields for status, message, and book title along with a status enum. A `NotificationService` is implemented to send notifications to specific users using `SimpMessageSendingOperations`. The `BookService` is updated to send notifications when a book is borrowed, returned, or the return is approved.
The frontend part introduces the steps to consume the websocket implemenation. It covers several steps such as: Installing dependencies like `sockjs-client` and `stompjs`, setting up the websocket connection in Angular and subscribing to the `user/{userid}/notifications` endpoint. The implementation includes adding a menu to display notifications, connecting to the WebSocket, and handling incoming messages to display toast notifications
The steps for displaying notifications from the web socket is show in the video. The implementation includes: Updating the Menu Component to store a list of incomming notification, the display of the notification using HTML + bootstrap, fixing of global dependencies and other small bugs due to versioning of packages. The video ends up with small list of improvements such as Persisting the notification or displaying the count with the bootstrap badge.