Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Tutoriel : Création d'une application de WebSocket chat avec une WebSocket API, Lambda et DynamoDB
<a name="websocket-api-chat-app"></a>

Dans ce didacticiel, vous allez créer une application de chat sans serveur avec une WebSocket API. Avec une WebSocket API, vous pouvez prendre en charge la communication bidirectionnelle entre les clients. Les clients peuvent recevoir des messages sans avoir à rechercher les mises à jour.

Ce didacticiel vous prendra environ 30 minutes. Tout d'abord, vous allez utiliser un CloudFormation modèle pour créer des fonctions Lambda qui géreront les demandes d'API, ainsi qu'une table DynamoDB qui stocke votre client. IDs Vous allez ensuite utiliser la console API Gateway pour créer une WebSocket API qui s'intègre à vos fonctions Lambda. Enfin, vous allez tester votre API pour vérifier que les messages sont envoyés et reçus.

![\[Vue d’ensemble architecturale de l’API que vous créez dans ce didacticiel.\]](http://docs.aws.amazon.com/fr_fr/apigateway/latest/developerguide/images/ws-chat-app.png)


Pour suivre ce didacticiel, vous avez besoin d'un AWS compte et d'un Gestion des identités et des accès AWS utilisateur ayant accès à la console. Pour de plus amples informations, veuillez consulter [Configuration d’API Gateway avant son utilisation](setting-up.md).

Vous avez également besoin de `wscat` pour vous connecter à votre API. Pour de plus amples informations, veuillez consulter [`wscat`À utiliser pour se connecter à une WebSocket API et y envoyer des messages](apigateway-how-to-call-websocket-api-wscat.md).

**Topics**
+ [Étape 1 : créer des fonctions Lambda et une table DynamoDB](#websocket-api-chat-app-create-dependencies)
+ [Étape 2 : Création d'une WebSocket API](#websocket-api-chat-app-create-api)
+ [Étape 3 : tester votre API](#websocket-api-chat-app-invoke-api)
+ [Étape 4 : nettoyer](#websocket-api-chat-app-cleanup)
+ [Prochaines étapes : Automatisez avec CloudFormation](#websocket-api-chat-app-next-steps)

## Étape 1 : créer des fonctions Lambda et une table DynamoDB
<a name="websocket-api-chat-app-create-dependencies"></a>

Téléchargez et décompressez [le modèle de création d'application pour CloudFormation](samples/ws-chat-app-starter.zip). Vous allez utiliser ce modèle pour créer une table Amazon DynamoDB afin de stocker le client de votre application. IDs Chaque client connecté possède un identifiant unique que nous utiliserons comme clé de partition de la table. Ce modèle crée également des fonctions Lambda qui mettent à jour vos connexions client dans DynamoDB et gèrent l’envoi de messages aux clients connectés.

**Pour créer une CloudFormation pile**

1. Ouvrez la CloudFormation console à l'adresse [https://console.aws.amazon.com/cloudformation.](https://console.aws.amazon.com/cloudformation/)

1. Choisissez **Créer une pile**, puis choisissez **Avec de nouvelles ressources (standard).**

1. Dans **Spécifier le modèle**, choisissez **Charger un modèle de fichier**.

1. Sélectionnez le modèle que vous avez téléchargé.

1. Choisissez **Suivant**. 

1. Pour **Nom de la pile**, saisissez **websocket-api-chat-app-tutorial**, puis choisissez **Suivant**.

1. Pour **Configurer les options de pile**, choisissez **Suivant**.

1. Pour les **fonctionnalités**, reconnaissez que CloudFormation vous pouvez créer des ressources IAM dans votre compte.

1. Choisissez **Suivant**, puis **Soumettre**.

CloudFormation fournit les ressources spécifiées dans le modèle. La fin du provisionnement de vos ressources peut prendre quelques minutes. Lorsque le statut de votre CloudFormation pile est **CREATE\$1COMPLETE**, vous êtes prêt à passer à l'étape suivante.

## Étape 2 : Création d'une WebSocket API
<a name="websocket-api-chat-app-create-api"></a>

Vous allez créer une WebSocket API pour gérer les connexions client et acheminer les demandes vers les fonctions Lambda que vous avez créées à l'étape 1.



**Pour créer une WebSocket API**

1. Connectez-vous à la console API Gateway à l'adresse [https://console.aws.amazon.com/apigateway.](https://console.aws.amazon.com/apigateway)

1. Sélectionnez **Create API** (Créer une API). Ensuite, pour **WebSocket API**, choisissez **Build**.

1. Sous **API name (Nom de l’API)**, saisissez **websocket-chat-app-tutorial**.

1. Pour le **type d'adresse IP**, sélectionnez **IPv4**.

1. Pour **Route selection expression (Expression de sélection de route)**, entrez **request.body.action**. Expression de sélection de route pour déterminer la route à appeler lorsqu’un client envoie un message.

1. Choisissez **Suivant**.

1. Pour **Predefined routes (Routes prédéfinies)**, choisissez **Add \$1connect (Ajouter \$1connect)**, **Add \$1disconnect (Ajouter \$1disconnect)** et **Add \$1default (Ajouter \$1default)**. Les routes **\$1connect** et **\$1disconnect** sont des itinéraires spéciaux qu’API Gateway appelle automatiquement lorsqu’un client se connecte à une API ou se déconnecte de celle-ci. API Gateway invoque la route `$default` lorsqu’aucune autre route ne correspond à une demande.

1. Pour **Custom routes (Routes personnalisées)**, choisissez **Add custom route (Ajouter une route personnalisée)**. Pour **Route key (Clé de route)**, entrez **sendmessage**. Cette route personnalisée gère les messages envoyés aux clients connectés.

1. Choisissez **Suivant**.

1. Sous **Attach integrations (Attacher les intégrations)**, pour chaque route et **type d’intégration**, choisissez Lambda.

   Pour **Lambda**, choisissez la fonction Lambda correspondante que vous avez créée à l'étape 1. CloudFormation Le nom de chaque fonction correspond à une route. Par exemple, pour la route **\$1connect**, choisissez la fonction nommée **websocket-chat-app-tutorial-ConnectHandler**.

1. Passez en revue l’étape créée par API Gateway pour vous. Par défaut, API Gateway crée un nom d’étape `production` et déploie automatiquement votre API à ce stade. Choisissez **Suivant**.

1. Choisissez **Create and deploy (Créer et déployer)**.

## Étape 3 : tester votre API
<a name="websocket-api-chat-app-invoke-api"></a>

Ensuite, vous testez votre API pour vérifier qu’elle fonctionne. Pour vous connecter à l’API, utilisez la commande `wscat`.

**Pour obtenir l’URL d’appel de votre API**

1. Connectez-vous à la console API Gateway à l'adresse [https://console.aws.amazon.com/apigateway.](https://console.aws.amazon.com/apigateway)

1. Choisissez votre API.

1. Choisissez **Stages (Étapes)**, puis **production**.

1. Notez l'**WebSocket URL** de votre API. L’URL doit ressembler à `wss://abcdef123.execute-api.us-east-2.amazonaws.com/production`.

**Pour vous connecter à votre API**

1. Utilisez la commande suivante pour vous connecter à votre API. Lorsque vous vous connectez à votre API, API Gateway appelle la route `$connect`. Lorsque cette route est appelée, il appelle une fonction Lambda qui stocke votre ID de connexion dans DynamoDB.

   ```
   wscat -c wss://abcdef123.execute-api.us-west-2.amazonaws.com/production
   ```

   ```
   Connected (press CTRL+C to quit)
   ```

1. Ouvrez un nouveau terminal et exécutez à nouveau la commande **wscat** avec les paramètres suivants.

   ```
   wscat -c wss://abcdef123.execute-api.us-west-2.amazonaws.com/production
   ```

   ```
   Connected (press CTRL+C to quit)
   ```

   Vous disposez ainsi de deux clients connectés capables d’échanger des messages.

**Pour envoyer un message**
+  API Gateway détermine la route à appeler en fonction de l’expression de sélection de route de votre API. L’expression de sélection de route de votre API est `$request.body.action`. Par conséquent, API Gateway appelle la route `sendmessage` lorsque vous envoyez le message suivant :

  ```
  {"action": "sendmessage", "message": "hello, everyone!"}
  ```

  La fonction Lambda associée à la route invoquée collecte le client auprès de IDs DynamoDB. Ensuite, la fonction appelle API Gateway Management et envoie le message à ces clients. Tous les clients connectés reçoivent le message suivant :

  ```
  < hello, everyone!
  ```

**Pour appeler la route \$1 par défaut de votre API**
+ API Gateway appelle la route par défaut de votre API lorsqu’un client envoie un message qui ne correspond pas à vos routes définies. La fonction Lambda associée à la route `$default` utilise API Gateway Management pour envoyer au client des informations relatives à leur connexion.

  ```
  test
  ```

  ```
  Use the sendmessage route to send a message. Your info: {"ConnectedAt":"2022-01-25T18:50:04.673Z","Identity":{"SourceIp":"192.0.2.1","UserAgent":null},"LastActiveAt":"2022-01-25T18:50:07.642Z","connectionID":"Mg_ugfpqPHcCIVA="}
  ```

**Pour vous déconnecter de votre API**
+ Pour vous déconnecter de votre API, appuyez sur **CTRL\$1C**. Lorsqu’un client se déconnecte de votre API, API Gateway invoque la route `$disconnect` de votre API. L’intégration Lambda pour la route `$disconnect` de votre API supprime l’ID de connexion de DynamoDB.

## Étape 4 : nettoyer
<a name="websocket-api-chat-app-cleanup"></a>

Pour éviter des coûts inutiles, supprimez les ressources que vous avez créées dans le cadre de ce didacticiel. Les étapes suivantes suppriment votre CloudFormation stack et votre WebSocket API.

**Pour supprimer une WebSocket API**

1. Connectez-vous à la console API Gateway à l'adresse [https://console.aws.amazon.com/apigateway.](https://console.aws.amazon.com/apigateway)

1. Sur la **APIs**page, sélectionnez votre `websocket-chat-app-tutorial` API. Choisissez **Actions**, choisissez **Supprimer**, puis confirmez votre choix.

**Pour supprimer une CloudFormation pile**

1. Ouvrez la CloudFormation console à l'adresse [https://console.aws.amazon.com/cloudformation.](https://console.aws.amazon.com/cloudformation/)

1. Sélectionnez votre CloudFormation pile.

1. Choisissez **Supprimer**, puis confirmez votre choix.

## Prochaines étapes : Automatisez avec CloudFormation
<a name="websocket-api-chat-app-next-steps"></a>

Vous pouvez automatiser la création et le nettoyage de toutes les AWS ressources impliquées dans ce didacticiel. Pour un CloudFormation modèle qui crée cette API et toutes les ressources associées, consultez [ws-chat-app.yaml.](samples/ws-chat-app.zip)