How to Use Azure Storage Queues with JavaScript

This guide demonstrates how to use Azure Storage Queues with JavaScript. Azure Storage Queues provide a robust messaging solution for decoupling application components. We'll cover the basics of sending, receiving, and deleting messages.

Prerequisites:

Before you begin, ensure you have the following:

An Azure Storage account.
The Azure SDK for JavaScript installed.

You can install the SDK using npm:

npm install @azure/storage-queue

1. Setting up the Queue Service Client

First, you need to create an instance of the QueueServiceClient. You'll typically use your storage account connection string or provide an account name and key.


const { QueueServiceClient } = require("@azure/storage-queue");

// Connection string obtained from your Azure Storage account
const connectionString = "";

// Or, using account name and key
// const accountName = "";
// const accountKey = "";

// Create a QueueServiceClient using the connection string
const queueServiceClient = QueueServiceClient.fromConnectionString(connectionString);

// Or, create using account name and key
// const queueServiceClient = new QueueServiceClient(
//     `https://${accountName}.queue.core.windows.net`,
//     { credential: { accountName, accountKey } }
// );

console.log("QueueServiceClient created successfully.");

2. Creating a Queue

You can create a new queue if it doesn't already exist. Queue names must be lowercase letters, numbers, and hyphens, and must start and end with a letter or number. The name cannot contain consecutive hyphens.


async function createQueue(queueName) {
    try {
        const createQueueResponse = await queueServiceClient.createQueue(queueName);
        console.log(`Queue '${queueName}' created successfully. Request ID: ${createQueueResponse.requestId}`);
        return queueServiceClient.getQueueClient(queueName);
    } catch (error) {
        console.error(`Error creating queue '${queueName}': ${error.message}`);
        // If the queue already exists, get the client for it
        if (error.statusCode === 409) {
            console.log(`Queue '${queueName}' already exists. Getting client.`);
            return queueServiceClient.getQueueClient(queueName);
        }
        throw error;
    }
}

const myQueueName = "my-javascript-queue";
const queueClient = await createQueue(myQueueName);
console.log(`Working with queue: ${queueClient.name}`);

3. Sending a Message

To send a message to the queue, use the sendMessage method. Messages can be strings or JSON objects. For complex data, consider stringifying JSON.


async function sendMessageToQueue(queueClient, messageContent) {
    try {
        const sendMessageResponse = await queueClient.sendMessage(messageContent);
        console.log(`Message sent. Message ID: ${sendMessageResponse.messageId}, Pop Receipt: ${sendMessageResponse.popReceipt}`);
        return { messageId: sendMessageResponse.messageId, popReceipt: sendMessageResponse.popReceipt };
    } catch (error) {
        console.error(`Error sending message: ${error.message}`);
        throw error;
    }
}

const messagePayload = { userId: 123, action: "process_order", orderId: "ABC-456" };
const messageString = JSON.stringify(messagePayload);

const sentMessageInfo = await sendMessageToQueue(queueClient, messageString);
console.log(`Sent message with ID: ${sentMessageInfo.messageId}`);

Tip: The sendMessage method returns a messageId and popReceipt. You'll need the popReceipt to delete or update the message.

4. Receiving Messages

You can receive one or more messages from the queue. When a message is received, it becomes invisible for a specified duration (visibility timeout) and can be processed. If the processing is successful, you delete it. If not, the visibility timeout expires, and the message becomes visible again.


async function receiveMessages(queueClient, numberOfMessages = 1) {
    try {
        const receiveQueueMessagesResponse = await queueClient.receiveMessages({ numberOfMessages: numberOfMessages });

        if (receiveQueueMessagesResponse.receivedMessages.length > 0) {
            console.log(`Received ${receiveQueueMessagesResponse.receivedMessages.length} messages:`);
            for (const receivedMessage of receiveQueueMessagesResponse.receivedMessages) {
                console.log(`  Message ID: ${receivedMessage.messageId}`);
                console.log(`  Content: ${receivedMessage.messageText}`);
                console.log(`  Dequeue Count: ${receivedMessage.dequeueCount}`);
                console.log(`  Pop Receipt: ${receivedMessage.popReceipt}`);
                // Process the message here...
                // Example: const messageData = JSON.parse(receivedMessage.messageText);
                // console.log("Parsed message data:", messageData);
            }
            return receiveQueueMessagesResponse.receivedMessages;
        } else {
            console.log("No messages in the queue.");
            return [];
        }
    } catch (error) {
        console.error(`Error receiving messages: ${error.message}`);
        throw error;
    }
}

// Example of receiving a message
// const receivedMessages = await receiveMessages(queueClient, 1);

5. Deleting a Message

Once a message has been successfully processed, it should be deleted from the queue using its messageId and popReceipt.


async function deleteMessage(queueClient, messageId, popReceipt) {
    try {
        await queueClient.deleteMessage(messageId, popReceipt);
        console.log(`Message '${messageId}' deleted successfully.`);
    } catch (error) {
        console.error(`Error deleting message '${messageId}': ${error.message}`);
        throw error;
    }
}

// If you received messages and processed them, you would call deleteMessage like this:
// if (receivedMessages && receivedMessages.length > 0) {
//     const messageToDelete = receivedMessages[0]; // Assuming we process the first message
//     await deleteMessage(queueClient, messageToDelete.messageId, messageToDelete.popReceipt);
// }

6. Clearing the Queue

To remove all messages from the queue at once, you can use the clearMessages method.


async function clearQueue(queueClient) {
    try {
        await queueClient.clearMessages();
        console.log(`Queue '${queueClient.name}' cleared successfully.`);
    } catch (error) {
        console.error(`Error clearing queue '${queueClient.name}': ${error.message}`);
        throw error;
    }
}

// To clear the queue:
// await clearQueue(queueClient);

7. Deleting the Queue

You can also delete the entire queue when it's no longer needed.


async function deleteQueue(queueClient) {
    try {
        await queueClient.deleteQueue();
        console.log(`Queue '${queueClient.name}' deleted successfully.`);
    } catch (error) {
        console.error(`Error deleting queue '${queueClient.name}': ${error.message}`);
        throw error;
    }
}

// To delete the queue:
// await deleteQueue(queueClient);

Important: Deleting a queue is a permanent action and cannot be undone. Ensure you have backed up any essential messages before proceeding.

Conclusion

You've now learned the fundamental operations for using Azure Storage Queues with JavaScript: creating a client, creating, sending, receiving, deleting, clearing, and deleting queues. These building blocks enable you to implement robust, decoupled architectures in your applications.

For more advanced scenarios, explore topics like:

Setting message TTL (Time-to-Live)
Adjusting visibility timeout
Handling poisoned messages
Using the Azure SDK for Browser

Refer to the official Azure Storage Queue SDK documentation for more details and examples.