setzen

???????是多人合作的画布，您将瓷砖放在一个由100万个“ Trixels”组成的地球仪上。这是Reddit的April Fools实验R/Place的混音。

您可以在setzen.leifgehrmann.com上找到演示

服务器

Setzen专门使用AWS无服务器应用程序模型。

部署

在本指南中，我们使用AWS SAM CLI部署应用程序。

安装CLI

亚马逊有自己的指南，用于安装AWS SAM CLI。

但是，如果您安装了Docker，则可以使用Dockerfile ，而无需在主机机上安装AWS SAM CLI。

 $ cd server
$ make build

图像构建后，您将能够使用以下命令启动外壳。

 $ make aws-shell

证书

一旦进入交互式外壳，就需要配置AWS-CLI，以便具有正确的凭据。这些说明将指导您如何使用程序化访问创建用户。部署应用程序后，建议撤销凭据。基本上，拥有这些证书的任何人都可以核定您的帐户，因此请非常小心。 （我不知道这是否是您应该如何使用云形式的方式，但确实不安全。？）

1. 在AWS控制台中，导航到IAM并创建一个新用户：https：//us-east-1.console.aws.amazon.com/iam/home#/usersqurejestep=details
2. 对于“详细信息”步骤：
   • 输入用户名。 （示例： setzen ）
   • 选择“访问密钥 - 程序化访问”作为AWS访问类型。
   • 继续“许可”步骤。
3. 对于权限步骤：
   • 单击“创建组”：
     • 输入组名称。 （示例： Setzen ）
     • 根据政策，请检查以下许可政策：
       • “ iamfullaccess”
       • “ Amazons3fullaccess”
       • “ Amazondynamodbfulllaccess”
       • “ AmazonApigateWayAadministrator”
       • “ awscloudformationfullaccess”
       • “ awslambda_fullaccess”
     • 单击“创建组”。
   • 继续执行“标签”步骤。
4. （可选）添加标签以帮助记住有关此IAM用户的详细信息。继续执行“审查”步骤。
5. 确认详细信息，然后继续下一步。
6. 确保复制“访问密钥ID”和“秘密访问密钥”，然后将其存储在安全的位置中。在此步骤之后，如果您忘记了复制凭据，则需要删除和重新创建用户。

使用凭据，您现在可以通过运行aws configure并在提示中提供凭据来配置。

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

指导部署

最后，您可以使用sam deploy部署应用程序。

 $ sam deploy --guided

第一次部署时，将提示您进行一些部署配置。

• 堆栈名称（示例： setzen-websockets-app ）
• AWS地区
• 参数（DynamoDB表的名称）
• 在部署前确认更改（建议y）
• 允许Sam Cli iam创作（建议Y）
• 禁用回滚（建议n）
• 将参数保存到配置文件（建议y）
• SAM配置文件
• SAM配置环境

完成后，您应该在输出中看到已部署的WebSocketuri。请记下这一点，以供以后设置客户端时。

测试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":[]}}

客户

在控制台中，更改为client端目录。

安装了NPM，运行以下命令：

安装依赖项

 $ npm install

配置

SETZEN_WEBSOCKET_URL是唯一为应用程序功能定义的变量。其余的详细信息仅仅是介绍，但是如果您想自定义信息页面，则有用。

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

查看

 $ npm run build
$ npm run preview

发展

 $ npm run dev

归因

WebSocket代码最初基于简单的webockets-chat-app。