Prerequisiti Crea le risorse AWS Comprendi l'applicazione AWS di messaggistica Crea la pagina HTML Creazione dello script del browser Passaggi successivi

Creazione di un'applicazione di messaggistica di esempio

Puoi creare un'AWSapplicazione che invia e recupera messaggi utilizzando Amazon AWS SDK for JavaScript Simple Queue Service (Amazon SQS). I messaggi vengono archiviati in una coda FIFO (first in, first out) che garantisce che l'ordine dei messaggi sia coerente. Ad esempio, il primo messaggio archiviato nella coda è il primo messaggio letto dalla coda.

Nota

Per ulteriori informazioni su Amazon SQS, consulta What is Amazon Simple Queue Service?

In questo tutorial, crei un'applicazione Node.js denominata AWS Messaging.

Costo di completamento: i AWS servizi inclusi in questo documento sono inclusi nel piano AWS gratuito.

Nota: assicurati di interrompere tutte le risorse che crei durante la lettura di questo tutorial per assicurarti che non ti venga addebitato alcun costo.

Prerequisiti

Per configurare ed eseguire questo esempio, è necessario completare queste attività:

Configura l'ambiente di progetto per eseguire questi TypeScript esempi di Node e installa i moduli richiesti AWS SDK for JavaScript e di terze parti. Segui le istruzioni su GitHub.
Creazione di un file di configurazione condiviso con le credenziali utente. Per ulteriori informazioni sulla fornitura di un file di credenziali condiviso, consulta File di configurazione e credenziali condivisi nella Guida di riferimento agli AWSSDK e agli strumenti.

Importante

Questo esempio utilizza ECMAScript6 (ES6). Ciò richiede la versione 13.x o successiva di Node.js. Per scaricare e installare la versione più recente di Node.js, consulta Node.js downloads. .

Tuttavia, se preferisci utilizzare la sintassi CommonJS, fai riferimento a. JavaScript Sintassi ES6/CommonJS

Crea le risorse AWS

Questo tutorial richiede le seguenti risorse.

Un ruolo IAM non autenticato con autorizzazioni per Amazon SQS.
Una coda Amazon SQS FIFO denominata Message.FIFO: per informazioni sulla creazione di una coda, consulta Creazione di una coda Amazon SQS.

Puoi creare queste risorse manualmente, ma ti consigliamo di effettuare il provisioning di queste risorse utilizzando () come descritto in questo tutorial. AWS CloudFormation AWS CloudFormation

Nota

AWS CloudFormationSi tratta di un framework di sviluppo software che consente di definire le risorse delle applicazioni cloud. Per ulteriori informazioni, consulta la AWS CloudFormationGuida per l'utente.

Crea le AWS risorse utilizzando il AWS CloudFormation

AWS CloudFormation consente di creare ed effettuare il provisioning delle distribuzioni dell'infrastruttura AWS in modo ripetuto e prevedibile. Per ulteriori informazioni su AWS CloudFormation, consulta la AWS CloudFormationGuida per l'utente di .

Per creare lo AWS CloudFormation stack utilizzando: AWS CLI

Installa e configura le AWS CLI seguenti istruzioni contenute nella Guida per l'AWS CLIutente.
Create un file denominato setup.yaml nella directory principale della cartella del progetto e copiatene il contenuto. GitHub

Nota
Il AWS CloudFormation modello è stato generato utilizzando quello AWS CDK disponibile qui GitHub. Per ulteriori informazioni su AWS CDK, consulta la Guida per gli sviluppatori di AWS Cloud Development Kit (AWS CDK).
Esegui il seguente comando dalla riga di comando, sostituendo STACK_NAME con un nome univoco per lo stack.

Importante
Il nome dello stack deve essere univoco all'interno di una regione e di un account. AWS AWS È possibile specificare fino a 128 caratteri e sono consentiti numeri e trattini.
```
aws cloudformation create-stack --stack-name STACK_NAME --template-body file://setup.yaml --capabilities CAPABILITY_IAM
```
Per ulteriori informazioni sui parametri dei create-stack comandi, consultate la guida di riferimento ai AWS CLI comandi e la Guida per l'AWS CloudFormationutente.

Per visualizzare le risorse create, apri AWS CloudFormation nella console di AWS gestione, scegli lo stack e seleziona la scheda Risorse.

