Skip to content

Commit f617cdd

Browse files
v-regandownerv-regandowner
authored
Merge pull request #281144 from diberry/diberry/ts-service-bus
Service Bus TS quickstart
2 parents 21da0a1 + 985a9a7 commit f617cdd

File tree

6 files changed

+497
-1
lines changed

6 files changed

+497
-1
lines changed

‎articles/service-bus-messaging/TOC.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@
4242
href: service-bus-nodejs-how-to-use-queues.md
4343
- name: Python
4444
href: service-bus-python-how-to-use-queues.md
45+
- name: TypeScript
46+
href: service-bus-typescript-how-to-use-queues.md
4547
- name: Services Bus topics and subscriptions
4648
items:
4749
- name: Create topics and subscriptions
@@ -66,6 +68,8 @@
6668
href: service-bus-nodejs-how-to-use-topics-subscriptions.md
6769
- name: Python
6870
href: service-bus-python-how-to-use-topics-subscriptions.md
71+
- name: TypeScript
72+
href: service-bus-typescript-how-to-use-topics-subscriptions.md
6973
- name: Tutorials
7074
items:
7175
- name: Update inventory

‎articles/service-bus-messaging/includes/media/service-bus-create-namespace-portal/create-resource-service-bus-menu.png

-17 KB
Loading

