setzen

?????? es un lienzo colaborativo multijugador donde colocas mosaicos en un globo que consiste en un millón de 'trixeles'. Es un remix del Experimento de April Fools de Reddit R/Place.

Puede encontrar una demostración en setzen.leifgehrmann.com

Servidor

Setzen utiliza exclusivamente el modelo de aplicación AWS Servidor.

Despliegue

En esta guía usamos AWS Sam CLI para implementar la aplicación.

Instalación del CLI

Amazon tiene su propia guía para instalar el AWS Sam CLI.

Pero si tiene instalado Docker, puede usar Dockerfile sin instalar AWS Sam CLI en su máquina host.

 $ cd server
$ make build

Una vez que la imagen se haya creado, podrá iniciar un shell utilizando los siguientes comandos.

 $ make aws-shell

Cartas credenciales

Una vez que esté en el shell interactivo, deberá configurar AWS-Cli para que tenga las credenciales correctas. Estas instrucciones lo guiarán sobre cómo crear un usuario con acceso programático. Una vez que se implementa la aplicación, se recomienda revocar las credenciales. Básicamente, cualquier persona con estas credenciales podría complacer su cuenta, así que tenga mucho cuidado. (No sé realmente si así es como se supone que debes usar CloudFormation, pero realmente no se siente seguro.)

1. En la consola de AWS, navegue a IAM y cree un nuevo usuario: https://us-ast-1.console.aws.amazon.com/iam/home#/users$new?step=details
2. Para el paso "Detalles":
   • Ingrese un nombre de usuario. (Ejemplo: setzen )
   • Seleccione "Clave de acceso - Acceso programático" como el tipo de acceso AWS.
   • Proceda al paso de "permisos".
3. Para el paso de permisos:
   • Haga clic en "Crear grupo":
     • Ingrese un nombre de grupo. (Ejemplo: Setzen )
     • Según las políticas, consulte las siguientes políticas de permiso:
       • "Iamfulfulaccess"
       • "Amazons3fullaccess"
       • "Amazondynamodbfullaccess"
       • "Amazonapigagatewayadministrator"
       • "AWSCloudFormationFulLaccess"
       • "Awslambda_fullaccess"
     • Haga clic en "Crear grupo".
   • Proceda al paso "Etiquetas".
4. Opcionalmente, agregue etiquetas para ayudar a recordar detalles sobre este usuario de IAM. Proceda al paso de "revisión".
5. Confirme los detalles y proceda al siguiente paso.
6. Asegúrese de copiar la "ID de clave de acceso" y la "clave de acceso secreto" y guárdelo en una ubicación segura. Después de este paso, si ha olvidado copiar las credenciales, deberá eliminar y recrear al usuario.

Con las credenciales, ahora puede configurar ejecutando aws configure y suministrar las credenciales en las indicaciones.

 $ aws configure
AWS Access Key ID [None]: your_access_key_id
AWS Secret Access Key [None]: your_secret_access_key
Default region name [None]: 
Default output format [None]: 

Implementación guiada

Finalmente, puede implementar la aplicación usando sam deploy .

 $ sam deploy --guided

La primera vez que se despliega, se le solicitará algunas configuraciones de implementación.

• Nombre de la pila (ejemplo: setzen-websockets-app )
• Región de AWS
• Parámetros (el nombre de las tablas DynamoDB)
• Confirme los cambios antes de la implementación (se recomienda Y)
• Permitir la creación de roles de Sam CliiM (se recomienda y)
• Deshabilitar la reversión (se recomienda n)
• Guardar argumentos en el archivo de configuración (se recomienda y)
• Archivo de configuración de SAM
• Entorno de configuración de SAM

Una vez completado, debería ver en la salida el WebSocketuri implementado. Mantenga una nota de esto para más adelante al configurar el cliente.

Prueba de WebSocket

 $ cd test-wscast
$ npm install
$ npx wscat -c wss://{YOUR-API-ID}.execute-api.{YOUR-REGION}.amazonaws.com/Prod
> { "action": "sendmessage", "data": {"type": "readChunkInfo" } }
< {"type":"queue","data":{"positions":[],"colorIds":[],"times":[]}}

Cliente

En una consola, cambie al directorio client .

Con NPM instalado, ejecute los siguientes comandos:

Instalar dependencias

 $ npm install

Para configurar

SETZEN_WEBSOCKET_URL es la única variable que debe definirse para que la aplicación funcione. El resto de los detalles son simplemente presentes, pero útiles si desea personalizar la página de información.

 $ export SETZEN_WEBSOCKET_URL='wss://xxxxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/Prod'
$ export SETZEN_WEBAPP_HOST='example.com'
$ export SETZEN_CONTACT_EMAIL='[email protected]'
$ export SETZEN_CONTACT_URL='https://example.com/admin'
$ export SETZEN_CONTACT_ISSUES_URL='https://example.com/setzen/issues'
$ export SETZEN_CONTACT_PROJECT_URL='https://example.com/setzen'

Para ver

 $ npm run build
$ npm run preview

Para desarrollar

 $ npm run dev

Atribución

Código WebSocket originalmente basado en Simple-Websockets-Chat-App.