setzen

??????? é uma tela colaborativa multiplayer, onde você coloca ladrilhos em um globo que consiste em um milhão de 'trixels'. É um remix do April Fools Experiment R/Place do Reddit.

Você pode encontrar uma demonstração em setzen.leifgehrmann.com

Servidor

O Setzen usa exclusivamente o modelo de aplicativo sem servidor da AWS.

Implantação

Neste guia, usamos a AWS SAM CLI para implantar o aplicativo.

Instalando a CLI

A Amazon tem seu próprio guia para instalar a AWS Sam Cli.

Mas se você estiver instalado no Docker, poderá usar o Dockerfile sem instalar a AWS Sam Cli na sua máquina host.

 $ cd server
$ make build

Depois que a imagem for construída, você poderá iniciar um shell usando os seguintes comandos.

 $ make aws-shell

Credenciais

Quando estiver no shell interativo, você precisará configurar o AWS-CLI para que ele tenha as credenciais corretas. Essas instruções o guiarão sobre como criar um usuário com acesso programático. Depois que o aplicativo é implantado, é recomendável revogar as credenciais. Basicamente, qualquer pessoa com essas credenciais pode arrastar sua conta, por isso tenha muito cuidado. (Eu realmente não sei se é assim que você deve usar o CloudFormation, mas realmente não se sente seguro.?)

1. No console da AWS, navegue para iam e crie um novo usuário: https://us-east-1.console.aws.amazon.com/iam/home#/user$new?step=details
2. Para a etapa "Detalhes":
   • Digite um nome de usuário. (Exemplo: setzen )
   • Selecione "Chave de acesso - acesso programático" como o tipo de acesso da AWS.
   • Prossiga para a etapa de "permissões".
3. Para a etapa de permissões:
   • Clique em "Create Group":
     • Digite um nome de grupo. (Exemplo: Setzen )
     • Sob políticas, verifique as seguintes políticas de permissão:
       • "Iamfullaccess"
       • "Amalons3fullaccess"
       • "Amazondynamodbfullaccess"
       • "AmazonapigatewayAdministrator"
       • "AwscloudFormationfullaccess"
       • "Awslambda_fullaccess"
     • Clique em "Criar grupo".
   • Prossiga para a etapa "Tags".
4. Opcionalmente, adicione tags para ajudar a lembrar detalhes sobre esse usuário do IAM. Prossiga para a etapa de "revisão".
5. Confirme os detalhes e prossiga para a próxima etapa.
6. Certifique -se de copiar o "ID da chave de acesso" e a "chave de acesso secreto" e armazená -la em um local seguro. Após esta etapa, se você esqueceu de copiar as credenciais, precisará excluir e recriar o usuário.

Com as credenciais, agora você pode configurar a execução aws configure e fornecendo as credenciais nos avisos.

 $ 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]: 

Implantação guiada

Por fim, você pode implantar o aplicativo usando sam deploy .

 $ sam deploy --guided

Na primeira vez em que você implantar, você será solicitado a algumas configurações de implantação.

• Nome da pilha (Exemplo: setzen-websockets-app )
• Região da AWS
• Parâmetros (o nome das tabelas do DynamoDB)
• Confirme as alterações antes da implantação (y é recomendado)
• Permitir que a criação de papéis de Sam CLI IAM (Y é recomendada)
• Desativar reversão (n é recomendado)
• Salvar argumentos para o arquivo de configuração (y é recomendado)
• Arquivo de configuração SAM
• Ambiente de configuração SAM

Uma vez concluído, você deve ver na saída o WebSockuri implantado. Mantenha uma nota disso mais tarde ao configurar o cliente.

Testando o 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

Em um console, altere para o diretório client .

Com o NPM instalado, execute os seguintes comandos:

Instalar dependências

 $ npm install

Para configurar

SETZEN_WEBSOCKET_URL é a única variável que deve ser definida para que o aplicativo funcione. O restante dos detalhes é meramente apresentador, mas útil se você deseja personalizar a página de informações.

 $ 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 desenvolver

 $ npm run dev

Atribuição

Código WebSocket originalmente baseado em simples websockets-chat-app.