Azure Event Hubs client library browser samples for JavaScript

This sample programs show how to use the JavaScript client libraries for Azure Event Hubs to send and receive events in the browser while authenticating with Azure Active Directory.

File Name Description
sendEvents.js Demonstrates how the send() function can be used to send events to an Event Hub instance.
receiveEvents.js Demonstrates how to use the EventHubConsumerClient to process events from all partitions of a consumer group in an Event Hubs instance.
configuration.js Contains the configuration needed to authenticate and connect to an Event Hub instance.
index.js Hooks up the send and receive samples to their respective buttons in the web application.
index.html The web page that loads and runs the samples. Use a local web service to test by running npm start after building the app.

Prerequisites

The samples are compatible with Node.js >= 8.0.0 and run in browsers that support async/await (e.g. Edge, Firefox, Chrome.)

You need an Azure subscription and an Azure Event Hub resource to run these sample programs. Samples retrieve credentials using the InteractiveBrowserCredential from @azure/identity. You can set the Event Hubs and authentication properties you'll need to run the sample in the configuration.js file.

Register a new application in AAD and assign the "Azure Event Hubs Data Owner" role to it.

Ensure your app registration has been configured properly to allow the implicit grant flow and allow both Access tokens and ID tokens to be issued by the authorization endpoint. Also add a redirect URI that points to where you'll be hosting your application. For running the sample locally, you can set this to http://localhost:8080. In your app registration, you will also need to add a permission for the Microsoft.EventHubs app. When adding permission for Microsoft.EventHubs, the type should be delegated permissions and the permission should be user_impersonation.

Setup

To run the samples using the published version of the package:

  1. Install the dependencies using npm:
npm install
  1. Create a bundle JavaScript file that can be ran in the browser:
npm run build
  1. Serve the web page on http://localhost:8080:
npm start
  1. Navigate to the web page by visiting http://localhost:8080 in a browser.

Troubleshooting

Authentication error: AADSTS50011

If you receive error AADSTS50011 with the message The reply URL specified in the request does not match the reply URLs configured for the application, make sure that you're accessing the sample using the same URI as the redirect URI you added to your app registration. If you're following along with the sample, this should be http://localhost:8080.

Next Steps

Take a look at our API Documentation for more information about the APIs that are available in the clients.