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。