feat: add realtime notification feature #431

xingsy97 · 2024-02-02T03:52:44Z

Summary

add realtime notification feature for portal powered by Azure Web PubSub For Socket.IO

This draft PR doesn't contain azure deployment code. So user have to use a pre-created Web PubSub resource, manually replace endpoint in packages/portal and add connection string in packages/realtime

How to use

Create a Web PubSub For Socket.IO resource.
Click key tab in resource portal, copy connection string.
Rename .env.example under packages/realtime/ to .env. Then fill in copied connection string to variable WebPubSubConnectionString
Copy the endpoint part in connection string (e.g. https://<resource-name>.webpubsub.azure.com). And use it replace the default endpoint in packages/portal/src/app/shared/realtime.service.ts:L14
Follow original README to go on.

Feature specification

The realtime notification has four scenarios as cited below. See complete specification in the internal doc.

Use-case 1 – Anonymous user favorites a listing

Given an anonymous user is browsing the application. When an authenticated user clicks on the "Favorite" button for a listing named [listing-name]. Then a real-time notification is sent via Azure Web PubSub and Socket.io. And the notification message displayed is: "A user has favorited the listing [listing-name]."

Use-case 2 – Authenticated user favorites a listing

Given an authenticated user is logged into the application. When the user clicks on the "Favorite" button for a listing named [listing-name]. Then a real-time notification is sent via Azure Web PubSub and Socket.io. And the notification message displayed is: "Hurry up! Another user has favorited the listing [listing-name]."

Use-case 3 – Authenticated user has started a booking process but didn’t complete a payment

Given an authenticated user is logged into the application. When the user attempts to book a listing named [listing-name] but doesn't complete the payment process. Then a real-time notification is sent via Azure Web PubSub and Socket.io. And the notification message displayed is: "Hurry up! Another user has booked the listing [listing-name] but didn't complete the payment."

Use-case 4 – Authenticated user receives a notification about unavailable listing

Given an authenticated user is logged into the application. And the user has favorited a listing named [listing-name]. When the listing [listing-name] is booked by another user and becomes unavailable between the dates [dates]. Then a real-time notification is sent via Azure Web PubSub and Socket.io. And the notification message displayed is: "[Listing-name] in your favorites has been booked and it's no longer available between the dates [dates]."

Other reference

https://learn.microsoft.com/en-us/azure/azure-web-pubsub/socketio-migrate-from-self-hosted

anfibiacreativa · 2024-02-05T12:41:21Z

package.json

@@ -8,6 +8,7 @@
    "start:services": "docker compose up",
    "start:api": "npm run start --workspace=api",
    "start:website": "npm run start:swa --workspace=portal",
+    "start:realtime": "npm run start --workspace=realtime",


maybe start:notifications is more idomatic?

anfibiacreativa · 2024-02-05T12:42:14Z

packages/portal/src/app/homepage/homepage.component.ts

 import { environment } from "../../environments/environment";
 import { CardListComponent } from "../shared/card-list/card-list.component";
 import { FavoriteService } from "../shared/favorite.service";
 import { InfiniteScrollingDirective } from "../shared/infinite-scrolling.directive";
 import { ListingService } from "../shared/listing.service";
 import { UserService } from "../shared/user/user.service";
+import { RealtimeService } from "../shared/realtime.service";



Maybe NotificationService, to consolidate?

anfibiacreativa · 2024-02-05T12:43:18Z

packages/portal/src/app/homepage/homepage.component.ts

+
+    // Get notification when someone favourtied a listing
+    this.realtimeService.getNotifiedForFavourite((listingTitle) => {
+      const notifyMessage = this.user?.name?.length > 0


We probably need to move all those strings to global or component configs.

anfibiacreativa · 2024-02-05T12:44:50Z

packages/portal/src/app/homepage/homepage.component.ts

+      const favourites: Array<Listing> = await this.favoriteService.getFavoritesByUser(this.user) ?? [];
+
+      for (const favour of favourites) {
+        if (favour.id === listing.id) {


this is just a styling suggestion but I feel the name is more representatitve. 'for (const fave of favorites) '

anfibiacreativa · 2024-02-05T12:46:21Z

packages/portal/src/app/shared/favorite.service.ts

@@ -13,7 +16,7 @@ export class FavoriteService {
        user,
      }),
    });
-
+    this.realtimeService.broadcastFavouriteNotification(listing);
    return resource.status === 200;


For extensibility purposes... can that broadcast method be passed items that could be of different types? The we can just call it broadcast

anfibiacreativa · 2024-02-05T12:47:37Z

packages/portal/src/app/shared/listing.service.ts

@@ -80,6 +83,13 @@ export class ListingService {
    if (resource.status !== 200) {
      throw new Error(checkoutSession.error);
    }
+    const listing = await this.getListingById(reservationDetails.listingId ?? "");
+    if (listing) {
+      this.realtimeService.broadcastCheckoutNotification(listing, reservationDetails.from, reservationDetails.to);


I haven't gotten yet to the implementation of this broadcast. Maybe we can consolidate to one?

anfibiacreativa · 2024-02-05T12:48:35Z

packages/portal/src/app/shared/realtime.service.ts

+
+    if (!environment.notificationUrl || !environment.notificationPath) {
+      // TODO: disable this feature at the injector level if the URL or Path is not set.
+      alert("RealtimeService: Notification URL or Path is not set. Please check environment.ts file.");


Please remove alerts, we may want to only let deverlopers know on dev env?

anfibiacreativa · 2024-02-05T12:50:26Z

packages/portal/src/app/shared/realtime.service.ts

+  broadcastCheckoutNotification(listing: Listing, from: string, to: string) {
+    this.client.emit("sendCheckout", listing, from, to);
+  }
+


As suggested, maybe we make broadcast a single method that takes a type of { item, from?, to?) to consolidate maintenance and admit extensibility? This is not a blocker to merge at all. Just an optimization suggestion.

anfibiacreativa · 2024-02-05T12:51:37Z

packages/portal/src/app/shared/realtime.service.ts

+    this.client.emit("sendCheckout", listing, from, to);
+  }
+
+  getNotifiedForFavourite(notifyAction: (listingTitle: string) => void | Promise<void>) {


This two notifications could also be consolidated in the same fashion. on('event', message) {... }

anfibiacreativa · 2024-02-05T12:52:35Z

packages/portal/src/styles/styles.scss

+
+body {
+  .mdc-snackbar .mdc-snackbar__surface
+  {


formatting -please move opening curly bracket to first line.

anfibiacreativa · 2024-02-13T10:30:47Z

@manekinekko what's the current status? Can we proceed to merge without refactoring changes?

manekinekko · 2024-02-13T20:56:48Z

I was working on adding bicep/azd iac part of this PR, but I am hitting a blocking issue. I am going to merge this PR as-is and will add bicep/azd deployment in a different PR. Will also refactor code in a separate PR.

anfibiacreativa · 2024-02-18T11:56:00Z

I was working on adding bicep/azd iac part of this PR, but I am hitting a blocking issue. I am going to merge this PR as-is and will add bicep/azd deployment in a different PR. Will also refactor code in a separate PR.

Agreed. Can we merge before the event coming up?

* chore: minor changes * chore: add azd support (wip)

* feat: add realtime feature * fix(realtime): update RealtimeService * chore: minor changes (Azure-Samples#2) * chore: add azd support (wip) --------- Co-authored-by: Wassim Chegham <github@wassim.dev>

xingsy97 added 2 commits February 1, 2024 16:08

feat: add realtime feature

16bf909

fix(realtime): update RealtimeService

2d66fc9

xingsy97 changed the title ~~[feat] add realtime notification feature~~ feat: add realtime notification feature Feb 2, 2024

chore: minor changes (#2)

07a1cbb

manekinekko marked this pull request as ready for review February 2, 2024 15:50

manekinekko requested review from anfibiacreativa, manekinekko and sinedied as code owners February 2, 2024 15:50

manekinekko self-assigned this Feb 2, 2024

anfibiacreativa requested changes Feb 5, 2024

View reviewed changes

manekinekko added 2 commits March 4, 2024 15:39

chore: add azd support (wip)

ebc957c

chore: add azd support (wip)

fddf143

* chore: minor changes * chore: add azd support (wip)

manekinekko merged commit beb7633 into Azure-Samples:develop Mar 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add realtime notification feature #431

feat: add realtime notification feature #431

xingsy97 commented Feb 2, 2024 •

edited

Loading

anfibiacreativa Feb 5, 2024

anfibiacreativa Feb 5, 2024

anfibiacreativa Feb 5, 2024

anfibiacreativa Feb 5, 2024

anfibiacreativa Feb 5, 2024

anfibiacreativa Feb 5, 2024

anfibiacreativa Feb 5, 2024

anfibiacreativa Feb 5, 2024

anfibiacreativa Feb 5, 2024

anfibiacreativa Feb 5, 2024

anfibiacreativa commented Feb 13, 2024

manekinekko commented Feb 13, 2024

anfibiacreativa commented Feb 18, 2024

feat: add realtime notification feature #431

feat: add realtime notification feature #431

Conversation

xingsy97 commented Feb 2, 2024 • edited Loading

Summary

How to use

Feature specification

Other reference

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anfibiacreativa commented Feb 13, 2024

manekinekko commented Feb 13, 2024

anfibiacreativa commented Feb 18, 2024

xingsy97 commented Feb 2, 2024 •

edited

Loading