Comprendi l'applicazione AWS di messaggistica

Per inviare un messaggio a una coda SQS, inserisci il messaggio nell'applicazione e scegli Invia.

Dopo l'invio del messaggio, l'applicazione visualizza il messaggio.

Puoi scegliere Purge per eliminare i messaggi dalla coda di Amazon SQS. Ciò si traduce in una coda vuota e nessun messaggio viene visualizzato nell'applicazione.

Di seguito viene descritto come l'applicazione gestisce un messaggio:

L'utente seleziona il proprio nome e immette il messaggio, quindi invia il messaggio, avviando la funzione. pushMessage
pushMessagerecupera l'URL della coda Amazon SQS, quindi invia un messaggio con un valore ID messaggio univoco (un GUID), il testo del messaggio e l'utente alla coda Amazon SQS.
pushMessagerecupera i messaggi dalla coda Amazon SQS, estrae l'utente e il messaggio per ogni messaggio e visualizza i messaggi.
L'utente può eliminare i messaggi, eliminandoli dalla coda di Amazon SQS e dall'interfaccia utente.

Crea la pagina HTML

Ora create i file HTML necessari per l'interfaccia utente grafica (GUI) dell'applicazione. Crea un file denominato index.html. Copia e incolla il codice seguente in. index.html Questo codice HTML fa riferimentomain.js. Questa è una versione in bundle di index.js, che include i AWS SDK for JavaScript moduli richiesti.


