azure service bus relay with Javascript client (AngularJS)

Question

We are implementing Azure Service Bus Relay to consume WCF services and we have successfully consumed services using service bus from ASP.NET MVC application.

We want to consume this services using Azure Service Bus Relay from AngularJS.

Is there any way to access Azure Service Bus from AngularJS? or do we need to write extra API layer to consume services using service bus?

Please provide guideline and pointers.

Answer 1

No you can't connect to a Service Bus Relay from AngularJS code since JavaScript only supports making Ajax calls through HTTP, where the Service Bus Relay communicates through a TCP connection without using HTTP.

You will need to write server-side code in your application that connects to and communicates to the WCF services through the Azure Service Bus Relay. Then you can expose whatever data and functionality you need to your AngularJS code by making Ajax calls from client-side AngularJS code to the server-side web application.

You have a Web Application that runs on the server anyway, so integrating this should not be an issue for you.

The layer and call stack outline would be:

1. AngularJS code calls back to Web App it's hosted within

2. Ajax call to Web App connects to Service Bus Relay

3. Service Bus Relay communicates with WCF service

4. WCF service handled method call and returns response

5. Service Bus Relay send WCF method response back to Web App

6. Web App returns Ajax response to AngularJS code

7. AngularJS receives Ajax response and does what it needs to as a result.

Additionally, if you could call the Service Bus Relay directly from the AngularJS / JavaScript code in your Web Application, you would still have cross-domain origin issues since the Service Bus Relay is hosted on a different domain than your Web Application.

Answer 2

Try using the WebHttpRelayBinding for your service to consume it via HTTP:

https://msdn.microsoft.com/en-us/library/azure/microsoft.servicebus.webhttprelaybinding.aspx

The CORs issue that @Chris Pietschmann brought up is still valid here. Not sure if Relay will flow that header through if your service sets it. Also make sure that you allow unauthenticated users -- you don't want to expose your security token =)