Tutorial: Entwickeln einer Serverless-Chat-App mit einer WebSocket-API, Lambda und DynamoDB

In diesem Tutorial erstellen Sie eine Serverless-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 AWS CloudFormation-Vorlage zum Erstellen von Lambda-Funktionen zur Bearbeitung von API-Anforderungen sowie eine DynamoDB-Tabelle, in der Ihre Client-IDs gespeichert werden. Anschließend verwenden Sie die API-Gateway-Konsole zur Erstellung einer WebSocket-API, die in Ihre Lambda-Funktionen integriert wird. Zuletzt testen Sie Ihre API, um zu prüfen, ob Nachrichten gesendet und empfangen werden.

Um dieses Tutorial durchzuführen, benötigen Sie ein AWS-Konto und einen AWS Identity and Access Management-Benutzer mit Konsolenzugriff. Weitere Informationen finden Sie unter Voraussetzungen für die ersten Schritte mit API Gateway.

Sie benötigen außerdem wscat, um eine Verbindung zu Ihrer API herzustellen. Weitere Informationen finden Sie unter Verwenden von wscat zum Herstellen einer Verbindung mit einer WebSocket-API und Senden von Nachrichten an sie.

In diesem Tutorial wird AWS Management Console verwendet. Eine AWS CloudFormation-Vorlage, die diese API und alle zugehörigen Ressourcen erstellt, finden Sie unter chat-app.yaml.

Schritt 1: Erstellen von Lambda-Funktionen und einer DynamoDB-Tabelle

Laden Sie die Vorlage für die App-Erstellung fürAWS CloudFormation herunter und entzippen Sie diese. Sie verwenden diese Vorlage zur Erstellung einer Amazon-DynamoDB-Tabelle, in der die Client-IDs Ihrer App gespeichert werden. 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.

So erstellen Sie einen AWS CloudFormation-Stack

1. Öffnen Sie die AWS CloudFormation-Konsole unter https://console.aws.amazon.com/cloudformation.

2. Wählen Sie Create stack (Stack erstellen) und dann With new resources (standard) (Mit neuen Ressourcen (Standard)) aus.

3. Wählen Sie unter Specify template (Vorlage angeben) die Option Upload a template file (Vorlagendatei hochladen)aus.

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

5. Wählen Sie Next.

6. Geben Sie für Stack-Name websocket-api-chat-app-tutorial ein und klicken Sie auf Weiter.

7. Wählen Sie in Configure stack options (Stack-Optionen konfigurieren) die Option Next (Weiter) aus.

8. Bestätigen Sie in Capabilities (Funktionen), dass AWS CloudFormation IAM-Ressourcen in Ihrem Konto erstellen darf.

9. Wählen Sie Create stack (Stack erstellen) aus.

AWS CloudFormation stellt die in der Vorlage angegebenen Ressourcen bereit. Die Bereitstellung der Ressourcen kann einige Minuten dauern. Wenn der Status Ihres AWS CloudFormation-Stacks CREATE_COMPLETE ist, können Sie mit dem nächsten Schritt fortfahren.

Schritt 2: Erstellen einer WebSocket-API

Sie erstellen eine WebSocket-API zur Verarbeitung von Client-Verbindungen und zur Weiterleitung von Anforderungen an die Lambda-Funktionen, die Sie in Schritt 1 erstellt haben.

Erstellen einer WebSocket-API

1. Melden Sie sich bei der API Gateway-Konsole unter https://console.aws.amazon.com/apigateway an.

2. Wählen Sie Create API (API erstellen) aus. Wählen Sie in WebSocket API (WebSocket-API) die Option Build (Entwickeln) aus.

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

4. 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.

5. Wählen Sie Next (Weiter) aus.

6. Wählen Sie in Predefined routes (Vordefinierte Routen) die Optionen Add $connect ($connect hinzufügen), Add $disconnect ($disconnect hinzufügen) und Add $default ($default hinzufügen) aus. Die Routen $connect und $disconnect 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.

7. 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.

8. Wählen Sie Next (Weiter) aus.

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

   Wählen Sie in Lambda die jeweilige Lambda-Funktion aus, die Sie in Schritt 1 mit AWS CloudFormation erstellt haben. Der Name jeder Funktion entspricht einer Route. Für die Route $connect wählen Sie beispielsweise die Funktion mit dem Namen WsChatAppStack-ConnectHandler aus.

10. Ü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 Next (Weiter) aus.

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

Schritt 3: Testen Ihrer API

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-Konsole unter https://console.aws.amazon.com/apigateway an.

2. Wählen Sie Ihre API aus.

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

4. Notieren Sie sich die WebSocket-URL Ihrer API. 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)

2. Ö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 mit der aufgerufenen Route verknüpft ist, erfasst die Client-IDs aus 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 „$default“ 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+C. 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

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 AWS CloudFormation-Stack und Ihre WebSocket-API gelöscht.

So erstellen Sie eine WebSocket-API

1. Melden Sie sich bei der API Gateway-Konsole unter https://console.aws.amazon.com/apigateway an.

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

So löschen Sie einen AWS CloudFormation-Stack

1. Öffnen Sie die AWS CloudFormation-Konsole unter https://console.aws.amazon.com/cloudformation.

2. Wählen Sie Ihren AWS CloudFormation-Stack aus.

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

Nächste Schritte: Automatisieren mit AWS CloudFormation

Sie können die Erstellung und Bereinigung aller AWS-Ressourcen in diesem Tutorial automatisieren. Ein Beispiel für ein AWS CloudFormation-Vorlage, die diese Aktionen automatisiert, finden Sie unter chat-app.yaml.