<!doctype html>
<html
  xmlns:th="http://www.thymeleaf.org"
  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="./images/favicon.ico" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="./css/styles.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script src="./js/main.js"></script>
    <style>
      .messageelement {
        margin: auto;
        border: 2px solid #dedede;
        background-color: #d7d1d0;
        border-radius: 5px;
        max-width: 800px;
        padding: 10px;
        margin: 10px 0;
      }

      .messageelement::after {
        content: "";
        clear: both;
        display: table;
      }

      .messageelement img {
        float: left;
        max-width: 60px;
        width: 100%;
        margin-right: 20px;
        border-radius: 50%;
      }

      .messageelement img.right {
        float: right;
        margin-left: 20px;
        margin-right: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>AWS Sample Messaging Application</h2>
      <div id="messages"></div>

      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">Sender:</span>
        </div>
        <select name="cars" id="username">
          <option value="Scott">Brian</option>
          <option value="Tricia">Tricia</option>
        </select>
      </div>

      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Message:</span>
        </div>
        <textarea
          class="form-control"
          id="textarea"
          aria-label="With textarea"
        ></textarea>
        <button
          type="button"
          onclick="pushMessage()"
          id="send"
          class="btn btn-success"
        >
          Send
        </button>
        <button
          type="button"
          onclick="purge()"
          id="refresh"
          class="btn btn-success"
        >
          Purge
        </button>
      </div>
      <!-- All of these child items are hidden and only displayed in a FancyBox ------------------------------------------------------>
      <div id="hide" style="display: none">
        <div id="base" class="messageelement">
          <img
            src="../public/images/av2.png"
            alt="Avatar"
            class="right"
            style="width: 100%"
          />
          <p id="text">Excellent! So, what do you want to do today?</p>
          <span class="time-right">11:02</span>
        </div>
      </div>
    </div>
  </body>
</html>

Questo codice è disponibile anche qui. GitHub

Creazione dello script del browser

In questo argomento, si crea uno script del browser per l'app. Dopo aver creato lo script del browser, lo si raggruppa in un file chiamato main.js come descritto inRaggruppamento di JavaScript.

Crea un file denominato index.js. Copia e incolla il codice da qui GitHub in poi.

Questo codice è spiegato nelle seguenti sezioni:

Configurazione
Popola Chat
messaggi push
purga

Configurazione

Innanzitutto, crea una libs directory e crea l'oggetto client Amazon SQS richiesto creando un file denominato. sqsClient.js Sostituisci REGION e IDENTITY_POOL_ID in ciascuno di essi.

Nota

Usa l'ID del pool di identità di Amazon Cognito in cui hai creato. Crea le risorse AWS


import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers";
import {SQSClient} from "@aws-sdk/client-sqs";
const REGION = "REGION"; //e.g. "us-east-1"
const IdentityPoolId = "IDENTITY_POOL_ID";
const sqsClient = new SQSClient({
  region: REGION,
  credentials: fromCognitoIdentityPool({
    client: new CognitoIdentityClient({ region: REGION }),
    identityPoolId: IdentityPoolId
  }),
});

Inindex.js, importa i AWS SDK for JavaScript moduli e i comandi richiesti. Sostituisci SQS_QUEUE_NAME con il nome della coda Amazon SQS che hai creato in. Crea le risorse AWS



import {
  GetQueueUrlCommand,
  SendMessageCommand,
  ReceiveMessageCommand,
  PurgeQueueCommand,
} from "@aws-sdk/client-sqs";
import { sqsClient } from "./libs/sqsClient.js";

const QueueName = "SQS_QUEUE_NAME"; // The Amazon SQS queue name, which must end in .fifo for this example.

Compila la chat

La populateChat funzione onload recupera automaticamente l'URL per la coda Amazon SQS, recupera tutti i messaggi in coda e li visualizza.


$(function () {
  populateChat();
});

const populateChat = async () => {
  try {
    // Set the Amazon SQS Queue parameters.
    const queueParams = {
      QueueName: QueueName,
      Attributes: {
        DelaySeconds: "60",
        MessageRetentionPeriod: "86400",
      },
    };
    // Get the Amazon SQS Queue URL.
    const data = await sqsClient.send(new GetQueueUrlCommand(queueParams));
    console.log("Success. The URL of the SQS Queue is: ", data.QueueUrl);
    // Set the parameters for retrieving the messages in the Amazon SQS Queue.
    var getMessageParams = {
      QueueUrl: data.QueueUrl,
      MaxNumberOfMessages: 10,
      MessageAttributeNames: ["All"],
      VisibilityTimeout: 20,
      WaitTimeSeconds: 20,
    };
    try {
      // Retrieve the messages from the Amazon SQS Queue.
      const data = await sqsClient.send(
        new ReceiveMessageCommand(getMessageParams)
      );
      console.log("Successfully retrieved messages", data.Messages);

      // Loop through messages for user and message body.
      var i;
      for (i = 0; i < data.Messages.length; i++) {
        const name = data.Messages[i].MessageAttributes.Name.StringValue;
        const body = data.Messages[i].Body;
        // Create the HTML for the message.
        var userText = body + "<br><br><b>" + name;
        var myTextNode = $("#base").clone();
        myTextNode.text(userText);
        var image_url;
        var n = name.localeCompare("Scott");
        if (n == 0) image_url = "./images/av1.png";
        else image_url = "./images/av2.png";
        var images_div =
          '<img src="' +
          image_url +
          '" alt="Avatar" class="right" style=""width:100%;"">';
        myTextNode.html(userText);
        myTextNode.append(images_div);

        // Add the message to the GUI.
        $("#messages").append(myTextNode);
      }
    } catch (err) {
      console.log("Error loading messages: ", err);
    }
  } catch (err) {
    console.log("Error retrieving SQS queue URL: ", err);
  }
};

Messaggi push

L'utente seleziona il proprio nome e immette il messaggio, quindi invia il messaggio, avviando la funzione. pushMessage pushMessagerecupera l'URL della coda Amazon SQS, quindi invia un messaggio con un valore ID messaggio univoco (un GUID), il testo del messaggio e l'utente alla coda Amazon SQS. Quindi recupera tutti i messaggi dalla coda di Amazon SQS e li visualizza.


const pushMessage = async () => {
  // Get and convert user and message input.
  var user = $("#username").val();
  var message = $("#textarea").val();

  // Create random deduplication ID.
  var dt = new Date().getTime();
  var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (
    c
  ) {
    var r = (dt + Math.random() * 16) % 16 | 0;
    dt = Math.floor(dt / 16);
    return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
  });

  try {
    // Set the Amazon SQS Queue parameters.
    const queueParams = {
      QueueName: QueueName,
      Attributes: {
        DelaySeconds: "60",
        MessageRetentionPeriod: "86400",
      },
    };
    const data = await sqsClient.send(new GetQueueUrlCommand(queueParams));
    console.log("Success. The URL of the SQS Queue is: ", data.QueueUrl);
    // Set the parameters for the message.
    var messageParams = {
      MessageAttributes: {
        Name: {
          DataType: "String",
          StringValue: user,
        },
      },
      MessageBody: message,
      MessageDeduplicationId: uuid,
      MessageGroupId: "GroupA",
      QueueUrl: data.QueueUrl,
    };
    const result = await sqsClient.send(new SendMessageCommand(messageParams));
    console.log("Success", result.MessageId);

    // Set the parameters for retrieving all messages in the SQS queue.
    var getMessageParams = {
      QueueUrl: data.QueueUrl,
      MaxNumberOfMessages: 10,
      MessageAttributeNames: ["All"],
      VisibilityTimeout: 20,
      WaitTimeSeconds: 20,
    };

    // Retrieve messages from SQS Queue.
    const final = await sqsClient.send(
      new ReceiveMessageCommand(getMessageParams)
    );
    console.log("Successfully retrieved", final.Messages);
    $("#messages").empty();
    // Loop through messages for user and message body.
    var i;
    for (i = 0; i < final.Messages.length; i++) {
      const name = final.Messages[i].MessageAttributes.Name.StringValue;
      const body = final.Messages[i].Body;
      // Create the HTML for the message.
      var userText = body + "<br><br><b>" + name;
      var myTextNode = $("#base").clone();
      myTextNode.text(userText);
      var image_url;
      var n = name.localeCompare("Scott");
      if (n == 0) image_url = "./images/av1.png";
      else image_url = "./images/av2.png";
      var images_div =
        '<img src="' +
        image_url +
        '" alt="Avatar" class="right" style=""width:100%;"">';
      myTextNode.html(userText);
      myTextNode.append(images_div);
      // Add the HTML to the GUI.
      $("#messages").append(myTextNode);
    }
  } catch (err) {
    console.log("Error", err);
  }
};
// Make the function available to the browser window.
window.pushMessage = pushMessage;