‎articles/service-bus-messaging/includes/service-bus-create-namespace-portal.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ To create a namespace:
1919
2. Navigate to the [**All services** page](https://portal.azure.com/#allservices/category/All).
2020
3. On the left navigation bar, select **Integration** from the list of categories, hover the mouse over **Service Bus**, and then select **+** button on the Service Bus tile.
2121

22-
:::image type="content" source="./media/service-bus-create-namespace-portal/create-resource-service-bus-menu.png" alt-text="Image showing selection of Create a resource, Integration, and then Service Bus in the menu.":::
22+
:::image type="content" source="./media/service-bus-create-namespace-portal/create-resource-service-bus-menu.png" alt-text="Image showing selection of Create a resource, Integration, and then Service Bus in the menu." lightbox="./media/service-bus-create-namespace-portal/create-resource-service-bus-menu.png":::
2323
4. In the **Basics** tag of the **Create namespace** page, follow these steps:
2424
1. For **Subscription**, choose an Azure subscription in which to create the namespace.
2525
1. For **Resource group**, choose an existing resource group in which the namespace will live, or create a new one.

‎articles/service-bus-messaging/includes/service-bus-typescript-how-to-configure-project.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Include file
3+
description: Include file
4+
services: service-bus-messaging
5+
author: spelluru
6+
ms.service: service-bus-messaging
7+
ms.topic: include
8+
ms.date: 07/17/2024
9+
ms.author: spelluru
10+
ms.custom: "include file"
11+
12+
---
13+
14+
## Configure project
15+
16+
1. Create a project folder to contain the quickstart files.
17+
18+
1. In a terminal in the project folder, initialize the Node.js project.
19+
20+
```bash
21+
npm init -y
22+
```
23+
1. Open the `package.json` file in the project folder and add the property to configure ESM. Add this property after the `version` property:
24+
25+
```json
26+
"type":"module",
27+
```
28+
1. In the `package.json` file, edit the `scripts` property to compile the TypeScript files. Add the `build` script.
29+
30+
```json
31+
"scripts": {
32+
"build": "tsc"
33+
}
34+
```
35+
36+
1. Create a `tsconfig.json` in the project file to configure the TypeScript ESM build and copy the following into the file:
37+
38+
:::code language="json" source="~/azure-typescript-e2e-apps/quickstarts/service-bus/ts/tsconfig.json":::
39+
40+
1. Create a `src` folder in the project. This is where you'll place the TypeScript files created in this quickstart.

‎articles/service-bus-messaging/service-bus-typescript-how-to-use-queues.md

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
---
2+
title: Get started with Azure Service Bus queues (TypeScript)
3+
description: This tutorial shows you how to send messages to and receive messages from Azure Service Bus queues using the TypeScript programming language.
4+
author: spelluru
5+
ms.author: spelluru
6+
ms.date: 07/17/2024
7+
ms.topic: quickstart
8+
ms.devlang: typescript
9+
ms.custom: devx-track-ts, mode-api
10+
---
11+
12+
# Send messages to and receive messages from Azure Service Bus queues (TypeScript)
13+
> [!div class="op_single_selector" title1="Select the programming language:"]
14+
> * [C#](service-bus-dotnet-get-started-with-queues.md)
15+
> * [Java](service-bus-java-how-to-use-queues.md)
16+
> * [JavaScript](service-bus-nodejs-how-to-use-queues.md)
17+
> * [Python](service-bus-python-how-to-use-queues.md)
18+
> * [TypeScript](service-bus-typescript-how-to-use-queues.md)
19+
20+
In this tutorial, you complete the following steps:
21+
22+
1. Create a Service Bus namespace, using the Azure portal.
23+
2. Create a Service Bus queue, using the Azure portal.
24+
3. Write a TypeScript ESM application to use the [@azure/service-bus](https://www.npmjs.com/package/@azure/service-bus) package to:
25+
1. Send a set of messages to the queue.
26+
1. Receive those messages from the queue.
27+
28+
> [!NOTE]
29+
> This quick start provides step-by-step instructions for a simple scenario of sending messages to a Service Bus queue and receiving them. You can find pre-built JavaScript and TypeScript samples for Azure Service Bus in the [Azure SDK for JavaScript repository on GitHub](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/servicebus/service-bus/samples/v7).
30+
31+
## Prerequisites
32+
33+
If you're new to the service, see [Service Bus overview](service-bus-messaging-overview.md) before you do this quickstart.
34+
35+
- An Azure subscription. To complete this tutorial, you need an Azure account. You can activate your [MSDN subscriber benefits](https://azure.microsoft.com/pricing/member-offers/credit-for-visual-studio-subscribers/?WT.mc_id=A85619ABF) or sign-up for a [free account](https://azure.microsoft.com/free/?WT.mc_id=A85619ABF).
36+
- [TypeScript 5+](https://www.typescriptlang.org/download/)
37+
- [Node.js LTS](https://nodejs.org/en/download/)
38+
39+
### [Passwordless](#tab/passwordless)
40+
41+
To use this quickstart with your own Azure account, you need:
42+
* Install [Azure CLI](/cli/azure/install-azure-cli), which provides the passwordless authentication to your developer machine.
43+
* Sign in with your Azure account at the terminal or command prompt with `az login`.
44+
* Use the same account when you add the appropriate data role to your resource.
45+
* Run the code in the same terminal or command prompt.
46+
* Note down your **queue** name for your Service Bus namespace. You'll need that in the code.
47+
48+
### [Connection string](#tab/connection-string)
49+
50+
Note down the following, which you'll use in the code below:
51+
* Service Bus namespace **connection string**
52+
* Service Bus namespace **queue** you created
53+
54+
---
55+
56+
> [!NOTE]
57+
> This tutorial works with samples that you can copy and run using [Node.js](https://nodejs.org/). For instructions on how to create a Node.js application, see [Create and deploy a Node.js application to an Azure Website](../app-service/quickstart-nodejs.md), or [Node.js cloud service using Windows PowerShell](../cloud-services/cloud-services-nodejs-develop-deploy-app.md).
58+
59+
[!INCLUDE [service-bus-create-namespace-portal](./includes/service-bus-create-namespace-portal.md)]
60+
61+
[!INCLUDE [service-bus-create-queue-portal](./includes/service-bus-create-queue-portal.md)]
62+
63+
[!INCLUDE [service-bus-passwordless-template-tabbed](../../includes/passwordless/service-bus/service-bus-passwordless-template-tabbed.md)]
64+
65+
[!INCLUDE [service-bus-typescript-configure-project](./includes/service-bus-typescript-how-to-configure-project.md)]
66+
67+
68+
## Use Node Package Manager (npm) to install the package
69+
70+
### [Passwordless](#tab/passwordless)
71+
72+
1. To install the required npm package(s) for Service Bus, open a command prompt that has `npm` in its path, change the directory to the folder where you want to have your samples and then run this command.
73+
74+
1. Install the following packages:
75+
76+
```bash
77+
npm install @azure/service-bus @azure/identity
78+
```
79+
80+
### [Connection string](#tab/connection-string)
81+
82+
1. To install the required npm package(s) for Service Bus, open a command prompt that has `npm` in its path, change the directory to the folder where you want to have your samples and then run this command.
83+
84+
1. Install the following package:
85+
86+
```bash
87+
npm install @azure/service-bus
88+
```
89+
90+
---
91+
92+
## Send messages to a queue
93+
94+
The following sample code shows you how to send a message to a queue.
95+
96+
### [Passwordless](#tab/passwordless)
97+
98+
You must have signed in with the Azure CLI's `az login` in order for your local machine to provide the passwordless authentication required in this code.
99+
100+
1. Open your favorite editor, such as [Visual Studio Code](https://code.visualstudio.com/).
101+
1. In the `src` folder, create a file called `send.ts` and paste the below code into it. This code sends the names of scientists as messages to your queue.
102+
103+
> [!IMPORTANT]
104+
> The passwordless credential is provided with the [**DefaultAzureCredential**](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/identity/identity#defaultazurecredential).
105+
106+
:::code language="typescript" source="~/azure-typescript-e2e-apps/quickstarts/service-bus/ts/src/queue-passwordless-send.ts" :::
107+
108+
3. Replace `<SERVICE-BUS-NAMESPACE>` with your Service Bus namespace.
109+
4. Replace `<QUEUE NAME>` with the name of the queue.
110+
5. Then run the command in a command prompt to execute this file.
111+
112+
```console
113+
npm run build
114+
node dist/send.js
115+
```
116+
6. You should see the following output.
117+
118+
```console
119+
Sent a batch of messages to the queue: myqueue
120+
```
121+
122+
### [Connection string](#tab/connection-string)
123+
124+
1. Open your favorite editor, such as [Visual Studio Code](https://code.visualstudio.com/).
125+
1. In the `src` folder, create a file called `src/send.ts` and paste the below code into it. This code sends the names of scientists as messages to your queue.
126+
127+
:::code language="typescript" source="~/azure-typescript-e2e-apps/quickstarts/service-bus/ts/src/queue-connection-string-send.ts" :::
128+
129+
3. Replace `<CONNECTION STRING TO SERVICE BUS NAMESPACE>` with the connection string to your Service Bus namespace.
130+
4. Replace `<QUEUE NAME>` with the name of the queue.
131+
5. Then run the command in a command prompt to execute this file.
132+
133+
```console
134+
npm run build
135+
node dist/send.js
136+
```
137+
6. You should see the following output.
138+
139+
```console
140+
Sent a batch of messages to the queue: myqueue
141+
```
142+
143+
---
144+
145+
## Receive messages from a queue
146+
147+
### [Passwordless](#tab/passwordless)
148+
149+
You must have signed in with the Azure CLI's `az login` in order for your local machine to provide the passwordless authentication required in this code.
150+
151+
1. Open your favorite editor, such as [Visual Studio Code](https://code.visualstudio.com/)
152+
2. In the `src` folder, create a file called `receive.ts` and paste the following code into it.
153+
154+
:::code language="typescript" source="~/azure-typescript-e2e-apps/quickstarts/service-bus/ts/src/queue-passwordless-receive.ts" :::
155+
156+
3. Replace `<SERVICE-BUS-NAMESPACE>` with your Service Bus namespace.
157+
4. Replace `<QUEUE NAME>` with the name of the queue.
158+
5. Then run the command in a command prompt to execute this file.
159+
160+
```console
161+
npm run build
162+
node dist/receive.js
163+
```
164+
165+
### [Connection string](#tab/connection-string)
166+
167+
1. Open your favorite editor, such as [Visual Studio Code](https://code.visualstudio.com/)
168+
2. In the `src` folder, create a file called `receive.ts` and paste the following code into it.
169+
170+
:::code language="typescript" source="~/azure-typescript-e2e-apps/quickstarts/service-bus/ts/src/queue-connection-string-receive.ts" :::
171+
172+
3. Replace `<CONNECTION STRING TO SERVICE BUS NAMESPACE>` with the connection string to your Service Bus namespace.
173+
174+
4. Replace `<QUEUE NAME>` with the name of the queue.
175+
5. Then run the command in a command prompt to execute this file.
176+
177+
```console
178+
npm run build
179+
node dist/receive.js
180+
```
181+
182+
---
183+
184+
You should see the following output.
185+
186+
```console
187+
Received message: Albert Einstein
188+
Received message: Werner Heisenberg
189+
Received message: Marie Curie
190+
Received message: Stephen Hawking
191+
Received message: Isaac Newton
192+
Received message: Niels Bohr
193+
Received message: Michael Faraday
194+
Received message: Galileo Galilei
195+
Received message: Johannes Kepler
196+
Received message: Nikolaus Kopernikus
197+
```
198+
199+
On the **Overview** page for the Service Bus namespace in the Azure portal, you can see **incoming** and **outgoing** message count. You may need to wait for a minute or so and then refresh the page to see the latest values.
200+
201+
:::image type="content" source="./media/service-bus-java-how-to-use-queues/overview-incoming-outgoing-messages.png" alt-text="Screenshot of Azure portal showing incoming and outgoing message count.":::
202+
203+
Select the queue on this **Overview** page to navigate to the **Service Bus Queue** page. You see the **incoming** and **outgoing** message count on this page too. You also see other information such as the **current size** of the queue, **maximum size**, **active message count**, and so on.
204+
205+
:::image type="content" source="./media/service-bus-java-how-to-use-queues/queue-details.png" alt-text="Screenshot of Azure portal showing queue details.":::
206+
207+
## Troubleshooting
208+
209+
If you receive one of the following errors when running the **passwordless** version of the TypeScript code, make sure you are signed in via the Azure CLI command, `az login` and the [appropriate role](#azure-built-in-roles-for-azure-service-bus) is applied to your Azure user account:
210+
211+
* 'Send' claim(s) are required to perform this operation
212+
* 'Receive' claim(s) are required to perform this operation
213+
214+
## Clean up resources
215+
216+
Navigate to your Service Bus namespace in the Azure portal, and select **Delete** on the Azure portal to delete the namespace and the queue in it.
217+
218+
## Next steps
219+
See the following documentation and samples:
220+
221+
- [Azure Service Bus client library for JavaScript](https://www.npmjs.com/package/@azure/service-bus)
222+
- [JavaScript samples](https://github.com/Azure/azure-sdk-for-js/tree/master/sdk/servicebus/service-bus/samples/v7/javascript)
223+
- [TypeScript samples](https://github.com/Azure/azure-sdk-for-js/tree/master/sdk/servicebus/service-bus/samples/v7/typescript)
224+
- [API reference documentation](/javascript/api/overview/azure/service-bus)

0 commit comments

Comments
 (0)