# Tutorial: Creación de una aplicación de chat de WebSocket con una API de WebSocket, Lambda y DynamoDB
<a name="websocket-api-chat-app"></a>

En este tutorial, creará una aplicación de chat sin servidor con una API de WebSocket. Con una API de WebSocket, puede admitir la comunicación bidireccional entre clientes. Los clientes pueden recibir mensajes sin tener que sondear para comprobar si hay actualizaciones.

Se tardan aproximadamente 30 minutos en completar este tutorial. En primer lugar, usará una plantilla de CloudFormation para crear funciones Lambda que gestionarán las solicitudes de API, así como una tabla de DynamoDB que almacena los ID de cliente. A continuación, utilizará la consola de API Gateway para crear una API de WebSocket que se integra con las funciones Lambda. Por último, probarás la API para verificar que se envían y reciben mensajes.

![\[Descripción general de la arquitectura de la API creada en este tutorial.\]](http://docs.aws.amazon.com/es_es/apigateway/latest/developerguide/images/ws-chat-app.png)


Para completar este tutorial, necesita una cuenta de AWS y un usuario de AWS Identity and Access Management con acceso a la consola. Para obtener más información, consulte [Configuración para usar API Gateway](setting-up.md).

También es necesario `wscat` para conectarse a la API. Para obtener más información, consulte [Utilice `wscat` para conectarse y enviar mensajes a una API de WebSocket](apigateway-how-to-call-websocket-api-wscat.md).

**Topics**
+ [Paso 1: Crear funciones Lambda y una tabla de DynamoDB](#websocket-api-chat-app-create-dependencies)
+ [Paso 2: Crear una API de WebSocket](#websocket-api-chat-app-create-api)
+ [Paso 3: probar la API](#websocket-api-chat-app-invoke-api)
+ [Paso 4: Limpiar](#websocket-api-chat-app-cleanup)
+ [Próximos pasos: automatice con CloudFormation](#websocket-api-chat-app-next-steps)

## Paso 1: Crear funciones Lambda y una tabla de DynamoDB
<a name="websocket-api-chat-app-create-dependencies"></a>

Descargue y descomprima [la plantilla de creación de aplicaciones para CloudFormation](samples/ws-chat-app-starter.zip). Utilizará esta plantilla para crear una tabla de Amazon DynamoDB para almacenar los ID de cliente de la aplicación. Cada cliente conectado tiene un ID único que utilizaremos como clave de partición de la tabla. Esta plantilla también crea funciones Lambda que actualizan las conexiones de clientes en DynamoDB y gestionan el envío de mensajes a los clientes conectados.

**Para crear una pila de CloudFormation**

1. Abra la consola de CloudFormation en [https://console.aws.amazon.com/cloudformation](https://console.aws.amazon.com/cloudformation/).

1. Seleccione **Create stack (Crear pila)** y, a continuación, seleccione **With new resources (standard) (Con nuevos recursos [estándar])**.

1. En **Specify template (Especificar plantilla)**, elija **Upload a template file (Cargar un archivo de plantilla)**.

1. Seleccione la plantilla que ha descargado.

1. Elija **Next (Siguiente)**. 

1. En **Stack name (Nombre de pila)**, escriba **websocket-api-chat-app-tutorial** y, a continuación, elija **Next (Siguiente)**.

1. En **Configure stack options (Configurar opciones de pila)**, elija **Next (Siguiente)**.

1. Para **Capabilities** (Capacidades), sepa que CloudFormation puede crear recursos de IAM en su cuenta.

1. Elija **Siguiente** y, a continuación, elija **Enviar**.

CloudFormation aprovisiona los recursos especificados en la plantilla. Puede tardar varios minutos en finalizar el aprovisionamiento de los recursos. Cuando el estado de la pila de CloudFormation sea **CREATE\$1COMPLETE**, estará listo para continuar con el paso siguiente.

## Paso 2: Crear una API de WebSocket
<a name="websocket-api-chat-app-create-api"></a>

Creará una API de WebSocket para gestionar las conexiones de clientes y enrutar solicitudes a las funciones Lambda que creó en el paso 1.



**Para crear una API de WebSocket**

1. Inicie sesión en la consola de API Gateway, en [https://console.aws.amazon.com/apigateway](https://console.aws.amazon.com/apigateway).

1. Seleccione **Crear API**. En **WebSocket API** (API de WebSocket), elija **Build** (Crear).

1. En **API name (Nombre de la API)**, escriba**websocket-chat-app-tutorial**.

1. En **Tipo de dirección IP**, seleccione **IPv4**.

1. Para **Route selection expression** (Expresión de selección de ruta), ingrese **request.body.action**. La expresión de selección de ruta determina la ruta que API Gateway invoca cuando un cliente envía un mensaje.

1. Elija **Siguiente**.

1. Para **Predefined routes** (Rutas predefinidas), elija **Add \$1connect** (Agregar \$1connect), **Add \$1disconnect** (Agregar \$1disconnect) y **Add \$1default** (Agregar \$1default). Las rutas **\$1connect** y **\$1disconnect** son rutas especiales que API Gateway invoca automáticamente cuando un cliente se conecta o se desconecta de una API. API Gateway invoca la ruta `$default` cuando ninguna otra ruta coincide con una solicitud.

1. Para **Custom routes** (Rutas personalizadas), elija **Add custom route** (Agregar ruta personalizada). Para **Route key** (Clave de ruta), ingrese **sendmessage**. Esta ruta personalizada gestiona los mensajes que se envían a los clientes conectados.

1. Elija **Siguiente**.

1. En **Attach integrations** (Adjuntar integraciones), para cada ruta e **Integration type** (Tipo de integración), elija Lambda.

   Para **Lambda**, elija la función Lambda correspondiente que creó con CloudFormation en el paso 1. El nombre de cada función coincide con una ruta. Por ejemplo, para la ruta **\$1connect**, elija la función denominada **websocket-chat-app-tutorial-ConnectHandler**.

1. Revise la etapa que API Gateway le crea. De forma predeterminada, API Gateway crea un nombre de etapa `production` e implementa automáticamente la API en esa fase. Elija **Next** (Siguiente).

1. Elija **Create and deploy** (Crear e implementar).

## Paso 3: probar la API
<a name="websocket-api-chat-app-invoke-api"></a>

A continuación, pruebe la API para asegurarse de que funciona correctamente. Utilice el comando `wscat` para conectarse a la API.

**Para obtener la URL para invocar la API**

1. Inicie sesión en la consola de API Gateway en [https://console.aws.amazon.com/apigateway](https://console.aws.amazon.com/apigateway).

1. Elija la API.

1. Elija **Stages** (Etapas) y, a continuación, elija **production** (producción).

1. Tenga en cuenta la **WebSocket URL** (URL de WebSocket) de la API. La dirección URL debe tener un aspecto similar al siguiente: `wss://abcdef123.execute-api.us-east-2.amazonaws.com/production`.

**Para conectarse a la API**

1. Para conectarse a la API, utilice el siguiente comando. Cuando se conecte a la API, API Gateway invoca la ruta `$connect`. Cuando se invoca esta ruta, llama a una función Lambda que almacena el ID de conexión en DynamoDB.

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

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

1. Abra un nuevo terminal y ejecute el comando **wscat** de nuevo con los siguientes parámetros.

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

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

   Esto le proporciona dos clientes conectados que pueden intercambiar mensajes.

**Cómo enviar un mensaje**
+  API Gateway determina qué ruta invocar en función de la expresión de selección de rutas de la API. La expresión de selección de rutas de la API es `$request.body.action`. Como resultado, API Gateway invoca la ruta `sendmessage` cuando envía el siguiente mensaje:

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

  La función Lambda asociada a la ruta invocada recopila los ID de cliente de DynamoDB. A continuación, la función llama a la API de administración de API Gateway y envía el mensaje a esos clientes. Todos los clientes conectados reciben el siguiente mensaje:

  ```
  < hello, everyone!
  ```

**Para invocar la ruta \$1default de la API**
+ API Gateway invoca la ruta predeterminada de la API cuando un cliente envía un mensaje que no coincide con las rutas definidas. La función Lambda asociada a la ruta `$default` utiliza la API de administración de API Gateway para enviar información al cliente sobre la conexión.

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

**Para desconectarse de la API**
+ Pulse **CTRL\$1C** para desconectarse de la API. Cuando un cliente se desconecta de la API, API Gateway invoca la ruta `$disconnect` de la API. La integración de Lambda para la ruta `$disconnect` de la API elimina el ID de conexión de DynamoDB.

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

Para evitar costos innecesarios, elimine los recursos creados como parte de este tutorial Los siguientes pasos eliminan la pila y API de WebSocket de CloudFormation.

**Para eliminar una API de WebSocket**

1. Inicie sesión en la consola de API Gateway, en [https://console.aws.amazon.com/apigateway](https://console.aws.amazon.com/apigateway).

1. En la página de las **API**, seleccione la API `websocket-chat-app-tutorial`. Elija **Action (Acciones)**, elija **Delete (Eliminar)**y, a continuación, confirme su elección.

**Para eliminar una pila de CloudFormation**

1. Abra la consola de CloudFormation en [https://console.aws.amazon.com/cloudformation](https://console.aws.amazon.com/cloudformation/).

1. Seleccione su pila de CloudFormation.

1. Elija **Delete (Eliminar)** y, a continuación, confirme su elección.

## Próximos pasos: automatice con CloudFormation
<a name="websocket-api-chat-app-next-steps"></a>

Puede automatizar la creación y la limpieza de todos los recursos de AWS involucrados en este tutorial. Para obtener una plantilla de CloudFormation que cree esta API y todos los recursos relacionados, consulte [ws-chat-app.yaml](samples/ws-chat-app.zip).