Elimina i messaggi

purgeelimina i messaggi da Amazon SQS Queue e dall'interfaccia utente.


// Delete the message from the Amazon SQS queue.
const purge = async () => {
  try {
    // Set the Amazon SQS Queue parameters.
    const queueParams = {
      QueueName: QueueName,
      Attributes: {
        DelaySeconds: "60",
        MessageRetentionPeriod: "86400",
      },
    };
    // Get the Amazon SQS Queue URL.
    const data = await sqsClient.send(new GetQueueUrlCommand(queueParams));
    console.log("Success", data.QueueUrl);
    // Delete all the messages in the Amazon SQS Queue.
    const result = await sqsClient.send(
      new PurgeQueueCommand({ QueueUrl: data.QueueUrl })
    );
    // Delete all the messages from the GUI.
    $("#messages").empty();
    console.log("Success. All messages deleted.", data);
  } catch (err) {
    console.log("Error", err);
  }
};

// Make the function available to the browser window.
window.purge = purge;

Raggruppamento di JavaScript

Questo codice completo dello script del browser è disponibile qui. GitHub .

Ora usa webpack per raggruppare i AWS SDK for JavaScript moduli index.js and in un unico file,. main.js

Se non l'hai già fatto, segui questo esempio Prerequisiti per installare webpack.

Nota
Per informazioni sul webpack, consulta. Raggruppa le applicazioni con webpack
Esegui quanto segue nella riga di comando per raggruppare il file di questo JavaScript esempio in un file chiamato: <index.js>
```
webpack index.js --mode development --target web --devtool false -o main.js
```

Passaggi successivi

Complimenti! Hai creato e distribuito l'applicazione di AWS messaggistica che utilizza Amazon SQS. Come indicato all'inizio di questo tutorial, assicurati di terminare tutte le risorse che crei durante la lettura di questo tutorial per assicurarti che non ti vengano più addebitati costi. Puoi farlo eliminando lo AWS CloudFormation stack che hai creato nell'Crea le risorse AWSargomento di questo tutorial, come segue:

Apri il file AWS CloudFormationnella console di AWS gestione.
Apri la pagina Stacks e seleziona lo stack.
Scegli Delete (Elimina).

Avvertimento JavaScript è disabilitato o non è disponibile nel tuo browser.

Per usare la documentazione AWS, JavaScript deve essere abilitato. Consulta le pagine della guida del browser per le istruzioni.

Convenzioni dei documenti

Servizi multipli: esempio di Amazon Lex

Da utilizzare AWS Cloud9 con l'SDK per JavaScript