Send Angular Web Push Notification with Azure Web Pub-Sub

Azure has released their novel preview service Azure Web Pub-Sub, a fully managed service that supports native and serverless WebSockets. This service provides a way to send real-time notifications between web applications using few lines of code. We can use this service for chats, live broadcasting, etc. Here we are going to develop a real-time push notification service using Azure Web Pub-Sub for Angular web application.

Environment Configuration

As the first step, we need to create an azure web pub-sub service. You can select the Free pricing tier. After creating the service, you can get the connection string from the Keys page under the Settings section.

Now we can start the web application side configurations. First, we need to install the azure web pub-sub npm package to our angular web application.

npm i @azure/web-pubsub

After that, we need to install the WebSocket npm library package.

npm i ws

Implementation

Here, we have to develop two methods. One for sending notifications (publish) and another one for receiving (subscribe) notifications.

First, We should subscribe to the WebSocket channel when we are starting our application. Otherwise, we could not get real-time notifications from other users. In subscribe method, we have to create a service client using our endpoint, access key, hub group name. (There is another method to pass both endpoint and access key together as Connection String)

const serviceClient = new WebPubSubServiceClient(this.endpoint, this.cred, ‘pubsub’); 

Using hub groups we can send notifications to one particular group of users. So here we have to subscribe to the channel from which we want to receive the notifications. After creating the service client, we have to call the getAuthenticationToken() method. The authentication token provides the relevant URL to get messages from the WebSocket service.

Next, We should have a method to publish our notifications to other users. For that, again we have to create a service client using the endpoint, access key, and relevant hub group name which we need to show out notification. Using that client we can send the notification.

The development phase is over now.

Errors ??? : (

The reason for these errors is some NodeJS packages are not optimized for the browser by Angular. So we have to write a patch.js to solve the error. First, we need to create a patch.js file in the root folder.

const fs = require(‘fs’);
const f = ‘node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js’;
fs.readFile(f, ‘utf8’, function (err,data) {
 if (err) {
 return console.log(err);
 }
 var result = data.replace(/node: false/g, ‘node: {crypto: true, stream: true}’);
fs.writeFile(f, result, ‘utf8’, function (err) {
 if (err) return console.log(err);
 });
});

After that, we need to add this file to the package.json under the script section.

“scripts”: {
............
        “postinstall”: “node patch.js”
}

As the final step, we have to delete our node module and install it again.

Resolve the errors. : )

Conclusion

Azure web pub-sub service is a preview service that we can use to send real-time push notifications. Now you can use it with your angular web application.