Скачать или смотреть Sending a Message to Azure Service Bus from Angular: What You Need to Know

Discover how to effectively send messages to Azure Service Bus using Angular apps, including insights on message types and integration strategies.
---
This video is based on the question https://stackoverflow.com/q/62336329/ asked by the user 'wonderful world' ( https://stackoverflow.com/u/1768008/ ) and on the answer https://stackoverflow.com/a/62336445/ provided by the user 'Gaurav Mantri' ( https://stackoverflow.com/u/188096/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Sending a message to Azure Service Bus to create a topic from Angular?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Sending a Message to Azure Service Bus from Angular: What You Need to Know

In modern web applications, the need for real-time data processing and scalability is becoming increasingly paramount. When building applications that interact with Azure, especially those using Angular, you may find yourself needing to send messages to Azure Service Bus. This post will explore how to approach this task, specifically focusing on a viewer's challenges regarding message sending between two Angular apps and the proper setup for Azure Service Bus.

The Problem Statement

In this scenario, a developer has two Angular JavaScript client applications—let's call them App 1 and App 2. App 1 occasionally updates a database by adding or deleting multiple rows. Following this, App 2 is responsible for fetching the generated JSON from a WebAPI, which processes these rows into a manageable format.

To streamline this process and scale effectively, the developer wants to trigger a reaction from Azure Service Bus whenever new customers are added from App 2, moving the logic from a REST API to a subscriber model. The developer has several key questions regarding this integration:

Can messages be sent directly from Angular App 1 to Azure Service Bus?

Should they use queues or topics for their message types, specifically AddNewCustomer and CustomersAdded?

How can they seamlessly integrate Angular, Azure Functions, Azure Service Bus, and the subscribers?

Answering the Questions

Let’s break down each question and provide clear and direct answers.

1. Sending Messages Directly to Azure Service Bus

Can I send a message CustomerAdded directly to Azure Service Bus from Angular JavaScript Client App 1?

Unfortunately, the answer is no. Azure Service Bus does not currently support Cross-Origin Resource Sharing (CORS) or WebSocket connections directly from client-side JavaScript frameworks like Angular. To interact with Azure Service Bus, it is typically necessary to go through a server-side component such as an Azure Function or a WebAPI that you control. This setup helps maintain security, as you'll need to manage authentication and authorization appropriately.

2. Choosing Between Queues and Topics

Should I use queues or topics for handling message types from two Angular client apps?

In general, both queues and topics can be utilized for managing messages sent from your applications, but the differentiation lies in their intended usage:

Queues: A message sent to a queue is stored until it is processed by a single consumer. If you plan for a single process to handle the AddNewCustomer and CustomersAdded messages, queues are your best bet. This setup ensures that a single subscriber handles each message in a sequential and determined manner.

Topics: If you need to send messages to multiple subscribers (for example, if multiple services need to react to the same message), then topics become useful. However, given your description of the subscriber requirements (to handle both types of messages), a queue may be more suitable in this scenario since it allows for simpler handling of processing logic.

3. Integration Strategy

How do I integrate the Angular App, Azure Function, Azure Service Bus, and two subscribers?

Integrating these components can seem daunting, but here's a straightforward approach to achieve this:

Angular Client Apps: Both client apps should have an HTTP service to call your backend (Azure Function or WebAPI) - avoid direct calls to Azure Service Bus from the frontend.

Azure Function or WebAPI: Create a handler in Azure Functions or your WebAPI that will accept the HTTP requests from the Angular apps. This service will then use the Azure SDK to communicate wit