Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

# Tutorial: Erstellen Sie eine WebSocket Chat-App mit einer WebSocket API, Lambda und DynamoDB
<a name="websocket-api-chat-app"></a>

In diesem Tutorial erstellen Sie eine serverlose Chat-Anwendung mit einer WebSocket API. Mit einer WebSocket API können Sie die bidirektionale Kommunikation zwischen Clients unterstützen. Kunden können Nachrichten erhalten, ohne Updates abfragen zu müssen.

Dieses Tutorial nimmt ungefähr 30 Minuten in Anspruch. Zunächst verwenden Sie eine CloudFormation Vorlage, um Lambda-Funktionen zu erstellen, die API-Anfragen verarbeiten, sowie eine DynamoDB-Tabelle, in der Ihr Client gespeichert wird. IDs Anschließend verwenden Sie die API Gateway Gateway-Konsole, um eine WebSocket API zu erstellen, die in Ihre Lambda-Funktionen integriert ist. Zuletzt testen Sie Ihre API, um zu prüfen, ob Nachrichten gesendet und empfangen werden.

![\[Übersicht über die Architektur der API, die Sie in diesem Tutorial erstellen.\]](http://docs.aws.amazon.com/de_de/apigateway/latest/developerguide/images/ws-chat-app.png)


Um dieses Tutorial abzuschließen, benötigen Sie ein AWS Konto und einen AWS Identity and Access Management Benutzer mit Konsolenzugriff. Weitere Informationen finden Sie unter [Einrichten der API Gateway](setting-up.md).

Sie benötigen außerdem `wscat`, um eine Verbindung zu Ihrer API herzustellen. Weitere Informationen finden Sie unter [Wird verwendet`wscat`, um eine Verbindung zu einer WebSocket API herzustellen und Nachrichten an diese zu senden](apigateway-how-to-call-websocket-api-wscat.md).

**Topics**
+ [Schritt 1: Erstellen von Lambda-Funktionen und einer DynamoDB-Tabelle](#websocket-api-chat-app-create-dependencies)
+ [Schritt 2: Erstellen Sie eine API WebSocket](#websocket-api-chat-app-create-api)
+ [Schritt 3: Testen Ihrer API](#websocket-api-chat-app-invoke-api)
+ [Schritt 4: Bereinigen](#websocket-api-chat-app-cleanup)
+ [Nächste Schritte: Automatisieren Sie mit CloudFormation](#websocket-api-chat-app-next-steps)

## Schritt 1: Erstellen von Lambda-Funktionen und einer DynamoDB-Tabelle
<a name="websocket-api-chat-app-create-dependencies"></a>

Laden Sie [die Vorlage zur App-Erstellung für CloudFormation](samples/ws-chat-app-starter.zip) herunter und entpacken Sie sie. Sie verwenden diese Vorlage, um eine Amazon DynamoDB-Tabelle zu erstellen, in der der Client Ihrer App gespeichert wird. IDs Jeder verbundene Client hat eine eindeutige ID, die wir als Partitionsschlüssel der Tabelle verwenden werden. Diese Vorlage erstellt auch Lambda-Funktionen, die Ihre Client-Verbindungen in DynamoDB aktualisieren und das Senden von Nachrichten an verbundene Clients verarbeiten.

**Um einen Stack zu erstellen CloudFormation**

1. Öffnen Sie die CloudFormation Konsole unter [https://console.aws.amazon.com/cloudformation](https://console.aws.amazon.com/cloudformation/).

1. Wählen Sie **Stack erstellen** und dann **Mit neuen Ressourcen (Standard)** aus.

1. Wählen Sie unter **Vorlage angeben** die Option **Vorlagendatei hochladen** aus.

1. Wählen Sie die Vorlage aus, die Sie heruntergeladen haben.

1. Wählen Sie **Weiter** aus. 

1. Geben Sie für **Stack-Name** die Zeichenfolge **websocket-api-chat-app-tutorial** ein und klicken Sie auf **Weiter**.

1. Wählen Sie in **Stack-Optionen konfigurieren** die Option **Weiter** aus.

1. Bestätigen Sie bei **Capabilities**, dass IAM-Ressourcen in Ihrem Konto erstellt werden CloudFormation können.

1. Wählen Sie **Weiter** und anschließend **Absenden** aus.

CloudFormation stellt die in der Vorlage angegebenen Ressourcen bereit. Die Bereitstellung der Ressourcen kann einige Minuten dauern. Wenn der Status Ihres CloudFormation Stacks **CREATE\$1COMPLETE** lautet, können Sie mit dem nächsten Schritt fortfahren.

## Schritt 2: Erstellen Sie eine API WebSocket
<a name="websocket-api-chat-app-create-api"></a>

Sie erstellen eine WebSocket API, um Client-Verbindungen zu verarbeiten und Anfragen an die Lambda-Funktionen weiterzuleiten, die Sie in Schritt 1 erstellt haben.



**Um eine API zu erstellen WebSocket**

1. Melden Sie sich bei der API Gateway Gateway-Konsole unter [https://console.aws.amazon.com/apigatewayan](https://console.aws.amazon.com/apigateway).

1. Wählen Sie **Create API** (API erstellen) aus. **Wählen Sie dann für **WebSocket API die Option Build** aus.**

1. Geben Sie in **API name** (API-Name) **websocket-chat-app-tutorial** ein.

1. Wählen Sie als **IP-Adresstyp** die Option aus **IPv4**.

1. Geben Sie in **Route selection expression** (Ausdruck für die Routenauswahl) **request.body.action** ein. Der Ausdruck für die Routenauswahl legt die Route fest, die von API Gateway aufgerufen wird, wenn ein Client eine Nachricht sendet.

1. Wählen Sie **Next** (Weiter) aus.

1. Wählen Sie in **Predefined routes** (Vordefinierte Routen) die Optionen **Add \$1connect** (\$1connect hinzufügen), **Add \$1disconnect** (\$1disconnect hinzufügen) und **Add \$1default** (\$1default hinzufügen) aus. Die Routen **\$1connect** und **\$1disconnect** sind spezielle Routen, die API Gateway automatisch aufruft, wenn ein Client eine Verbindung zu einer API herstellt oder trennt. API Gateway ruft die Route `$default` auf, wenn keine anderen Routen mit einer Anforderung übereinstimmen.

1. Wählen Sie in **Custom routes** (Benutzerdefinierte Routen) **Add custom route** (Benutzerdefinierte Route hinzufügen) aus. Geben Sie in **Route key** (Routenschlüssel) **sendmessage** ein. Diese benutzerdefinierte Route verarbeitet Nachrichten, die an verbundene Clients gesendet werden.

1. Wählen Sie **Weiter** aus.

1. Wählen Sie in **Attach integrations** (Integrationen anfügen) für jede Route und jeden **Integration type** (Integrationstyp) „Lambda“ aus.

   Wählen Sie für **Lambda** die entsprechende Lambda-Funktion aus, mit der Sie CloudFormation in Schritt 1 erstellt haben. Der Name jeder Funktion entspricht einer Route. Für die Route **\$1connect** wählen Sie beispielsweise die Funktion mit dem Namen **websocket-chat-app-tutorial-ConnectHandler** aus.

1. Überprüfen Sie die Phase, die API Gateway für Sie erstellt. Standardmäßig erstellt API Gateway den Phasennamen `production` und stellt Ihre API automatisch für diese Phase bereit. Wählen Sie **Weiter** aus.

1. Wählen Sie **Create and deploy** (Erstellen und bereitstellen) aus.

## Schritt 3: Testen Ihrer API
<a name="websocket-api-chat-app-invoke-api"></a>

Als Nächstes testen Sie Ihre API, um sicherzustellen, dass sie korrekt funktioniert. Stellen Sie mit dem Befehl `wscat` eine Verbindung zur API her.

**So rufen Sie die URL für den Aufruf Ihrer API ab**

1. Melden Sie sich bei der API Gateway Gateway-Konsole unter [https://console.aws.amazon.com/apigatewayan](https://console.aws.amazon.com/apigateway).

1. Wählen Sie Ihre API aus.

1. Wählen Sie **Stages** (Phasen) und anschließend **production** (Produktion) aus.

1. **Notieren Sie sich die URL Ihrer API. WebSocket ** Die URL sollte wie `wss://abcdef123.execute-api.us-east-2.amazonaws.com/production` aussehen.

**So stellen Sie eine Verbindung zu Ihrer API her**

1. Stellen Sie mit dem folgenden Befehl eine Verbindung zu Ihrer API her. Wenn Sie die Verbindung zu Ihrer API herstellen, ruft API Gateway die Route `$connect` auf. Bei Aufruf dieser Route wird eine Lambda-Funktion aufgerufen, mit der die Verbindungs-ID in DynamoDB gespeichert wird.

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

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

1. Öffnen Sie ein neues Terminal. Führen Sie den Befehl **wscat** erneut mit den folgenden Parametern aus.

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

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

   Anschließend erhalten Sie zwei verbundene Clients, die Nachrichten austauschen können.

**So senden Sie eine Nachricht**
+  API Gateway legt basierend auf dem Ausdruck für die Routenauswahl Ihrer API fest, welche Route aufgerufen wird. Der Ausdruck für die Routenauswahl Ihrer API ist `$request.body.action`. Daher ruft API Gateway die Route `sendmessage` auf, wenn Sie die folgende Nachricht senden:

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

  Die Lambda-Funktion, die der aufgerufenen Route zugeordnet ist, sammelt den Client IDs von DynamoDB. Anschließend ruft die Funktion die API-Gateway-Management-API auf und sendet die Nachricht an diese Clients. Alle verbundenen Clients erhalten die folgende Nachricht:

  ```
  < hello, everyone!
  ```

**So rufen Sie die Route „\$1default“ Ihrer API auf**
+ API Gateway ruft die Standardroute Ihrer API auf, wenn ein Client eine Nachricht sendet, die nicht mit den von Ihnen definierten Routen übereinstimmt. Die mit der Route `$default` verknüpfte Lambda-Funktion verwendet die API-Gateway-Management-API, um die Client-Daten zur Verbindung zu senden.

  ```
  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="}
  ```

**So trennen Sie die Verbindung zu Ihrer API**
+ Zur Trennung der Verbindung zu Ihrer API drücken Sie **CTRL\$1C**. Wenn ein Client die Verbindung zu Ihrer API trennt, ruft API Gateway die Route `$disconnect` Ihrer API auf. Die Lambda-Integration für die Route `$disconnect` Ihrer API entfernt die Verbindungs-ID aus DynamoDB.

## Schritt 4: Bereinigen
<a name="websocket-api-chat-app-cleanup"></a>

Um unnötige Kosten zu verhindern, löschen Sie die Ressourcen, die Sie im Rahmen dieses Tutorials erstellt haben. Mit den folgenden Schritten werden Ihr Stack und Ihre CloudFormation API gelöscht. WebSocket 

**Um eine WebSocket API zu löschen**

1. Melden Sie sich bei der API Gateway Gateway-Konsole unter [https://console.aws.amazon.com/apigatewayan](https://console.aws.amazon.com/apigateway).

1. Wählen Sie auf der **APIs**Seite Ihre API aus. `websocket-chat-app-tutorial` Wählen Sie **Actions** (Aktionen) und **Delete** (Löschen) aus. Bestätigen Sie anschließend Ihre Auswahl.

**Um einen CloudFormation Stapel zu löschen**

1. Öffnen Sie die CloudFormation Konsole unter [https://console.aws.amazon.com/cloudformation](https://console.aws.amazon.com/cloudformation/).

1. Wählen Sie Ihren CloudFormation Stack aus.

1. Wählen Sie **Löschen** und bestätigen Sie dann Ihre Auswahl.

## Nächste Schritte: Automatisieren Sie mit CloudFormation
<a name="websocket-api-chat-app-next-steps"></a>

Sie können die Erstellung und Bereinigung aller an diesem Tutorial beteiligten AWS Ressourcen automatisieren. Eine CloudFormation Vorlage, die diese API und alle zugehörigen Ressourcen erstellt, finden Sie unter [ws-chat-app.yaml.](samples/ws-chat-app.zip)