azure-storage
Version:
Microsoft Azure Storage Client Library for Node.js
463 lines (414 loc) • 24.6 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Azure Storage JavaScript Client Library Sample for Queue Operations</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="mt-1">
<h1>Azure Storage JavaScript Client Library Sample for Queue Operations</h1>
</div>
<p class="lead">In this sample, we will demonstrate common scenarios for Azure Queue Storage that includes creating, listing and deleting queues and messages.</p>
<hr/>
<p>Azure Storage queue service provides cloud messaging between application components. In designing applications for scale, application components are often decoupled, so that they can scale independently. Queue storage delivers asynchronous messaging for communication between application components, whether they are running in the cloud, on the desktop, on an on-premises server, or on a mobile device. Queue storage also supports managing asynchronous tasks and building process work flows.
</p>
<div class="panel panel-danger">
<div class="panel-body">
<b>Note</b>: You may need set up a HTTP server to host this sample for IE11 and latest Chrome.
</div>
</div>
<h2>Contents:</h2>
<ul>
<li><a href="#step1">Step 1: Preparing an Azure Storage account with CORS rules set</a></li>
<li><a href="#step2">Step 2: Importing Azure Storage JavaScript Client Library</a></li>
<li><a href="#step3">Step 3: Creating an Azure Storage Queue Service Object</a></li>
<li><a href="#step4">Step 4: Queue Operations</a></li>
<li><a href="#step5">Step 5: Message Operations</a></li>
<li><a href="#step6">Step 6: Creating your JavaScript Application based on Azure Storage JavaScript Client Library</a></li>
</ul>
<h2 id="step1">Step 1: Preparing an Azure Storage account with CORS rules set</h2>
<p>Cross-origin resource sharing, or CORS, must be configured on the Azure Storage account to be accessed directly from JavaScript in the browser.
You are able to set the CORS rules for specific Azure Storage account on the <a href="https://portal.azure.com">Azure Portal</a>.
The "Allowed origins" could be set to "*" to allow all the origins in this sample.
For more information about CORS, see <a href="https://docs.microsoft.com/en-us/rest/api/storageservices/fileservices/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services">Cross-Origin Resource Sharing (CORS)</a>.</p>
<img src="cors.PNG"/>
<h2 id="step2">Step 2: Importing Azure Storage JavaScript Client Library</h2>
<p>
Importing <code>azure-storage.queue.js</code> in your HTML file for queue operations.
<p>
<pre>
<script src="azure-storage.queue.js"></script>
</pre>
<h2 id="step3">Step 3: Creating an Azure Storage Queue Service Object</h2>
<p>
The <code>QueueService</code> object lets you work with queues and messages.
Following code creates a <code>QueueService</code> object with storage account and SAS Token.
</p>
<pre>
var queueUri = 'https://' + 'STORAGE_ACCOUNT' + '.queue.core.windows.net';
var queueService = AzureStorage.Queue.createQueueServiceWithSas(queueUri, 'SAS_TOKEN');
</pre>
<p>
You can load Azure Storage JavaScript Client Library in a CommonJS or AMD environment by JavaScript module loaders. If no module system is found, global variable <code>AzureStorage.Queue</code> will be set, which is the start point where we can create service objects for queue and access to the storage utilities.
</p>
<div class="panel panel-primary">
<div class="panel-body">
<b>How to get full detailed API definitions? </b> Currently, the JavaScript Client Library shares almost the same API definitions with Node.js SDK, besides Node.js runtime specific APIs.
Please check API details on <a href="http://azure.github.io/azure-storage-node/">Azure Storage API reference documents</a>. The JavaScript global variable <code>AzureStorage.Queue</code> is just like the object <code>require('azure-storage')</code> returns in Node.js, but limits to Queue related interfaces.
Go to <a href="https://azure.github.io/azure-storage-node/QueueService.html">QueueService</a> to view possible methods provided by <code>QueueService</code> class.
</div>
</div>
<div class="panel panel-danger">
<div class="panel-body">
<b>Warning</b>: Azure Storage JavaScript Client Library also supports creating <code>QueueService</code> based on Storage Account Key for authentication besides SAS Token.
However, for security concerns, we recommend use of a limited time SAS Token, generated by a backend web server using a <a href="https://docs.microsoft.com/en-us/azure/storage/storage-dotnet-shared-access-signature-part-1">Stored Access Policy</a>.
</div>
</div>
<h2 id="step4">Step 4: Queue Operations</h2>
<p>
Azure Queue storage is a service for storing large numbers of messages that can be accessed from anywhere in the world via authenticated calls using HTTP or HTTPS. A single queue message can be up to 64 KB in size, and a queue can contain millions of messages, up to the total capacity limit of a storage account.
</p>
<h3>List Queues</h3>
<p><code>QueueService</code> provides <code>listQueuesSegmented</code> and <code>listQueuesSegmentedWithPrefix</code> for retrieving the queue list under your storage account.</p>
<pre>
queueService.listQueuesSegmented(null, function (error, results) {
if (error) {
// List queue error
} else {
for (var i = 0, queue; queue = results.entries[i]; i++) {
// Deal with queue object
}
}
});
</pre>
<h3>Create Queue</h3>
<p><code>QueueService</code> provides <code>createQueue</code> and <code>createQueueIfNotExists</code> for creating a queue under a storage account.</p>
<pre>
queueService.createQueueIfNotExists('myqueue', function(error, result) {
if (error) {
// Create queue error
} else {
// Create queue successfully
}
});
</pre>
<h3>Delete Queue</h3>
<p><code>QueueService</code> provides <code>deleteQueue</code> and <code>deleteQueueIfExists</code> for deleting a queue under a storage account.</p>
<pre>
queueService.deleteQueueIfExists('myqueue', function(error, result) {
if (error) {
// Delete queue error
} else {
// Delete queue successfully
}
});
</pre>
<h3> Executable Example </h3>
<p>The sample will try to create an Azure Storage queue service object based on SAS Token authorization. Enter your Azure Storage account name and SAS Token here. Make sure you have set the CORS rules for the Azure Storage queue service, and the SAS Token is in valid period.</p>
<label><b>Storage account:</b> </label> <input type="text" id="account"/>
<label><b>SAS Token:</b> </label> <input type="text" id="sas"/>
<p> Azure Storage queue service provides plenty of interfaces for queue operations. In following example, you can try to list all the queues under your storage account, and try to create or delete one queue from your account.</p>
<ul>
<li><p> Click <button class="btn btn-xs btn-primary" onclick="refreshQueueList()">ListQueues</button> button to view the queue list under your Azure Storage account</p></li>
<li><p> Click <button class="btn btn-xs btn-primary" onclick="createQueue()">CreateQueue</button> button to create a queue under your Azure Storage account:</p>
<p><label><b>New Queue Name:</b> </label> <input type="text" value="myqueue" id="newqueue"/> </p>
</li>
<li><p> Click "<b>Delete</b>" button to delete the queue under your Azure Storage account</p></li>
<li><p> Click "<b>Select</b>" button to select a queue and operate with the queue messages in next step</p></li>
</ul>
<div id="queues"></div>
<h2 id="step5">Step 5: Message Operations</h2>
<p> A storage <b>Message</b>, in any format, of up to 64 KB. The maximum time that a message can remain in the queue is 7 days.</p>
<div class="panel panel-primary">
<div class="panel-body">
<b>Note: </b> Azure Storage JavaScript Client Library provides <code>var encoder = new AzureStorage.Queue.QueueMessageEncoder.TextBase64QueueMessageEncoder()</code> which is a Base64 encoder and docoder.
If a message content string is encoded with <code>encoder.encode()</code>, remember to decode it with <code>encoder.decode()</code> after peek the message.
</div>
</div>
<h3>Peek Messages</h3>
<p><code>QueueService</code> provides <code>peekMessage</code> and <code>peekMessages</code> for retrieving the messages list under a queue.</p>
<pre>
queueService.peekMessages('myqueue', {numOfMessages: 32}, function (error, results) {
if (error) {
// Peek messages error
} else {
for (var i = 0, message; message = results[i]; i++) {
// Deal with message object
}
}
});
</pre>
<h3>Create Message</h3>
<p><code>QueueService</code> provides <code>createMessage</code> for creating a new message to a queue.</p>
<pre>
var encoder = new AzureStorage.Queue.QueueMessageEncoder.TextBase64QueueMessageEncoder();
queueService.createMessage('myqueue', encoder.encode('mymessage'), function (error, results, response) {
if (error) {
// Create message error
} else {
// Create message successfully
}
});
</pre>
<h3>Dequeue Message</h3>
<p><code>QueueService</code> provides <code>getMessages</code> and <code>deleteMessage</code> for dequeuing next message in a queue.</p>
<pre>
queueService.getMessages('myqueue', function(error, result, response) {
if(!error){
// Message text is in messages[0].messageText
var message = result[0];
queueService.deleteMessage('myqueue', message.messageId, message.popReceipt, function(error, response){
if(!error){
//message deleted
}
});
}
});
</pre>
<h3>Update Message</h3>
<p><code>QueueService</code> provides <code>getMessages</code> and <code>updateMessage</code> for updating next message in a queue.</p>
<pre>
var encoder = new AzureStorage.Queue.QueueMessageEncoder.TextBase64QueueMessageEncoder();
queueService.getMessages('myqueue', function(error, result, response) {
if(!error){
// Got the message
var message = result[0];
queueService.updateMessage('myqueue', message.messageId, message.popReceipt, 10, {messageText: encoder.encode('new text')}, function(error, result, response){
if(!error){
// Message updated successfully
}
});
}
});
</pre>
<h3> Executable Example </h3>
<p>After clicked the "<b>Select</b>" button on the queue list in last step, you are able to operate with the queue messages under the selected queue.<p>
<ul>
<li><p> Click <button class="btn btn-xs btn-primary" onclick="refreshMessageList()">PeekMessages</button> button to refresh the message list in your selected queue</p></li>
<li><p> Click <button class="btn btn-xs btn-primary" onclick="addMessage()">AddMessage</button> button to create a message in your selected queue: </p>
<p><label><b>New Message Content:</b> </label> <input type="text" value="Message Content" id="newmessage"/> </p>
</li>
<li><p> Click <button class="btn btn-xs btn-success" onclick="update()">Update</button> button to update the top queue message in your selected queue (Dequeued messages will be invisible for 30s by default.):</p>
<p><label><b>Update Message Content:</b> </label> <input type="text" value="Updated Message Content" id="updatemessage"/> </p>
</li>
<li><p> Click <button class="btn btn-xs btn-danger" onclick="dequeue()">Dequeue</button> button to dequeue the top queue message in your selected queue:</p></li>
</ul>
<div id="result"></div>
<h2 id="step6">Step 6: Creating your JavaScript Application based on Azure Storage JavaScript Client Library</h2>
<ol>
<li>Setting CORS rules for your selected Azure-Storage account queue service.</li>
<li>Including functional file(s) needed, such as "azure-storage.queue.js" for queue operation.</li>
<li>Using keyword "AzureStorage.Queue" to access to Azure storage JavaScript APIs for queues.</li>
<li>Referring to <a href="http://azure.github.io/azure-storage-node/">API documents</a> for detailed API definitions.</li>
</ol>
<p> You can view the source code of this sample for detailed reference. </p>
</div>
<script src="../bundle/azure-storage.queue.js"></script>
<script>
var account = document.getElementById('account').value;
var sas = document.getElementById('sas').value;
var queue = '';
var queueUri = '';
var encoder = new AzureStorage.Queue.QueueMessageEncoder.TextBase64QueueMessageEncoder();
function checkParameters() {
account = document.getElementById('account').value;
sas = document.getElementById('sas').value;
if (account == null || account.length < 1)
{
alert('Please enter a valid storage account name!');
return false;
}
if (sas == null || sas.length < 1)
{
alert('Please enter a valid SAS Token!');
return false;
}
return true;
}
function getQueueService() {
if (!checkParameters())
return null;
queueUri = 'https://' + account + '.queue.core.windows.net';
var queueService = AzureStorage.Queue.createQueueServiceWithSas(queueUri, sas).withFilter(new AzureStorage.Queue.ExponentialRetryPolicyFilter());
return queueService;
}
function refreshQueueList()
{
var queueService = getQueueService();
if (!queueService)
return;
document.getElementById('queues').innerHTML = 'Loading queue list...';
queueService.listQueuesSegmented(null, {maxResults : 200}, function(error, results) {
if (error) {
alert('List queue list error, please open browser console to view detailed error');
console.log(error);
} else {
var output = [];
output.push('<tr>',
'<th>QueueName</th>',
'<th>Operations</th>',
'</tr>');
if (results.entries.length < 1) {
output.push('<tr><td>Empty results...</td></tr>');
}
for (var i = 0, queue; queue = results.entries[i]; i++) {
output.push('<tr>',
'<td>', queue.name, '</td>',
'<td>', '<button class="btn btn-xs btn-danger" onclick="deleteQueue(\'', queue.name ,'\')">Delete</button> ',
'<button class="btn btn-xs btn-success" onclick="viewQueue(\'', queue.name ,'\')">Select</button>', '</td>',
'</tr>');
}
document.getElementById('queues').innerHTML = '<table class="table table-condensed table-bordered">' + output.join('') + '</table>';
}
});
}
function createQueue() {
var queueService = getQueueService();
if (!queueService)
return;
var queue = document.getElementById('newqueue').value;
if (!AzureStorage.Queue.Validate.queueNameIsValid(queue, function(err, res){})) {
alert('Invalid queue name!');
return;
}
queueService.createQueueIfNotExists(queue.toLowerCase(), function(error, result) {
if (error) {
alert('Create queue failed, open browser console for more detailed info.');
console.log(error);
} else {
alert('Create ' + queue + ' successfully!');
refreshQueueList();
}
});
}
function deleteQueue(queue) {
var queueService = getQueueService();
if (!queueService)
return;
queueService.deleteQueueIfExists(queue, function(error, result) {
if (error) {
alert('Delete queue failed, open browser console for more detailed info.');
console.log(error);
} else {
alert('Delete ' + queue + ' successfully!');
refreshQueueList();
}
});
}
function viewQueue(selectedQueue) {
queue = selectedQueue;
alert('Selected ' + queue + ' !');
refreshMessageList();
}
function refreshMessageList() {
var queueService = getQueueService();
if (!queueService)
return;
if (queue == null || queue.length < 1) {
alert('Please select a queue from queue list!')
return;
}
document.getElementById('result').innerHTML = 'Loading queue messages...';
queueService.peekMessages(queue, {numOfMessages: 32}, function (error, results) {
if (error) {
alert('List queue messages error, please open browser console to view detailed error');
console.log(error);
} else {
var output = [];
output.push('<tr>',
'<th>MessageId</th>',
'<th>MessageContent</th>',
'<th>DequeueCount</th>',
'<th>InsertionTime</th>',
'</tr>');
if (results.length < 1) {
output.push('<tr><td>Empty results...</td></tr>');
}
for (var i = 0, message; message = results[i]; i++) {
output.push('<tr>',
'<td>', message.messageId, '</td>',
'<td>', encoder.decode(message.messageText), '</td>',
'<td>', message.dequeueCount, '</td>',
'<td>', message.insertionTime, '</td>',
'</tr>');
}
document.getElementById('result').innerHTML = '<table class="table table-condensed table-bordered">' + output.join('') + '</table>';
}
});
}
function addMessage() {
var queueService = getQueueService();
if (!queueService)
return;
if (queue == null || queue.length < 1) {
alert('Please select a queue from queue list!')
return;
}
var message = document.getElementById('newmessage').value;
queueService.createMessage(queue, encoder.encode(message), function(error, result, response) {
if(error) {
alert('Create messages error, please open browser console to view detailed error');
console.log(error);
} else {
alert('Create message successfully!');
refreshMessageList();
}
});
}
function dequeue() {
var queueService = getQueueService();
if (!queueService)
return;
if (queue == null || queue.length < 1) {
alert('Please select a queue from queue list!')
return;
}
queueService.getMessages(queue, function(error, result, response) {
if(!error) {
if (result.length < 1)
return;
var message = result[0];
queueService.deleteMessage(queue, message.messageId, message.popReceipt, function(error, response) {
if(error) {
alert('Delete message error, please open browser console to view detailed error');
console.log(error);
} else {
alert('Delete message successfully!');
refreshMessageList();
}
});
}
});
}
function update() {
var queueService = getQueueService();
if (!queueService)
return;
if (queue == null || queue.length < 1) {
alert('Please select a queue from queue list!')
return;
}
var updateMessage = document.getElementById('updatemessage').value;
queueService.getMessages(queue, function(error, result, response) {
if(!error) {
if (result.length < 1)
return;
var message = result[0];
queueService.updateMessage(queue, message.messageId, message.popReceipt, 10, {messageText: encoder.encode(updateMessage)}, function(error, result, response){
if(error) {
alert('Update message error, please open browser console to view detailed error');
console.log(error);
} else {
alert('Update message successfully!');
refreshMessageList();
}
});
}
});
}
</script>
</body>
</html>