Expand your application with real-time messaging API capability with Web PubSub and API Management

This post has been republished via RSS; it originally appeared at: New blog articles in Microsoft Tech Community.

Businesses everywhere are looking to extend their operations as a digital platform, creating new channels, finding new customers, and driving deeper engagement with existing ones. Now, with the API Management (APIM) and Web PubSub service (AWPS), you are able to expand the real-time messaging capability of your application with a consistent and modern API gateway.

• Build apps faster and deliver immediate value to your customers through API-first approaches.
• Transform your legacy services into modern REST-based APIs or WebSocket APIs.
• Consistent experience to manage APIs (REST and WebSocket) across clouds and on-premises.

Let’s go through the key steps together and learn how to implement this reference solution:  

• Create the Azure Web PubSub Service
• Create the Azure API Management service and configure the WebSocket rules
• Test it with a live demo

Setup Web PubSub

1. Follow the steps to create your Web PubSub service which we refer to as AWPS1 in the following sections.
2. When created, go to the Keys tab for the resource from the Azure portal, and you can see the hostname and connection strings of your resource. There is also a Client URL Generator tool in the portal that it can generate some temporarily valid URLs for your WebSocket clients to connect to. Let's use this tool to generate an URL for our demo with a hub called demoHub. This tool is for quick test purposes, we also provide APIs in various languages to generate the URL for production usage, for example, WebPubSubServiceClient.GetClientAccessUri Method for .NET.
3. Copy the generated Client Access URL for later use. You can see that this Client Access URL contains:
   • the hostname of the Web PubSub service xxx.webpubsub.azure.com with wss scheme,
   • and the path containing the hub name /client/hubs/demoHub,
   • and a query parameter access_token which is the JWT token that the Web PubSub service uses to validate and authenticate the WebSocket clients. 

      

Setup API Management

1. Follow the steps to create your API Management service which we refer to as APIM1 in the following sections.
2. When created, go to the APIs tab for the resource from the Azure portal, click Add API and choose WebSocket
3. 

    Create with the following parameters:

   • WebSocket URL: wss://<your_webpubsub_name>.webpubsub.azure.com/client/hubs/demoHub

     1. Replace <your_webpubsub_name> with the name of your AWPS1
   • API URL suffix: client/hubs/demoHub
4. Now you are all set, select the API and use the Test tab to test the connection.
   1. Remember the access_token query parameter we get from the AWPS1 Client Access URL? Paste it here as the access_token query parameter, and Connect.
   2. You can now see in the output Connected.

Try samples

Let's update this simple publish and subscribe message sample to use APIM1, the only thing to change is to let the WebSocket subscriber connect to APIM1 instead.

After the subscriber gets the full URL to connect to AWPS1, let's update the URL to connect to APIM, and don't forget to append the subscription-key query parameter if your APIM settings enabled it, for example, in C#, update the code as below: