├── .eslintrc.yml ├── .gitignore ├── LICENSE.md ├── Makefile ├── README.md ├── deps └── dynamodb-tables │ ├── Dockerfile │ └── tables.sh ├── docker-compose.yml ├── docs ├── README.md ├── architecture.png ├── architecture.pptx └── screenshot.png ├── infrastructure ├── chat-service.yml ├── cloudfront.yml ├── cluster.yml ├── message-index-drop.yml ├── message-indexer.yml ├── message-search.yml ├── resources.yml ├── teardown.sh └── web.yml ├── package-lock.json ├── package.json └── services ├── message-index-drop ├── app.js ├── package-lock.json └── package.json ├── message-indexer ├── app.js ├── package-lock.json └── package.json ├── message-search ├── app.js ├── package-lock.json └── package.json ├── socket ├── .dockerignore ├── Dockerfile ├── index.js ├── lib │ ├── config.js │ ├── db.js │ ├── dynamodb-client.js │ ├── dynamodb-doc-client.js │ ├── message.js │ ├── presence.js │ ├── redis.js │ └── user.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── static │ │ ├── images │ │ ├── ecs.svg │ │ ├── fargate.svg │ │ ├── lambda.svg │ │ ├── search.svg │ │ └── serverless.svg │ │ ├── main.js │ │ ├── style.css │ │ ├── vue-virtual-scroll.js │ │ ├── vue.js │ │ └── vue.min.js └── server.js ├── test-suite ├── .dockerignore ├── Dockerfile ├── package.json └── test │ ├── config.js │ └── core-api.js └── web ├── Dockerfile └── public ├── favicon.ico ├── index.html └── static ├── images ├── ecs.svg ├── fargate.svg ├── lambda.svg ├── search.svg └── serverless.svg ├── main.js ├── style.css ├── vue-virtual-scroll.js ├── vue.js └── vue.min.js /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | env: 2 | browser: true 3 | es2021: true 4 | extends: standard-with-typescript 5 | overrides: [] 6 | parserOptions: 7 | ecmaVersion: latest 8 | sourceType: module 9 | rules: {} 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Nathan Peck 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | run: 2 | docker compose up -d 3 | 4 | build: 5 | docker compose build client 6 | docker compose up --no-deps -d client 7 | 8 | test: 9 | # Rebuild, recreate, and restart all the application containers 10 | docker compose build client test 11 | docker compose up -d --no-build --remove-orphans --no-deps client 12 | # Run the test container in the foreground so we get pretty color output in the terminal 13 | docker compose run --no-deps test 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fargate.chat 2 | 3 | [![app](./docs/screenshot.png)](https://fargate.chat) 4 | 5 | A Slack-like chat app built with [Node.js](https://nodejs.org/en/) and [Vue.js](https://vuejs.org/) and deployed using Amazon Web Services. 6 | 7 | This application uses Docker containers in [AWS Fargate](https://aws.amazon.com/fargate/), and [AWS App Runner](https://aws.amazon.com/apprunner/), as well as [AWS Lambda](https://aws.amazon.com/lambda/) functions. 8 | 9 | A sample version of the app is hosted at: https://fargate.chat 10 | 11 | ### Architecture features 12 | 13 | - No EC2 instances. One of the goals of this application architecture is that it is very hands off, nothing to manage or update. Serverless features are turned on wherever possible. 14 | - Fully defined as infrastructure as code, using [AWS CloudFormation](https://aws.amazon.com/cloudformation/) to create all the application resources. 15 | - Included `docker-compose.yml` which stands up a local copy of DynamoDB, and local copy of the socket.io chat server. This allows you to develop locally and see the application at `http://localhost:3000`. The only feature that does not run locally, and is just simulated is the full text chat search. 16 | - Integration test suite container that you can run against a copy of the application, either locally or remotely. 17 | 18 | Read more about [the architecture and services in use](/docs). 19 | 20 | ### Application features 21 | 22 | - User account functionality, including anonymous accounts 23 | - Real time chat message sending over WebSocket protocol, with persistance in DynamoDB 24 | - Live user presence, including announcments when users join or leave 25 | - Unread message indicator 26 | - Typing indicator, including support for multiple typers at once. 27 | - Full text search for chat messages, powered by Amazon OpenSearch Serverless 28 | - Infinite virtual DOM scrolling, for performant feeling even when many thousands of messages have been sent in a room. 29 | 30 | ### Things to note in this app 31 | 32 | - Working configuration for routing WebSocket connections with Socket.io through CloudFront 33 | - Example of how to setup OpenSearch access policies for a Lambda function 34 | - Horizontally scalable Socket.io using the Redis adaptor and Amazon ElastiCache 35 | 36 | ### Setup instructions 37 | 38 | Install if not already installed: 39 | 40 | * Docker: https://docs.docker.com/get-docker/ 41 | * AWS SAM CLI: https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/install-sam-cli.html 42 | * Install Node and NPM if not present 43 | 44 | ``` 45 | # Setup some env variables for later 46 | # Can try other regions as long as all required services are in that region 47 | export AWS_REGION=us-east-2 48 | export AWS_ACCOUNT=$(aws sts get-caller-identity --query Account --output text) 49 | 50 | # Install the dependencies off of NPM 51 | (cd services/message-indexer; npm install) 52 | (cd services/message-search; npm install) 53 | 54 | # Setup the base VPC and networking stuff. 55 | sam deploy \ 56 | --region $AWS_REGION \ 57 | --template-file infrastructure/cluster.yml \ 58 | --stack-name chat-cluster \ 59 | --capabilities CAPABILITY_IAM 60 | 61 | # The shared resources like DynamoDB table and OpenSearch Serverless 62 | sam deploy \ 63 | --region $AWS_REGION \ 64 | --template-file infrastructure/resources.yml \ 65 | --stack-name chat-resources \ 66 | --capabilities CAPABILITY_IAM 67 | 68 | # Create an ECR repository to host the container image 69 | aws ecr create-repository \ 70 | --region $AWS_REGION \ 71 | --repository-name fargate-chat 72 | 73 | # Login to the ECR repository 74 | aws ecr get-login-password --region $AWS_REGION | docker login --username AWS --password-stdin $AWS_ACCOUNT.dkr.ecr.$AWS_REGION.amazonaws.com 75 | 76 | # Build the Docker image 77 | docker build -t fargate-chat ./services/socket 78 | 79 | # Upload the built container image to the repository 80 | docker tag fargate-chat:latest $AWS_ACCOUNT.dkr.ecr.$AWS_REGION.amazonaws.com/fargate-chat:latest 81 | docker push $AWS_ACCOUNT.dkr.ecr.$AWS_REGION.amazonaws.com/fargate-chat:latest 82 | 83 | # Start up the container that runs in AWS Fargate 84 | sam deploy \ 85 | --region $AWS_REGION \ 86 | --template-file infrastructure/chat-service.yml \ 87 | --stack-name chat-service \ 88 | --capabilities CAPABILITY_IAM \ 89 | --parameter-overrides ImageUrl=$AWS_ACCOUNT.dkr.ecr.$AWS_REGION.amazonaws.com/fargate-chat:latest 90 | 91 | # Deploy the component which indexes sent chat messages 92 | sam deploy \ 93 | --region $AWS_REGION \ 94 | --template-file infrastructure/message-indexer.yml \ 95 | --stack-name chat-message-indexer \ 96 | --resolve-s3 \ 97 | --capabilities CAPABILITY_IAM 98 | 99 | # Deploy the component which provides search autocomplete and API Gateway 100 | sam deploy \ 101 | --region $AWS_REGION \ 102 | --template-file infrastructure/message-search.yml \ 103 | --stack-name chat-message-search \ 104 | --resolve-s3 \ 105 | --capabilities CAPABILITY_IAM 106 | 107 | # Build the component which hosts static web content 108 | aws ecr create-repository \ 109 | --region $AWS_REGION \ 110 | --repository-name apprunner-web 111 | 112 | # Build the Docker image 113 | docker build -t apprunner-web ./services/web 114 | 115 | # Upload the built container image to the repository 116 | docker tag apprunner-web:latest $AWS_ACCOUNT.dkr.ecr.$AWS_REGION.amazonaws.com/apprunner-web:latest 117 | docker push $AWS_ACCOUNT.dkr.ecr.$AWS_REGION.amazonaws.com/apprunner-web:latest 118 | 119 | # Launch the web container inside of App Runner 120 | sam deploy \ 121 | --region $AWS_REGION \ 122 | --template-file infrastructure/web.yml \ 123 | --stack-name chat-web \ 124 | --resolve-s3 \ 125 | --parameter-overrides ImageUrl=$AWS_ACCOUNT.dkr.ecr.$AWS_REGION.amazonaws.com/apprunner-web:latest \ 126 | --capabilities CAPABILITY_IAM 127 | 128 | # Deploy CloudFront distribution which ties main app and search endpoint together on one domain 129 | sam deploy \ 130 | --region $AWS_REGION \ 131 | --template-file infrastructure/cloudfront.yml \ 132 | --stack-name chat-cloudfront \ 133 | --resolve-s3 \ 134 | --capabilities CAPABILITY_IAM 135 | 136 | # Get the application URL to view it 137 | aws cloudformation describe-stacks \ 138 | --stack-name chat-cloudfront \ 139 | --query "Stacks[0].Outputs[?OutputKey==\`PublicURL\`].OutputValue" \ 140 | --output text 141 | 142 | # Open the URL in the browser window 143 | 144 | ``` 145 | 146 | ## Project layout 147 | 148 | ``` 149 | /deps - Folder used only for local development purposes 150 | /infrastructure - CloudFormation templates used for deployment to AWS 151 | /services - Independent code components that make up the app 152 | /socket - The core Node.js socket.io app, which runs in AWS Fargate 153 | /message-indexer - Lambda function which triggers on DynamoDB updates, to index chat messages 154 | /message-search - Lamdba function triggered by API Gateway, answers search queries 155 | /test-suite - Container used for local tests, runs integ tests against socket service 156 | /message-index-drop - Admin Lambda function which drops the OpenSearch Serverless collection 157 | /web - Frontend service which serves the static web files in production 158 | ``` 159 | 160 | ## Admin and dev actions 161 | 162 | If you want to drop the search index (will be recreated next time you send a message, though older messages will no longer be remembered) 163 | 164 | ``` 165 | sam deploy \ 166 | --region $AWS_REGION \ 167 | --template-file infrastructure/message-index-drop.yml \ 168 | --stack-name chat-index-drop \ 169 | --resolve-s3 \ 170 | --capabilities CAPABILITY_IAM 171 | ``` 172 | 173 | Run a local copy of the socket app for testing: 174 | 175 | ``` 176 | make run # Standup local DynamoDB and local stack 177 | make test # Rebuild and run tests locally 178 | 179 | # Open localhost:3000 in browser to view app 180 | ``` 181 | 182 | Launch the public facing CloudFormation stack with a custom domain name and SSL cert: 183 | 184 | ``` 185 | sam deploy \ 186 | --region $AWS_REGION \ 187 | --template-file infrastructure/cloudfront.yml \ 188 | --stack-name chat-cloudfront \ 189 | --resolve-s3 \ 190 | --capabilities CAPABILITY_IAM \ 191 | --parameter-overrides DomainName=fargate.chat CertArn=arn:aws:acm:us-east-1:228578805541:certificate/45b4037a-2257-48ff-b3ae-b8e3e0523e85 192 | ``` -------------------------------------------------------------------------------- /deps/dynamodb-tables/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM alpine:3.6 2 | RUN apk -v --update add \ 3 | python \ 4 | py-pip \ 5 | groff \ 6 | less \ 7 | mailcap \ 8 | && \ 9 | pip install --upgrade awscli==1.14.5 s3cmd==2.0.1 python-magic && \ 10 | apk -v --purge del py-pip && \ 11 | rm /var/cache/apk/* 12 | VOLUME /root/.aws 13 | VOLUME /project 14 | WORKDIR /project 15 | ADD tables.sh . 16 | ENTRYPOINT ["sh", "tables.sh"] 17 | -------------------------------------------------------------------------------- /deps/dynamodb-tables/tables.sh: -------------------------------------------------------------------------------- 1 | # Local Users table 2 | RESULT=$(aws dynamodb describe-table \ 3 | --region us-east-1 \ 4 | --endpoint-url $DYNAMODB_ENDPOINT \ 5 | --table-name test_Users) 6 | CODE=$? 7 | if [ $? -eq 0 ]; then 8 | aws dynamodb delete-table \ 9 | --region us-east-1 \ 10 | --endpoint-url $DYNAMODB_ENDPOINT \ 11 | --table-name test_Users 12 | fi 13 | aws dynamodb create-table \ 14 | --region us-east-1 \ 15 | --endpoint-url $DYNAMODB_ENDPOINT \ 16 | --table-name test_Users \ 17 | --key-schema AttributeName=username,KeyType=HASH \ 18 | --attribute-definitions AttributeName=username,AttributeType=S \ 19 | --provisioned-throughput ReadCapacityUnits=10,WriteCapacityUnits=10 20 | 21 | # Local Messages table 22 | RESULT=$(aws dynamodb describe-table \ 23 | --region us-east-1 \ 24 | --endpoint-url $DYNAMODB_ENDPOINT \ 25 | --table-name test_Messages) 26 | CODE=$? 27 | if [ $? -eq 0 ]; then 28 | aws dynamodb delete-table \ 29 | --region us-east-1 \ 30 | --endpoint-url $DYNAMODB_ENDPOINT \ 31 | --table-name test_Messages 32 | fi 33 | aws dynamodb create-table \ 34 | --region us-east-1 \ 35 | --endpoint-url $DYNAMODB_ENDPOINT \ 36 | --table-name test_Messages \ 37 | --key-schema AttributeName=room,KeyType=HASH AttributeName=message,KeyType=RANGE \ 38 | --attribute-definitions AttributeName=room,AttributeType=S AttributeName=message,AttributeType=S \ 39 | --provisioned-throughput ReadCapacityUnits=10,WriteCapacityUnits=10 40 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "3" 2 | networks: 3 | chat: 4 | 5 | services: 6 | # Launch the Redis used for syncing messages between copies of the client app 7 | redis: 8 | image: redis 9 | networks: 10 | - chat 11 | ports: 12 | - 6379:6379 13 | 14 | # Launch a local version of DynamoDB 15 | dynamodb-local: 16 | networks: 17 | - chat 18 | command: "-jar DynamoDBLocal.jar -inMemory -sharedDb -delayTransientStatuses 0" 19 | image: public.ecr.aws/aws-dynamodb-local/aws-dynamodb-local:1.19.0 20 | ports: 21 | - 8000:8000 22 | 23 | # Ephemeral container used for creating the tables in DynamoDB 24 | dynamodb-tables: 25 | depends_on: 26 | - dynamodb-local 27 | networks: 28 | - chat 29 | build: ./deps/dynamodb-tables 30 | environment: 31 | DYNAMODB_ENDPOINT: http://dynamodb-local:8000 32 | AWS_ACCESS_KEY_ID: test 33 | AWS_SECRET_ACCESS_KEY: test 34 | 35 | # The actual client application 36 | client: 37 | depends_on: 38 | - redis 39 | - dynamodb-tables 40 | networks: 41 | - chat 42 | build: ./services/socket 43 | environment: 44 | LOCAL: "true" 45 | ENV_NAME: test 46 | REDIS_ENDPOINT: redis://redis:6379 47 | DYNAMODB_ENDPOINT: http://dynamodb-local:8000 48 | USER_TABLE: test_Users 49 | MESSAGE_TABLE: test_Messages 50 | AWS_REGION: test 51 | AWS_ACCESS_KEY_ID: test 52 | AWS_SECRET_ACCESS_KEY: test 53 | ports: 54 | - 3000:3000 55 | 56 | web: 57 | networks: 58 | - chat 59 | build: ./services/web 60 | ports: 61 | - 3001:80 62 | 63 | # The test suite 64 | test: 65 | depends_on: 66 | - client 67 | networks: 68 | - chat 69 | build: ./services/test-suite 70 | environment: 71 | SELF_URL: http://client:3000 72 | WS_URL: ws://client:3000 73 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Architecture 2 | 3 | ![app](./architecture.png) 4 | 5 | This is a chat application that demonstrates the usage of the following AWS compute services: 6 | 7 | - AWS App Runner 8 | - AWS Elastic Container Service + AWS Fargate 9 | - AWS Lambda 10 | 11 | It also makes use of the following AWS services: 12 | 13 | - Amazon DynamoDB 14 | - Amazon OpenSearch Serverless 15 | - Amazon ElastiCache 16 | - Amazon API Gateway 17 | - Application Load Balancer 18 | - AWS CloudFront 19 | 20 | 21 | ### AWS App Runner 22 | 23 | App Runner is being used to host the static web content for the frontend of the website. Although this single page app does not currently do an server side rendering, this is place where server side rendering would occur. 24 | 25 | ### AWS Elastic Container Service + AWS Fargate 26 | 27 | The core chat feature is powered by a WebSocket application. This 28 | application is hosted in AWS Fargate, and orchestrated by AWS Elastic Container Service. Ingress to the socket application is via an Application Load Balancer. The core socket application stores durable data like user accounts and chat messages in Amazon DynamoDB. It also syncs state between the server containers using ElastiCache pubsub. This includes storing ephemeral data like chat presence and typing status. 29 | 30 | ### AWS Lambda 31 | 32 | Lambda functions are used as an event driven workflow for indexing search messages. As messages are stored in the DynamoDB table, it triggers a DynamoDB Stream event which runs an asynchronous Lambda function which adds the chat message to a search index in Amazon OpenSearch Serverless. Additionally, there is a search endpoint powered by Amazon API Gateway. 33 | 34 | ### Amazon DynamoDB 35 | 36 | This is the main durable store of state for the application. It stores the user accounts and chat messages that are sent. It also provides an event stream which triggers the search indexing Lambda fucntion when chat messages are sent. 37 | 38 | ### Amazon OpenSearch Serverless 39 | 40 | OpenSearch Serverless is an open source, distributed search and analytics suite derived from Elasticsearch. It is used to index all the chat messages to power the search feature of the application. 41 | 42 | ### Amazon ElastiCache 43 | 44 | ElastiCache provides a Redis cluster that is used in pubsub mode for syncing chat messages from one websocket server to another. It also serves as an in-memory data store for chat presence and typing status. 45 | 46 | ### Amazon API Gateway 47 | 48 | This is a serverless ingress for the search endpoint. When a search query is sent it will charge per request sent, but have no overhead cost otherwise. 49 | 50 | ### Application Load Balancer 51 | 52 | The Application Load Balancer is used to distribute incoming requests across the available WebSocket servers. It maintains persistant bidirectional WebSocket connection so that chat clients can push chat messages to the server, and the server can push chat messages out to the clients as they arrive. 53 | 54 | ### AWS CloudFront 55 | 56 | CloudFront is used as the front facing content delivery network for all three components. It routes request for static web content to the App Runner container, WebSocket requests to the AWS Fargate hosted container, and search queries to the API Gateway for the Lambda powered search function. -------------------------------------------------------------------------------- /docs/architecture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathanpeck/socket.io-chat-fargate/c539fd0b1d3cc469a83a6db304716cef97201245/docs/architecture.png -------------------------------------------------------------------------------- /docs/architecture.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathanpeck/socket.io-chat-fargate/c539fd0b1d3cc469a83a6db304716cef97201245/docs/architecture.pptx -------------------------------------------------------------------------------- /docs/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathanpeck/socket.io-chat-fargate/c539fd0b1d3cc469a83a6db304716cef97201245/docs/screenshot.png -------------------------------------------------------------------------------- /infrastructure/chat-service.yml: -------------------------------------------------------------------------------- 1 | AWSTemplateFormatVersion: '2010-09-09' 2 | Description: Socket.io chat service 3 | Parameters: 4 | EnvironmentName: 5 | Type: String 6 | Default: production 7 | Description: A name for the environment that this cloudformation will be part of. 8 | Used to locate other resources in the same environment. 9 | ServiceName: 10 | Type: String 11 | Default: chat 12 | Description: A name for the service 13 | ImageUrl: 14 | Type: String 15 | Default: nginx 16 | Description: The url of a docker image that contains the application process that 17 | will handle the traffic for this service 18 | ContainerPort: 19 | Type: Number 20 | Default: 3000 21 | Description: What port number the application inside the docker container is binding to 22 | ContainerCpu: 23 | Type: Number 24 | Default: 1024 25 | Description: How much CPU to give the container. 1024 is 1 CPU 26 | ContainerMemory: 27 | Type: Number 28 | Default: 2048 29 | Description: How much memory in megabytes to give the container 30 | Path: 31 | Type: String 32 | Default: "*" 33 | Description: A path on the public load balancer that this service 34 | should be connected to. Use * to send all load balancer 35 | traffic to this service. 36 | Priority: 37 | Type: Number 38 | Default: 1 39 | Description: The priority for the routing rule added to the load balancer. 40 | This only applies if your have multiple services which have been 41 | assigned to different paths on the load balancer. 42 | DesiredCount: 43 | Type: Number 44 | Default: 2 45 | Description: How many copies of the service task to run 46 | 47 | Resources: 48 | # A log group for storing the container logs for this service 49 | LogGroup: 50 | Type: AWS::Logs::LogGroup 51 | Properties: 52 | LogGroupName: !Sub "${EnvironmentName}-service-${ServiceName}" 53 | 54 | # The task definition. This is a simple metadata description of what 55 | # container to run, and what resource requirements it has. 56 | TaskDefinition: 57 | Type: AWS::ECS::TaskDefinition 58 | Properties: 59 | Family: !Ref 'ServiceName' 60 | Cpu: !Ref 'ContainerCpu' 61 | Memory: !Ref 'ContainerMemory' 62 | NetworkMode: awsvpc 63 | RequiresCompatibilities: 64 | - FARGATE 65 | ExecutionRoleArn: 66 | Fn::ImportValue: !Sub "${EnvironmentName}:ECSTaskExecutionRole" 67 | TaskRoleArn: 68 | Fn::ImportValue: !Sub "${EnvironmentName}:ChatServiceRole" 69 | ContainerDefinitions: 70 | - Name: !Ref 'ServiceName' 71 | Cpu: !Ref 'ContainerCpu' 72 | Memory: !Ref 'ContainerMemory' 73 | Image: !Ref 'ImageUrl' 74 | Environment: 75 | - Name: REGION 76 | Value: !Ref 'AWS::Region' 77 | - Name: LOCAL 78 | # This disables a redirect from HTTP to HTTPS, as HTTPS only works when you 79 | # actually buy a domain and setup an SSL certificate 80 | Value: true 81 | - Name: NODE_ENV 82 | Value: production 83 | - Name: REDIS_ENDPOINT 84 | Value: !Sub 85 | - 'redis://${RedisEndpointValue}:6379' 86 | - RedisEndpointValue: 87 | Fn::ImportValue: !Sub "${EnvironmentName}:RedisEndpoint" 88 | - Name: USER_TABLE 89 | Value: 90 | Fn::ImportValue: !Sub "${EnvironmentName}:UsersTable" 91 | - Name: MESSAGE_TABLE 92 | Value: 93 | Fn::ImportValue: !Sub "${EnvironmentName}:MessagesTable" 94 | - Name: DYNAMODB_ENDPOINT 95 | Value: !Sub 'https://dynamodb.${AWS::Region}.amazonaws.com' 96 | - Name: ENV_NAME 97 | Value: !Ref 'EnvironmentName' 98 | PortMappings: 99 | - ContainerPort: !Ref 'ContainerPort' 100 | LogConfiguration: 101 | LogDriver: 'awslogs' 102 | Options: 103 | awslogs-group: !Sub "${EnvironmentName}-service-${ServiceName}" 104 | awslogs-region: !Ref 'AWS::Region' 105 | awslogs-stream-prefix: !Ref 'ServiceName' 106 | 107 | # The service. The service is a resource which allows you to run multiple 108 | # copies of a type of task, and gather up their logs and metrics, as well 109 | # as monitor the number of running tasks and replace any that have crashed 110 | Service: 111 | Type: AWS::ECS::Service 112 | DependsOn: 113 | - HTTPRule 114 | # - HTTPSRule 115 | Properties: 116 | ServiceName: !Ref 'ServiceName' 117 | Cluster: 118 | Fn::ImportValue: !Sub "${EnvironmentName}:ClusterName" 119 | LaunchType: FARGATE 120 | DeploymentConfiguration: 121 | MaximumPercent: 200 122 | MinimumHealthyPercent: 75 123 | DesiredCount: !Ref 'DesiredCount' 124 | NetworkConfiguration: 125 | AwsvpcConfiguration: 126 | AssignPublicIp: ENABLED 127 | SecurityGroups: 128 | - Fn::ImportValue: !Sub "${EnvironmentName}:FargateContainerSecurityGroup" 129 | Subnets: 130 | - Fn::ImportValue: !Sub "${EnvironmentName}:PublicSubnetOne" 131 | - Fn::ImportValue: !Sub "${EnvironmentName}:PublicSubnetTwo" 132 | TaskDefinition: !Ref 'TaskDefinition' 133 | LoadBalancers: 134 | - ContainerName: !Ref 'ServiceName' 135 | ContainerPort: !Ref 'ContainerPort' 136 | TargetGroupArn: !Ref 'TargetGroup' 137 | 138 | # A target group. This is used for keeping track of all the tasks, and 139 | # what IP addresses / port numbers they have. You can query it yourself, 140 | # to use the addresses yourself, but most often this target group is just 141 | # connected to an application load balancer, or network load balancer, so 142 | # it can automatically distribute traffic across all the targets. 143 | TargetGroup: 144 | Type: AWS::ElasticLoadBalancingV2::TargetGroup 145 | Properties: 146 | HealthCheckIntervalSeconds: 6 147 | HealthCheckPath: / 148 | Matcher: 149 | HttpCode: 200,301 150 | HealthCheckProtocol: HTTP 151 | HealthCheckTimeoutSeconds: 5 152 | HealthyThresholdCount: 2 153 | TargetType: ip 154 | Name: !Sub "${EnvironmentName}-${ServiceName}" 155 | Port: 80 156 | Protocol: HTTP 157 | UnhealthyThresholdCount: 2 158 | TargetGroupAttributes: 159 | - Key: stickiness.enabled 160 | Value: true 161 | - Key: deregistration_delay.timeout_seconds 162 | Value: 30 163 | VpcId: 164 | Fn::ImportValue: !Sub "${EnvironmentName}:VPCId" 165 | 166 | # Create rules to forward HTTP traffic to the service's 167 | # target group. 168 | HTTPRule: 169 | Type: AWS::ElasticLoadBalancingV2::ListenerRule 170 | Properties: 171 | Actions: 172 | - TargetGroupArn: !Ref 'TargetGroup' 173 | Type: 'forward' 174 | Conditions: 175 | - Field: path-pattern 176 | Values: [!Ref 'Path'] 177 | ListenerArn: 178 | Fn::ImportValue: !Sub "${EnvironmentName}:PublicListenerHTTP" 179 | Priority: !Ref 'Priority' 180 | 181 | # Enable autoscaling for this service 182 | ScalableTarget: 183 | Type: AWS::ApplicationAutoScaling::ScalableTarget 184 | DependsOn: Service 185 | Properties: 186 | ServiceNamespace: 'ecs' 187 | ScalableDimension: 'ecs:service:DesiredCount' 188 | ResourceId: 189 | !Sub 190 | - 'service/${ClusterNameValue}/${ServiceName}' 191 | - ClusterNameValue: 192 | Fn::ImportValue: !Sub "${EnvironmentName}:ClusterName" 193 | MinCapacity: 2 194 | MaxCapacity: 10 195 | RoleARN: 196 | Fn::ImportValue: 197 | !Join [':', [!Ref 'EnvironmentName', 'AutoscalingRole']] 198 | 199 | # Create scaling policies for the service 200 | ScaleDownPolicy: 201 | Type: AWS::ApplicationAutoScaling::ScalingPolicy 202 | DependsOn: ScalableTarget 203 | Properties: 204 | PolicyName: !Sub 'scale-${EnvironmentName}-${ServiceName}-down' 205 | PolicyType: StepScaling 206 | ResourceId: 207 | !Sub 208 | - 'service/${ClusterNameValue}/${ServiceName}' 209 | - ClusterNameValue: 210 | Fn::ImportValue: !Sub "${EnvironmentName}:ClusterName" 211 | ScalableDimension: 'ecs:service:DesiredCount' 212 | ServiceNamespace: 'ecs' 213 | StepScalingPolicyConfiguration: 214 | AdjustmentType: 'ChangeInCapacity' 215 | StepAdjustments: 216 | - MetricIntervalUpperBound: 0 217 | ScalingAdjustment: -1 218 | MetricAggregationType: 'Average' 219 | Cooldown: 60 220 | 221 | ScaleUpPolicy: 222 | Type: AWS::ApplicationAutoScaling::ScalingPolicy 223 | DependsOn: ScalableTarget 224 | Properties: 225 | PolicyName: !Sub 'scale-${EnvironmentName}-${ServiceName}-up' 226 | PolicyType: StepScaling 227 | ResourceId: 228 | !Sub 229 | - 'service/${ClusterNameValue}/${ServiceName}' 230 | - ClusterNameValue: 231 | Fn::ImportValue: !Sub "${EnvironmentName}:ClusterName" 232 | ScalableDimension: 'ecs:service:DesiredCount' 233 | ServiceNamespace: 'ecs' 234 | StepScalingPolicyConfiguration: 235 | AdjustmentType: 'ChangeInCapacity' 236 | StepAdjustments: 237 | - MetricIntervalLowerBound: 0 238 | MetricIntervalUpperBound: 15 239 | ScalingAdjustment: 1 240 | - MetricIntervalLowerBound: 15 241 | MetricIntervalUpperBound: 25 242 | ScalingAdjustment: 2 243 | - MetricIntervalLowerBound: 25 244 | ScalingAdjustment: 3 245 | MetricAggregationType: 'Average' 246 | Cooldown: 60 247 | 248 | # Create alarms to trigger these policies 249 | LowCpuUsageAlarm: 250 | Type: AWS::CloudWatch::Alarm 251 | Properties: 252 | AlarmName: !Sub 'low-cpu-${EnvironmentName}-${ServiceName}' 253 | AlarmDescription: !Sub 'Low CPU utilization for service ${ServiceName} in environment ${EnvironmentName}' 254 | MetricName: CPUUtilization 255 | Namespace: AWS/ECS 256 | Dimensions: 257 | - Name: ServiceName 258 | Value: !Ref 'ServiceName' 259 | - Name: ClusterName 260 | Value: 261 | Fn::ImportValue: !Sub "${EnvironmentName}:ClusterName" 262 | Statistic: Average 263 | Period: 60 264 | EvaluationPeriods: 1 265 | Threshold: 20 266 | ComparisonOperator: LessThanOrEqualToThreshold 267 | AlarmActions: 268 | - !Ref ScaleDownPolicy 269 | 270 | HighCpuUsageAlarm: 271 | Type: AWS::CloudWatch::Alarm 272 | Properties: 273 | AlarmName: !Sub 'high-cpu-${EnvironmentName}-${ServiceName}' 274 | AlarmDescription: !Sub 'High CPU utilization for service ${ServiceName} in environment ${EnvironmentName}' 275 | MetricName: CPUUtilization 276 | Namespace: AWS/ECS 277 | Dimensions: 278 | - Name: ServiceName 279 | Value: !Ref 'ServiceName' 280 | - Name: ClusterName 281 | Value: 282 | Fn::ImportValue: !Sub "${EnvironmentName}:ClusterName" 283 | Statistic: Average 284 | Period: 60 285 | EvaluationPeriods: 1 286 | Threshold: 70 287 | ComparisonOperator: GreaterThanOrEqualToThreshold 288 | AlarmActions: 289 | - !Ref ScaleUpPolicy 290 | -------------------------------------------------------------------------------- /infrastructure/cloudfront.yml: -------------------------------------------------------------------------------- 1 | AWSTemplateFormatVersion: '2010-09-09' 2 | Description: A CloudFront distribution that glues the separate 3 | services together into one website 4 | Parameters: 5 | EnvironmentName: 6 | Type: String 7 | Default: production 8 | Description: A name for the environment that this cloudformation will be part of. 9 | 10 | CertArn: 11 | Type: String 12 | Default: 'no custom domain' 13 | Description: Optional ARN of an Amazon Certificate Manager cert that is the 14 | SSL cert for the application 15 | 16 | DomainName: 17 | Type: String 18 | Default: 'no custom domain' 19 | Description: Optional domain name for the application when deployed. 20 | 21 | Conditions: 22 | CustomHttpsDomainEnabled: !Not [ !Equals [ !Ref DomainName, 'no custom domain']] 23 | 24 | Resources: 25 | 26 | # Describes what to cache and for how long 27 | ChatAppCachePolicy: 28 | Type: AWS::CloudFront::CachePolicy 29 | Properties: 30 | CachePolicyConfig: 31 | Name: 'chat-app-default' 32 | DefaultTTL: 0 33 | MaxTTL: 10 34 | MinTTL: 0 35 | ParametersInCacheKeyAndForwardedToOrigin: 36 | CookiesConfig: 37 | CookieBehavior: none 38 | EnableAcceptEncodingGzip: true 39 | HeadersConfig: 40 | HeaderBehavior: whitelist 41 | Headers: 42 | - Sec-WebSocket-Key 43 | - Sec-WebSocket-Version 44 | - Sec-WebSocket-Protocol 45 | - Sec-WebSocket-Accept 46 | - Sec-WebSocket-Extensions 47 | QueryStringsConfig: 48 | QueryStringBehavior: all 49 | 50 | # Describes the different origins and how to map incoming 51 | # traffic to different origin servers 52 | ChatAppDistribution: 53 | Type: AWS::CloudFront::Distribution 54 | Properties: 55 | DistributionConfig: 56 | Aliases: 57 | - !If [ 'CustomHttpsDomainEnabled', !Ref DomainName, !Ref AWS::NoValue ] 58 | ViewerCertificate: 59 | # If no custom domain specified, then use the default cert 60 | CloudFrontDefaultCertificate: !If [ 'CustomHttpsDomainEnabled', !Ref AWS::NoValue, true] 61 | 62 | # Otherwise use out custom cert from Amazon Certificate Manager 63 | AcmCertificateArn: !If [ 'CustomHttpsDomainEnabled', !Ref CertArn, !Ref AWS::NoValue ] 64 | MinimumProtocolVersion: !If [ 'CustomHttpsDomainEnabled', 'TLSv1.2_2021', !Ref AWS::NoValue ] 65 | SslSupportMethod: !If [ 'CustomHttpsDomainEnabled', 'sni-only', !Ref AWS::NoValue ] 66 | DefaultRootObject: 'index.html' 67 | Enabled: true 68 | Origins: 69 | - Id: 'web-static' 70 | DomainName: 71 | Fn::ImportValue: !Sub "${EnvironmentName}:WebEndpoint" 72 | CustomOriginConfig: 73 | OriginProtocolPolicy: 'https-only' 74 | OriginKeepaliveTimeout: 60 75 | - Id: 'socket-app' 76 | DomainName: 77 | Fn::ImportValue: !Sub "${EnvironmentName}:ExternalDnsName" 78 | CustomOriginConfig: 79 | OriginProtocolPolicy: 'http-only' 80 | OriginKeepaliveTimeout: 60 81 | - Id: 'search-gateway' 82 | DomainName: 83 | !Sub 84 | - '${ChatMessageSearchValue}.execute-api.${AWS::Region}.amazonaws.com' 85 | - ChatMessageSearchValue: 86 | Fn::ImportValue: !Sub '${EnvironmentName}:ChatMessageSearchId' 87 | CustomOriginConfig: 88 | OriginProtocolPolicy: 'https-only' 89 | OriginKeepaliveTimeout: 60 90 | # Default behavior sends all static web traffic to the 91 | # AppRunner hosted endpoint 92 | DefaultCacheBehavior: 93 | AllowedMethods: 94 | - GET 95 | - HEAD 96 | - OPTIONS 97 | - PUT 98 | - POST 99 | - PATCH 100 | - DELETE 101 | CachePolicyId: !Ref ChatAppCachePolicy 102 | ViewerProtocolPolicy: redirect-to-https 103 | TargetOriginId: 'web-static' 104 | Compress: true 105 | CacheBehaviors: 106 | # Search traffic goes to API Gateway of the Lambda function 107 | - PathPattern: '/search*' 108 | TargetOriginId: 'search-gateway' 109 | CachePolicyId: !Ref ChatAppCachePolicy 110 | ViewerProtocolPolicy: redirect-to-https 111 | Compress: true 112 | # Socket.io traffic goes to the Fargate hosted container 113 | - PathPattern: '/socket.io*' 114 | TargetOriginId: 'socket-app' 115 | CachePolicyId: !Ref ChatAppCachePolicy 116 | ViewerProtocolPolicy: redirect-to-https 117 | Compress: true 118 | 119 | Outputs: 120 | PublicURL: 121 | Description: The name of the ECS cluster 122 | Value: !GetAtt ChatAppDistribution.DomainName 123 | Export: 124 | Name: !Sub '${EnvironmentName}:PublicURL' -------------------------------------------------------------------------------- /infrastructure/cluster.yml: -------------------------------------------------------------------------------- 1 | AWSTemplateFormatVersion: '2010-09-09' 2 | Description: The baseline resources used to create a Fargate environment 3 | to launch containerized applications in. 4 | Parameters: 5 | EnvironmentName: 6 | Type: String 7 | Default: production 8 | Description: A name for the environment that this cloudformation will be part of. 9 | # Uncomment to add an SSL cert to public facing app 10 | #CertificateArn: 11 | # Type: String 12 | # Description: ARN of the Amazon Certificate Manager SSL certificate to use for this app 13 | 14 | Mappings: 15 | # Hard values for the subnet masks. These masks define 16 | # the range of internal IP addresses that can be assigned. 17 | # The VPC can have all IP's from 10.0.0.0 to 10.0.255.255 18 | # There are two subnets which cover the ranges: 19 | # 20 | # 10.0.0.0 - 10.0.0.255 21 | # 10.0.1.0 - 10.0.1.255 22 | # 23 | # If you need more IP addresses (perhaps you have so many 24 | # instances that you run out) then you can customize these 25 | # ranges to add more 26 | SubnetConfig: 27 | VPC: 28 | CIDR: '10.0.0.0/16' 29 | PublicOne: 30 | CIDR: '10.0.0.0/24' 31 | PublicTwo: 32 | CIDR: '10.0.1.0/24' 33 | Resources: 34 | # VPC in which containers will be networked. 35 | # It has two public subnets 36 | # We distribute the subnets across the first two available subnets 37 | # for the region, for high availability. 38 | VPC: 39 | Type: AWS::EC2::VPC 40 | Properties: 41 | EnableDnsSupport: true 42 | EnableDnsHostnames: true 43 | CidrBlock: !FindInMap ['SubnetConfig', 'VPC', 'CIDR'] 44 | 45 | # Two public subnets, where containers can have public IP addresses 46 | PublicSubnetOne: 47 | Type: AWS::EC2::Subnet 48 | Properties: 49 | AvailabilityZone: 50 | Fn::Select: 51 | - 0 52 | - Fn::GetAZs: {Ref: 'AWS::Region'} 53 | VpcId: !Ref 'VPC' 54 | CidrBlock: !FindInMap ['SubnetConfig', 'PublicOne', 'CIDR'] 55 | MapPublicIpOnLaunch: true 56 | PublicSubnetTwo: 57 | Type: AWS::EC2::Subnet 58 | Properties: 59 | AvailabilityZone: 60 | Fn::Select: 61 | - 1 62 | - Fn::GetAZs: {Ref: 'AWS::Region'} 63 | VpcId: !Ref 'VPC' 64 | CidrBlock: !FindInMap ['SubnetConfig', 'PublicTwo', 'CIDR'] 65 | MapPublicIpOnLaunch: true 66 | 67 | # Setup networking resources for the public subnets. Containers 68 | # in the public subnets have public IP addresses and the routing table 69 | # sends network traffic via the internet gateway. 70 | InternetGateway: 71 | Type: AWS::EC2::InternetGateway 72 | GatewayAttachement: 73 | Type: AWS::EC2::VPCGatewayAttachment 74 | DependsOn: InternetGateway 75 | Properties: 76 | VpcId: !Ref 'VPC' 77 | InternetGatewayId: !Ref 'InternetGateway' 78 | PublicRouteTable: 79 | Type: AWS::EC2::RouteTable 80 | Properties: 81 | VpcId: !Ref 'VPC' 82 | PublicRoute: 83 | Type: AWS::EC2::Route 84 | DependsOn: GatewayAttachement 85 | Properties: 86 | RouteTableId: !Ref 'PublicRouteTable' 87 | DestinationCidrBlock: '0.0.0.0/0' 88 | GatewayId: !Ref 'InternetGateway' 89 | PublicSubnetOneRouteTableAssociation: 90 | Type: AWS::EC2::SubnetRouteTableAssociation 91 | Properties: 92 | SubnetId: !Ref PublicSubnetOne 93 | RouteTableId: !Ref PublicRouteTable 94 | PublicSubnetTwoRouteTableAssociation: 95 | Type: AWS::EC2::SubnetRouteTableAssociation 96 | Properties: 97 | SubnetId: !Ref PublicSubnetTwo 98 | RouteTableId: !Ref PublicRouteTable 99 | 100 | # ECS Resources 101 | ECSCluster: 102 | Type: AWS::ECS::Cluster 103 | 104 | # A security group for the containers we will run in Fargate. 105 | # Two rules, allowing network traffic from a public facing load 106 | # balancer and from other members of the security group. 107 | # 108 | # Remove any of the following ingress rules that are not needed. 109 | # If you want to make direct requests to a container using its 110 | # public IP address you'll need to add a security group rule 111 | # to allow traffic from all IP addresses. 112 | FargateContainerSecurityGroup: 113 | Type: AWS::EC2::SecurityGroup 114 | Properties: 115 | GroupDescription: Access to the Fargate containers 116 | VpcId: !Ref 'VPC' 117 | EcsSecurityGroupIngressFromPublicALB: 118 | Type: AWS::EC2::SecurityGroupIngress 119 | Properties: 120 | Description: Ingress from the public ALB 121 | GroupId: !Ref 'FargateContainerSecurityGroup' 122 | IpProtocol: -1 123 | SourceSecurityGroupId: !Ref 'PublicLoadBalancerSG' 124 | EcsSecurityGroupIngressFromSelf: 125 | Type: AWS::EC2::SecurityGroupIngress 126 | Properties: 127 | Description: Ingress from other containers in the same security group 128 | GroupId: !Ref 'FargateContainerSecurityGroup' 129 | IpProtocol: -1 130 | SourceSecurityGroupId: !Ref 'FargateContainerSecurityGroup' 131 | 132 | # Load balancers for getting traffic to containers. 133 | # This sample template creates one load balancer: 134 | # 135 | # - One public load balancer, hosted in public subnets that is accessible 136 | # to the public, and is intended to route traffic to one or more public 137 | # facing services. 138 | 139 | # A public facing load balancer, this is used for accepting traffic from the public 140 | # internet and directing it to public facing microservices 141 | PublicLoadBalancerSG: 142 | Type: AWS::EC2::SecurityGroup 143 | Properties: 144 | GroupDescription: Access to the public facing load balancer 145 | VpcId: !Ref 'VPC' 146 | SecurityGroupIngress: 147 | # Allow access to ALB from anywhere on the internet 148 | - CidrIp: 0.0.0.0/0 149 | IpProtocol: -1 150 | PublicLoadBalancer: 151 | Type: AWS::ElasticLoadBalancingV2::LoadBalancer 152 | Properties: 153 | Scheme: internet-facing 154 | LoadBalancerAttributes: 155 | - Key: idle_timeout.timeout_seconds 156 | Value: '30' 157 | Subnets: 158 | # The load balancer is placed into the public subnets, so that traffic 159 | # from the internet can reach the load balancer directly via the internet gateway 160 | - !Ref PublicSubnetOne 161 | - !Ref PublicSubnetTwo 162 | SecurityGroups: [!Ref 'PublicLoadBalancerSG'] 163 | # A dummy target group is used to setup the ALB to just drop traffic 164 | # initially, before any real service target groups have been added. 165 | DummyTargetGroupPublic: 166 | Type: AWS::ElasticLoadBalancingV2::TargetGroup 167 | Properties: 168 | HealthCheckIntervalSeconds: 6 169 | HealthCheckPath: / 170 | HealthCheckProtocol: HTTP 171 | HealthCheckTimeoutSeconds: 5 172 | HealthyThresholdCount: 2 173 | Name: !Join ['-', [!Ref 'EnvironmentName', 'drop-1']] 174 | Port: 80 175 | Protocol: HTTP 176 | UnhealthyThresholdCount: 2 177 | VpcId: !Ref 'VPC' 178 | PublicLoadBalancerListenerHTTP: 179 | Type: AWS::ElasticLoadBalancingV2::Listener 180 | DependsOn: 181 | - PublicLoadBalancer 182 | Properties: 183 | DefaultActions: 184 | - TargetGroupArn: !Ref 'DummyTargetGroupPublic' 185 | Type: 'forward' 186 | LoadBalancerArn: !Ref 'PublicLoadBalancer' 187 | Port: 80 188 | Protocol: HTTP 189 | # Uncomment to add a HTTPS listener with SSL cert 190 | # PublicLoadBalancerListenerHTTPS: 191 | # Type: AWS::ElasticLoadBalancingV2::Listener 192 | # DependsOn: 193 | # - PublicLoadBalancer 194 | # Properties: 195 | # DefaultActions: 196 | # - TargetGroupArn: !Ref 'DummyTargetGroupPublic' 197 | # Type: 'forward' 198 | # LoadBalancerArn: !Ref 'PublicLoadBalancer' 199 | # Port: 443 200 | # Protocol: HTTPS 201 | # Certificates: 202 | # - CertificateArn: !Ref 'CertificateArn' 203 | 204 | # This is an IAM role which authorizes ECS to manage resources on your 205 | # account on your behalf, such as updating your load balancer with the 206 | # details of where your containers are, so that traffic can reach your 207 | # containers. 208 | ECSRole: 209 | Type: AWS::IAM::Role 210 | Properties: 211 | AssumeRolePolicyDocument: 212 | Statement: 213 | - Effect: Allow 214 | Principal: 215 | Service: [ecs.amazonaws.com] 216 | Action: ['sts:AssumeRole'] 217 | Path: / 218 | Policies: 219 | - PolicyName: ecs-service 220 | PolicyDocument: 221 | Statement: 222 | - Effect: Allow 223 | Action: 224 | # Rules which allow ECS to attach network interfaces to instances 225 | # on your behalf in order for awsvpc networking mode to work right 226 | - 'ec2:AttachNetworkInterface' 227 | - 'ec2:CreateNetworkInterface' 228 | - 'ec2:CreateNetworkInterfacePermission' 229 | - 'ec2:DeleteNetworkInterface' 230 | - 'ec2:DeleteNetworkInterfacePermission' 231 | - 'ec2:Describe*' 232 | - 'ec2:DetachNetworkInterface' 233 | 234 | # Rules which allow ECS to update load balancers on your behalf 235 | # with the information sabout how to send traffic to your containers 236 | - 'elasticloadbalancing:DeregisterInstancesFromLoadBalancer' 237 | - 'elasticloadbalancing:DeregisterTargets' 238 | - 'elasticloadbalancing:Describe*' 239 | - 'elasticloadbalancing:RegisterInstancesWithLoadBalancer' 240 | - 'elasticloadbalancing:RegisterTargets' 241 | Resource: '*' 242 | 243 | # This is a role which is used by the ECS tasks themselves. 244 | ECSTaskExecutionRole: 245 | Type: AWS::IAM::Role 246 | Properties: 247 | AssumeRolePolicyDocument: 248 | Statement: 249 | - Effect: Allow 250 | Principal: 251 | Service: [ecs-tasks.amazonaws.com] 252 | Action: ['sts:AssumeRole'] 253 | Path: / 254 | Policies: 255 | - PolicyName: AmazonECSTaskExecutionRolePolicy 256 | PolicyDocument: 257 | Statement: 258 | - Effect: Allow 259 | Action: 260 | # Allow the ECS Tasks to download images from ECR 261 | - 'ecr:GetAuthorizationToken' 262 | - 'ecr:BatchCheckLayerAvailability' 263 | - 'ecr:GetDownloadUrlForLayer' 264 | - 'ecr:BatchGetImage' 265 | 266 | # Allow the ECS tasks to upload logs to CloudWatch 267 | - 'logs:CreateLogStream' 268 | - 'logs:PutLogEvents' 269 | Resource: '*' 270 | 271 | # A role used by AWS Autoscaling to get the stats for a Fargate 272 | # service, and update it to increase or decrease the number of containers 273 | AutoscalingRole: 274 | Type: AWS::IAM::Role 275 | Properties: 276 | AssumeRolePolicyDocument: 277 | Statement: 278 | - Effect: Allow 279 | Principal: 280 | Service: [application-autoscaling.amazonaws.com] 281 | Action: ['sts:AssumeRole'] 282 | Path: / 283 | Policies: 284 | - PolicyName: service-autoscaling 285 | PolicyDocument: 286 | Statement: 287 | - Effect: Allow 288 | Action: 289 | - 'application-autoscaling:*' 290 | - 'cloudwatch:DescribeAlarms' 291 | - 'cloudwatch:PutMetricAlarm' 292 | - 'ecs:DescribeServices' 293 | - 'ecs:UpdateService' 294 | Resource: '*' 295 | 296 | # These are the values output by the CloudFormation template. Be careful 297 | # about changing any of them, because of them are exported with specific 298 | # names so that the other task related CF templates can use them. 299 | Outputs: 300 | ClusterName: 301 | Description: The name of the ECS cluster 302 | Value: !Ref 'ECSCluster' 303 | Export: 304 | Name: !Sub '${EnvironmentName}:ClusterName' 305 | ExternalUrl: 306 | Description: The url of the external load balancer 307 | Value: !Sub 'http://${PublicLoadBalancer.DNSName}' 308 | Export: 309 | Name: !Sub '${EnvironmentName}:ExternalUrl' 310 | ExternalDnsName: 311 | Description: The DNS name 312 | Value: !GetAtt 'PublicLoadBalancer.DNSName' 313 | Export: 314 | Name: !Sub '${EnvironmentName}:ExternalDnsName' 315 | ECSRole: 316 | Description: The ARN of the ECS role 317 | Value: !GetAtt 'ECSRole.Arn' 318 | Export: 319 | Name: !Sub '${EnvironmentName}:ECSRole' 320 | ECSTaskExecutionRole: 321 | Description: The ARN of the ECS role 322 | Value: !GetAtt 'ECSTaskExecutionRole.Arn' 323 | Export: 324 | Name: !Sub '${EnvironmentName}:ECSTaskExecutionRole' 325 | AutoscalingRole: 326 | Description: The ARN of the ECS role 327 | Value: !GetAtt 'ECSTaskExecutionRole.Arn' 328 | Export: 329 | Name: !Sub '${EnvironmentName}:AutoscalingRole' 330 | HTTPListener: 331 | Description: The ARN of the public load balancer's HTTP Listener 332 | Value: !Ref PublicLoadBalancerListenerHTTP 333 | Export: 334 | Name: !Sub '${EnvironmentName}:PublicListenerHTTP' 335 | # HTTPSListener: 336 | # Description: The ARN of the public load balancer's HTTPS Listener 337 | # Value: !Ref PublicLoadBalancerListenerHTTPS 338 | # Export: 339 | # Name: !Sub '${EnvironmentName}:PublicListenerHTTPS' 340 | VPCId: 341 | Description: The ID of the VPC that this stack is deployed in 342 | Value: !Ref 'VPC' 343 | Export: 344 | Name: !Sub '${EnvironmentName}:VPCId' 345 | PublicSubnetOne: 346 | Description: Public subnet one 347 | Value: !Ref 'PublicSubnetOne' 348 | Export: 349 | Name: !Sub '${EnvironmentName}:PublicSubnetOne' 350 | PublicSubnetTwo: 351 | Description: Public subnet two 352 | Value: !Ref 'PublicSubnetTwo' 353 | Export: 354 | Name: !Sub '${EnvironmentName}:PublicSubnetTwo' 355 | FargateContainerSecurityGroup: 356 | Description: A security group used to allow Fargate containers to receive traffic 357 | Value: !Ref 'FargateContainerSecurityGroup' 358 | Export: 359 | Name: !Sub '${EnvironmentName}:FargateContainerSecurityGroup' 360 | -------------------------------------------------------------------------------- /infrastructure/message-index-drop.yml: -------------------------------------------------------------------------------- 1 | AWSTemplateFormatVersion: '2010-09-09' 2 | Transform: 3 | - 'AWS::Serverless-2016-10-31' 4 | - 'AWS::LanguageExtensions' 5 | Description: A Lambda function used for admin purposes to drop the OpenSearch serverless collection 6 | Parameters: 7 | EnvironmentName: 8 | Type: String 9 | Default: production 10 | Description: A name for the environment that this cloudformation will be part of. 11 | Used to locate other resources in the same environment. 12 | 13 | Resources: 14 | ChatMessageDropperSecurityGroup: 15 | Type: AWS::EC2::SecurityGroup 16 | Properties: 17 | GroupDescription: "Chat message dropper security group" 18 | VpcId: 19 | Fn::ImportValue: !Sub "${EnvironmentName}:VPCId" 20 | 21 | ChatMessageDropper: 22 | Type: 'AWS::Serverless::Function' 23 | Properties: 24 | Handler: app.handler 25 | Runtime: nodejs14.x 26 | CodeUri: ../services/message-index-drop 27 | Description: Drop the chat message search index 28 | MemorySize: 128 29 | Timeout: 30 30 | Environment: 31 | Variables: 32 | MESSAGE_COLLECTION_ENDPOINT: 33 | Fn::ImportValue: !Sub "${EnvironmentName}:MessagesCollectionEndpoint" 34 | VpcConfig: 35 | SecurityGroupIds: 36 | - !Ref ChatMessageDropperSecurityGroup 37 | SubnetIds: 38 | - Fn::ImportValue: !Sub "${EnvironmentName}:PublicSubnetOne" 39 | - Fn::ImportValue: !Sub "${EnvironmentName}:PublicSubnetTwo" 40 | 41 | # Create the access policy which allows the IAM role of the Lambda function to use OpenSearch Serverless 42 | MessageCollectionAccessPolicy: 43 | Type: AWS::OpenSearchServerless::AccessPolicy 44 | Properties: 45 | Name: 'chat-dropper-access-policy' 46 | Description: 'Who can access the indexed chat messages, and how' 47 | Type: 'data' 48 | Policy: 49 | Fn::ToJsonString: 50 | - Description: Access for Lambda function URL 51 | Rules: 52 | - ResourceType: collection 53 | Resource: 54 | - collection/chat-messages 55 | Permission: 56 | - aoss:CreateCollectionItems 57 | - aoss:DeleteCollectionItems 58 | - aoss:UpdateCollectionItems 59 | - aoss:DescribeCollectionItems 60 | - ResourceType: index 61 | Resource: 62 | - index/chat-messages/* 63 | Permission: 64 | - aoss:CreateIndex 65 | - aoss:DeleteIndex 66 | - aoss:UpdateIndex 67 | - aoss:DescribeIndex 68 | - aoss:ReadDocument 69 | - aoss:WriteDocument 70 | Principal: 71 | - !GetAtt ChatMessageDropperRole.Arn 72 | 73 | # Create the network access policy which allows the Lambda function to talk to collection 74 | ChatIndexerAccessToOpenSearchServerless: 75 | Type: AWS::EC2::SecurityGroupIngress 76 | Properties: 77 | IpProtocol: -1 78 | FromPort: 0 79 | ToPort: 65535 80 | SourceSecurityGroupId: !GetAtt 'ChatMessageDropperSecurityGroup.GroupId' 81 | GroupId: 82 | Fn::ImportValue: !Sub '${EnvironmentName}:OpenSearchServerlessGroupId' 83 | -------------------------------------------------------------------------------- /infrastructure/message-indexer.yml: -------------------------------------------------------------------------------- 1 | AWSTemplateFormatVersion: '2010-09-09' 2 | Transform: 3 | - 'AWS::Serverless-2016-10-31' 4 | - 'AWS::LanguageExtensions' 5 | Description: A Lambda function that receives DynamoDB Stream updates from the chat message table 6 | and indexes the chat messages in OpenSearch Serverless 7 | Parameters: 8 | EnvironmentName: 9 | Type: String 10 | Default: production 11 | Description: A name for the environment that this cloudformation will be part of. 12 | Used to locate other resources in the same environment. 13 | 14 | Resources: 15 | ChatMessageIndexerSecurityGroup: 16 | Type: AWS::EC2::SecurityGroup 17 | Properties: 18 | GroupDescription: "Chat message indexer security group" 19 | VpcId: 20 | Fn::ImportValue: !Sub "${EnvironmentName}:VPCId" 21 | 22 | ChatMessageIndexer: 23 | Type: 'AWS::Serverless::Function' 24 | Properties: 25 | Handler: app.handler 26 | Runtime: nodejs14.x 27 | CodeUri: ../services/message-indexer 28 | Description: An Amazon DynamoDB trigger that indexes messages in the messages table 29 | MemorySize: 128 30 | Timeout: 30 31 | Environment: 32 | Variables: 33 | MESSAGE_COLLECTION_ENDPOINT: 34 | Fn::ImportValue: !Sub "${EnvironmentName}:MessagesCollectionEndpoint" 35 | VpcConfig: 36 | SecurityGroupIds: 37 | - !Ref ChatMessageIndexerSecurityGroup 38 | SubnetIds: 39 | - Fn::ImportValue: !Sub "${EnvironmentName}:PublicSubnetOne" 40 | - Fn::ImportValue: !Sub "${EnvironmentName}:PublicSubnetTwo" 41 | Policies: 42 | Statement: 43 | - Effect: "Allow" 44 | Action: 45 | - "aoss:*" 46 | Resource: 47 | - "*" 48 | Events: 49 | MyDynamoDBtable: 50 | Type: DynamoDB 51 | Properties: 52 | Stream: 53 | Fn::ImportValue: !Sub "${EnvironmentName}:MessagesTableStreamArn" 54 | StartingPosition: TRIM_HORIZON 55 | BatchSize: 100 56 | 57 | # Create the access policy which allows the IAM role of the Lambda function to use OpenSearch Serverless 58 | MessageCollectionAccessPolicy: 59 | Type: AWS::OpenSearchServerless::AccessPolicy 60 | Properties: 61 | Name: 'chat-message-access-policy' 62 | Description: 'Who can access the indexed chat messages, and how' 63 | Type: 'data' 64 | Policy: 65 | Fn::ToJsonString: 66 | - Description: Access for Lambda function URL 67 | Rules: 68 | - ResourceType: collection 69 | Resource: 70 | - collection/chat-messages 71 | Permission: 72 | - aoss:CreateCollectionItems 73 | - aoss:DeleteCollectionItems 74 | - aoss:UpdateCollectionItems 75 | - aoss:DescribeCollectionItems 76 | - ResourceType: index 77 | Resource: 78 | - index/chat-messages/* 79 | Permission: 80 | - aoss:CreateIndex 81 | - aoss:DeleteIndex 82 | - aoss:UpdateIndex 83 | - aoss:DescribeIndex 84 | - aoss:ReadDocument 85 | - aoss:WriteDocument 86 | Principal: 87 | - !GetAtt ChatMessageIndexerRole.Arn 88 | 89 | # Create the network access policy which allows the Lambda function to talk to collection 90 | ChatIndexerAccessToOpenSearchServerless: 91 | Type: AWS::EC2::SecurityGroupIngress 92 | Properties: 93 | IpProtocol: -1 94 | FromPort: 0 95 | ToPort: 65535 96 | SourceSecurityGroupId: !GetAtt 'ChatMessageIndexerSecurityGroup.GroupId' 97 | GroupId: 98 | Fn::ImportValue: !Sub '${EnvironmentName}:OpenSearchServerlessGroupId' 99 | -------------------------------------------------------------------------------- /infrastructure/message-search.yml: -------------------------------------------------------------------------------- 1 | AWSTemplateFormatVersion: '2010-09-09' 2 | Transform: 3 | - 'AWS::Serverless-2016-10-31' 4 | - 'AWS::LanguageExtensions' 5 | Description: A Lambda function which fetches chat message search results from OpenSearch Serverless 6 | Parameters: 7 | EnvironmentName: 8 | Type: String 9 | Default: production 10 | Description: A name for the environment that this cloudformation will be part of. 11 | Used to locate other resources in the same environment. 12 | 13 | Resources: 14 | 15 | # A serverless API Gateway for searching chat messages 16 | ChatMessageSearchApi: 17 | Type: AWS::Serverless::HttpApi 18 | 19 | ChatMessageSearchSecurityGroup: 20 | Type: AWS::EC2::SecurityGroup 21 | Properties: 22 | GroupDescription: "Chat message indexer security group" 23 | VpcId: 24 | Fn::ImportValue: !Sub "${EnvironmentName}:VPCId" 25 | 26 | ChatMessageSearch: 27 | Type: 'AWS::Serverless::Function' 28 | Properties: 29 | Handler: app.handler 30 | Runtime: nodejs14.x 31 | CodeUri: ../services/message-search 32 | Description: An Amazon DynamoDB trigger that indexes messages in the messages table 33 | MemorySize: 128 34 | Timeout: 30 35 | Environment: 36 | Variables: 37 | MESSAGE_COLLECTION_ENDPOINT: 38 | Fn::ImportValue: !Sub "${EnvironmentName}:MessagesCollectionEndpoint" 39 | VpcConfig: 40 | SecurityGroupIds: 41 | - !Ref ChatMessageSearchSecurityGroup 42 | SubnetIds: 43 | - Fn::ImportValue: !Sub "${EnvironmentName}:PublicSubnetOne" 44 | - Fn::ImportValue: !Sub "${EnvironmentName}:PublicSubnetTwo" 45 | Policies: 46 | Statement: 47 | - Effect: "Allow" 48 | Action: 49 | - "aoss:*" 50 | Resource: 51 | - "*" 52 | Events: 53 | AllEvents: 54 | Type: HttpApi 55 | Properties: 56 | ApiId: !Ref ChatMessageSearchApi 57 | Path: /search 58 | Method: GET 59 | 60 | # Create the access policy which allows the IAM role of the Lambda function to use OpenSearch Serverless 61 | MessageCollectionAccessPolicy: 62 | Type: AWS::OpenSearchServerless::AccessPolicy 63 | Properties: 64 | Name: 'chat-search-access-policy' 65 | Description: 'Who can access the indexed chat messages, and how' 66 | Type: 'data' 67 | Policy: 68 | Fn::ToJsonString: 69 | - Description: Access for Lambda function URL 70 | Rules: 71 | - ResourceType: collection 72 | Resource: 73 | - collection/chat-messages 74 | Permission: 75 | - aoss:CreateCollectionItems 76 | - aoss:DeleteCollectionItems 77 | - aoss:UpdateCollectionItems 78 | - aoss:DescribeCollectionItems 79 | - ResourceType: index 80 | Resource: 81 | - index/chat-messages/* 82 | Permission: 83 | - aoss:CreateIndex 84 | - aoss:DeleteIndex 85 | - aoss:UpdateIndex 86 | - aoss:DescribeIndex 87 | - aoss:ReadDocument 88 | - aoss:WriteDocument 89 | Principal: 90 | - !GetAtt ChatMessageSearchRole.Arn 91 | 92 | # Create the network access policy which allows the Lambda function to talk to collection 93 | ChatIndexerAccessToOpenSearchServerless: 94 | Type: AWS::EC2::SecurityGroupIngress 95 | Properties: 96 | IpProtocol: -1 97 | FromPort: 0 98 | ToPort: 65535 99 | SourceSecurityGroupId: !GetAtt 'ChatMessageSearchSecurityGroup.GroupId' 100 | GroupId: 101 | Fn::ImportValue: !Sub "${EnvironmentName}:OpenSearchServerlessGroupId" 102 | 103 | Outputs: 104 | ChatMessageSearchId: 105 | Description: The ID of the search API 106 | Value: !GetAtt 'ChatMessageSearchApi.ApiId' 107 | Export: 108 | Name: !Sub '${EnvironmentName}:ChatMessageSearchId' 109 | MessageSearchEndpoint: 110 | Description: The URL of the chat message search endpoint 111 | Value: !GetAtt 'ChatMessageSearchApi.ApiEndpoint' 112 | Export: 113 | Name: !Sub '${EnvironmentName}:MessageSearchEndpoint' 114 | -------------------------------------------------------------------------------- /infrastructure/resources.yml: -------------------------------------------------------------------------------- 1 | AWSTemplateFormatVersion: '2010-09-09' 2 | Description: Redis, and any other resources that the chat app needs. 3 | Transform: AWS::LanguageExtensions 4 | Parameters: 5 | EnvironmentName: 6 | Type: String 7 | Default: production 8 | Description: The environment name, used for locating outputs from the 9 | prerequisite stacks 10 | Resources: 11 | # Subnet group to control where the Redis gets placed 12 | RedisSubnetGroup: 13 | Type: AWS::ElastiCache::SubnetGroup 14 | Properties: 15 | Description: Group of subnets to place Redis into 16 | SubnetIds: 17 | - Fn::ImportValue: !Sub "${EnvironmentName}:PublicSubnetOne" 18 | - Fn::ImportValue: !Sub "${EnvironmentName}:PublicSubnetTwo" 19 | 20 | # Security group to add the Redis cluster to the VPC, 21 | # and to allow the Fargate containers to talk to Redis on port 6379 22 | RedisSecurityGroup: 23 | Type: AWS::EC2::SecurityGroup 24 | Properties: 25 | GroupDescription: "Redis Security Group" 26 | VpcId: 27 | Fn::ImportValue: !Sub "${EnvironmentName}:VPCId" 28 | 29 | RedisIngress: 30 | Type: AWS::EC2::SecurityGroupIngress 31 | Properties: 32 | Description: Ingress from Fargate containers 33 | GroupId: !Ref 'RedisSecurityGroup' 34 | IpProtocol: tcp 35 | FromPort: 6379 36 | ToPort: 6379 37 | SourceSecurityGroupId: 38 | Fn::ImportValue: !Sub "${EnvironmentName}:FargateContainerSecurityGroup" 39 | 40 | # The cluster itself. 41 | Redis: 42 | Type: AWS::ElastiCache::CacheCluster 43 | Properties: 44 | Engine: redis 45 | CacheNodeType: cache.m4.large 46 | NumCacheNodes: 1 47 | CacheSubnetGroupName: !Ref 'RedisSubnetGroup' 48 | VpcSecurityGroupIds: 49 | - !GetAtt 'RedisSecurityGroup.GroupId' 50 | 51 | # Table for storing user info 52 | UsersTable: 53 | Type: AWS::DynamoDB::Table 54 | Properties: 55 | TableName: !Sub '${EnvironmentName}_Users' 56 | AttributeDefinitions: 57 | - AttributeName: username 58 | AttributeType: S 59 | KeySchema: 60 | - AttributeName: username 61 | KeyType: HASH 62 | ProvisionedThroughput: 63 | ReadCapacityUnits: 10 64 | WriteCapacityUnits: 10 65 | 66 | # Table for storing the messages 67 | MessagesTable: 68 | Type: AWS::DynamoDB::Table 69 | Properties: 70 | TableName: !Sub '${EnvironmentName}_Messages' 71 | AttributeDefinitions: 72 | - AttributeName: room 73 | AttributeType: S 74 | - AttributeName: message 75 | AttributeType: S 76 | KeySchema: 77 | - AttributeName: room 78 | KeyType: HASH 79 | - AttributeName: message 80 | KeyType: RANGE 81 | ProvisionedThroughput: 82 | ReadCapacityUnits: 10 83 | WriteCapacityUnits: 10 84 | StreamSpecification: 85 | StreamViewType: NEW_IMAGE 86 | 87 | # A role for the service so it can access the tables 88 | ChatServiceRole: 89 | Type: AWS::IAM::Role 90 | Properties: 91 | AssumeRolePolicyDocument: 92 | Statement: 93 | - Effect: Allow 94 | Principal: 95 | Service: "ecs-tasks.amazonaws.com" 96 | Action: ['sts:AssumeRole'] 97 | Path: / 98 | Policies: 99 | - PolicyName: users-dynamodb-table 100 | PolicyDocument: 101 | Statement: 102 | - Effect: Allow 103 | Action: 104 | - "dynamodb:PutItem" 105 | - "dynamodb:GetItem" 106 | - "dynamodb:Query" 107 | - "dynamodb:Scan" 108 | - "dynamodb:UpdateItem" 109 | - "dynamodb:DeleteItem" 110 | Resource: 111 | - !Sub 'arn:aws:dynamodb:*:*:table/${UsersTable}' 112 | - !Sub 'arn:aws:dynamodb:*:*:table/${MessagesTable}' 113 | 114 | # Describes how indexed chat messages are stored and encrypted 115 | MessageCollectionSecurityPolicy: 116 | Type: AWS::OpenSearchServerless::SecurityPolicy 117 | Properties: 118 | Name: 'chat-messages-security-policy' 119 | Description: Control the security of the message collection 120 | Type: encryption 121 | Policy: 122 | Fn::ToJsonString: 123 | Rules: 124 | - ResourceType: collection 125 | Resource: 126 | - "collection/chat-messages" 127 | AWSOwnedKey: true 128 | 129 | # Describe the actual search index of chat messages 130 | MessageCollection: 131 | Type: AWS::OpenSearchServerless::Collection 132 | DependsOn: 133 | - MessageCollectionSecurityPolicy 134 | Properties: 135 | Description: 'Indexed collection of chat messages' 136 | Name: 'chat-messages' 137 | Type: SEARCH 138 | 139 | # A VPC endpoint allowing resources in the VPC to access the open search collection 140 | OpenSearchServerlessAccess: 141 | Type: AWS::EC2::SecurityGroup 142 | Properties: 143 | GroupDescription: "OpenSearch Security Group" 144 | VpcId: 145 | Fn::ImportValue: !Sub "${EnvironmentName}:VPCId" 146 | 147 | MessageCollectionVpcEndpoint: 148 | Type: AWS::OpenSearchServerless::VpcEndpoint 149 | Properties: 150 | Name: 'open-search-serverless-endpoint' 151 | VpcId: 152 | Fn::ImportValue: !Sub "${EnvironmentName}:VPCId" 153 | SubnetIds: 154 | - Fn::ImportValue: !Sub "${EnvironmentName}:PublicSubnetOne" 155 | - Fn::ImportValue: !Sub "${EnvironmentName}:PublicSubnetTwo" 156 | SecurityGroupIds: 157 | - !Ref 'OpenSearchServerlessAccess' 158 | OpenSearchServerlessNetworkAccessPolicy: 159 | Type: AWS::OpenSearchServerless::SecurityPolicy 160 | Properties: 161 | Name: access-chat-messages-in-vpc 162 | Description: 'Allows accessing the chat messages collection via the VPC endpoint' 163 | Type: 'network' 164 | Policy: 165 | Fn::ToJsonString: 166 | - Description: Access via VPC endpoint 167 | Rules: 168 | - ResourceType: collection 169 | Resource: 170 | - collection/chat-messages 171 | SourceVPCEs: 172 | - !Ref MessageCollectionVpcEndpoint 173 | 174 | Outputs: 175 | RedisEndpoint: 176 | Description: The endpoint of the redis cluster 177 | Value: !GetAtt 'Redis.RedisEndpoint.Address' 178 | Export: 179 | Name: !Sub "${EnvironmentName}:RedisEndpoint" 180 | ChatServiceRole: 181 | Description: The role of the chat service 182 | Value: !GetAtt 'ChatServiceRole.Arn' 183 | Export: 184 | Name: !Sub "${EnvironmentName}:ChatServiceRole" 185 | UsersTable: 186 | Description: The name of the user table 187 | Value: !Ref 'UsersTable' 188 | Export: 189 | Name: !Sub "${EnvironmentName}:UsersTable" 190 | MessagesTable: 191 | Description: The name of the message table 192 | Value: !Ref 'MessagesTable' 193 | Export: 194 | Name: !Sub "${EnvironmentName}:MessagesTable" 195 | MessagesTableStreamArn: 196 | Description: The ARN of the message table stream 197 | Value: !GetAtt 'MessagesTable.StreamArn' 198 | Export: 199 | Name: !Sub "${EnvironmentName}:MessagesTableStreamArn" 200 | MessageCollectionEndpoint: 201 | Description: The URL of the collection used to submit and search chat messages 202 | Value: !GetAtt 'MessageCollection.CollectionEndpoint' 203 | Export: 204 | Name: !Sub "${EnvironmentName}:MessagesCollectionEndpoint" 205 | OpenSearchServerlessGroupId: 206 | Description: The security group that authorizes communication to open search serverless 207 | Value: !GetAtt OpenSearchServerlessAccess.GroupId 208 | Export: 209 | Name: !Sub "${EnvironmentName}:OpenSearchServerlessGroupId" 210 | -------------------------------------------------------------------------------- /infrastructure/teardown.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | # This is a cleanup script for the Serverless First Workshop 3 | # Code Repository https://github.com/nathanpeck/socket.io-chat-fargate 4 | 5 | AWS_REGION=$(aws configure get region) 6 | echo "Region has been set to $AWS_REGION" 7 | AWS_ACCOUNT=$(aws sts get-caller-identity --query Account --output text) 8 | echo "Account has been set to $AWS_ACCOUNT" 9 | 10 | # List of stack names to delete 11 | stack_names=("chat-cloudfront" "chat-web" "chat-message-search" "chat-message-indexer" "chat-service" "chat-resources" "chat-cluster") 12 | 13 | # List of ECR repositories to delete 14 | ecr_repos=("fargate-chat" "apprunner-web") 15 | 16 | # Loop through each stack name 17 | for (( i=0; i<${#stack_names[@]}; i++ )) 18 | do 19 | stack_name=${stack_names[$i]} 20 | # Check if stack exists 21 | describe_output=$(aws cloudformation describe-stacks --region $AWS_REGION --stack-name "$stack_name" 2>&1) 22 | status=$? 23 | if [ $status -eq 0 ]; then 24 | # If stack exists, initiate deletion process 25 | echo "Stack $(($i+1))/${#stack_names[@]} being deleted: $stack_name" 26 | delete_output=$(aws cloudformation delete-stack --region $AWS_REGION --stack-name "$stack_name" 2>&1) 27 | status=$? 28 | if [ $status -eq 0 ]; then 29 | # If deletion initiated, check deletion status 30 | echo "Deletion of stack $stack_name initiated." 31 | status_output="" 32 | while [ "$status_output" != "DELETE_COMPLETE" ] 33 | do 34 | status_output=$(aws cloudformation describe-stacks --region $AWS_REGION --stack-name "$stack_name" --query "Stacks[0].StackStatus" --output text 2>&1) 35 | status=$? 36 | if [ $status -ne 0 ]; then 37 | # If error checking status, print error message and break loop 38 | echo "Error checking status of stack $stack_name: $status_output" 39 | break 40 | fi 41 | # Print status bar and wait for 5 seconds before checking status again 42 | printf "." 43 | sleep 5 44 | done 45 | # If deletion successful, print message indicating stack has been deleted 46 | echo " Stack $stack_name deleted." 47 | else 48 | # If error initiating deletion, print error message 49 | echo "Error deleting stack $stack_name: $delete_output" 50 | fi 51 | else 52 | # If stack does not exist, print message indicuating stack does not exist 53 | echo "Stack $stack_name does not exist. Skipping deletion." 54 | fi 55 | done 56 | 57 | # Loop through each ECR repository name 58 | for ecr_repo in "${ecr_repos[@]}" 59 | do 60 | # Check if ECR repository exists 61 | describe_output=$(aws ecr describe-repositories --region $AWS_REGION --repository-name "$ecr_repo" 2>&1) 62 | status=$? 63 | if [ $status -eq 0 ]; then 64 | # If ECR repository exists, initiate deletion process 65 | echo "Deleting ECR repository: $ecr_repo" 66 | delete_output=$(aws ecr delete-repository --region $AWS_REGION --repository-name "$ecr_repo" --force 2>&1) 67 | status=$? 68 | if [ $status -eq 0 ]; then 69 | # If deletion successful, print message indicating ECR repository has been deleted 70 | echo "ECR repository $ecr_repo deleted." 71 | else 72 | # If error initiating deletion, print error message 73 | echo "Error deleting ECR repository $ecr_repo: $delete_output" 74 | fi 75 | else 76 | # If ECR repository does not exist, print message indicating ECR repository does not exist and skip deletion 77 | echo "ECR repository $ecr_repo does not exist. Skipping deletion." 78 | fi 79 | done 80 | -------------------------------------------------------------------------------- /infrastructure/web.yml: -------------------------------------------------------------------------------- 1 | AWSTemplateFormatVersion: '2010-09-09' 2 | Description: A static web server hosted in AWS App Runner 3 | Parameters: 4 | EnvironmentName: 5 | Type: String 6 | Default: production 7 | Description: A name for the environment that this cloudformation will be part of. 8 | Used to locate other resources in the same environment. 9 | ImageUrl: 10 | Type: String 11 | Default: nginx 12 | Description: The url of a docker image that contains the application process that 13 | will handle the traffic for this service. Should be on ECR private 14 | 15 | Resources: 16 | 17 | # The role which allows App Runner to pull images from ECR 18 | AppRunnerRole: 19 | Type: AWS::IAM::Role 20 | Properties: 21 | AssumeRolePolicyDocument: 22 | Version: '2008-10-17' 23 | Statement: 24 | - Effect: Allow 25 | Principal: 26 | Service: 27 | - build.apprunner.amazonaws.com 28 | Action: sts:AssumeRole 29 | ManagedPolicyArns: 30 | - arn:aws:iam::aws:policy/service-role/AWSAppRunnerServicePolicyForECRAccess 31 | 32 | # The App Runner deployment of the container image from ECR 33 | ChatWeb: 34 | Type: AWS::AppRunner::Service 35 | Properties: 36 | SourceConfiguration: 37 | AuthenticationConfiguration: 38 | AccessRoleArn: !GetAtt AppRunnerRole.Arn 39 | ImageRepository: 40 | ImageRepositoryType: ECR 41 | ImageIdentifier: !Ref ImageUrl 42 | ImageConfiguration: 43 | Port: 80 44 | 45 | Outputs: 46 | WebEndpoint: 47 | Description: The endpoint of the web server 48 | Value: !GetAtt 'ChatWeb.ServiceUrl' 49 | Export: 50 | Name: !Sub '${EnvironmentName}:WebEndpoint' -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "root-linter", 3 | "version": "0.1.0", 4 | "devDependencies": { 5 | "eslint": "^8.31.0", 6 | "eslint-config-standard-with-typescript": "^26.0.0", 7 | "eslint-plugin-import": "^2.26.0", 8 | "eslint-plugin-n": "^15.6.0", 9 | "eslint-plugin-promise": "^6.1.1" 10 | } 11 | } -------------------------------------------------------------------------------- /services/message-index-drop/app.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const { defaultProvider } = require('@aws-sdk/credential-provider-node') // V3 SDK. 3 | const { Client } = require('@opensearch-project/opensearch') 4 | const { AwsSigv4Signer } = require('@opensearch-project/opensearch/aws') 5 | 6 | const client = new Client({ 7 | ...AwsSigv4Signer({ 8 | region: process.env.AWS_REGION, 9 | service: 'aoss', // 'aoss' for OpenSearch Serverless 10 | // Must return a Promise that resolve to an AWS.Credentials object. 11 | // This function is used to acquire the credentials when the client start and 12 | // when the credentials are expired. 13 | // The Client will refresh the Credentials only when they are expired. 14 | // With AWS SDK V2, Credentials.refreshPromise is used when available to refresh the credentials. 15 | 16 | // Example with AWS SDK V3: 17 | getCredentials: () => { 18 | // Any other method to acquire a new Credentials object can be used. 19 | const credentialsProvider = defaultProvider() 20 | return credentialsProvider() 21 | } 22 | }), 23 | node: process.env.MESSAGE_COLLECTION_ENDPOINT 24 | }) 25 | 26 | exports.handler = async (event) => { 27 | const INDEX_NAME = 'chat-messages' 28 | 29 | let response = await client.indices.delete({ 30 | index: INDEX_NAME 31 | }) 32 | 33 | console.log(response) 34 | } 35 | -------------------------------------------------------------------------------- /services/message-index-drop/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "message-indexer", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "@aws-sdk/credential-provider-node": "^3.266.1", 13 | "@opensearch-project/opensearch": "^2.2.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /services/message-indexer/app.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const { defaultProvider } = require('@aws-sdk/credential-provider-node') // V3 SDK. 3 | const { Client } = require('@opensearch-project/opensearch') 4 | const { AwsSigv4Signer } = require('@opensearch-project/opensearch/aws') 5 | 6 | const client = new Client({ 7 | ...AwsSigv4Signer({ 8 | region: process.env.AWS_REGION, 9 | service: 'aoss', // 'aoss' for OpenSearch Serverless 10 | // Must return a Promise that resolve to an AWS.Credentials object. 11 | // This function is used to acquire the credentials when the client start and 12 | // when the credentials are expired. 13 | // The Client will refresh the Credentials only when they are expired. 14 | // With AWS SDK V2, Credentials.refreshPromise is used when available to refresh the credentials. 15 | 16 | // Example with AWS SDK V3: 17 | getCredentials: () => { 18 | // Any other method to acquire a new Credentials object can be used. 19 | const credentialsProvider = defaultProvider() 20 | return credentialsProvider() 21 | } 22 | }), 23 | node: process.env.MESSAGE_COLLECTION_ENDPOINT 24 | }) 25 | 26 | /** 27 | * Example event coming in from the stream 28 | * 29 | * { 30 | "Records": [ 31 | { 32 | "eventID": "eb3730ac319f06a4552b91a600083d5f", 33 | "eventName": "INSERT", 34 | "eventVersion": "1.1", 35 | "eventSource": "aws:dynamodb", 36 | "awsRegion": "us-west-2", 37 | "dynamodb": { 38 | "ApproximateCreationDateTime": 1675812482, 39 | "Keys": { 40 | "message": { 41 | "S": "1675812482906:3d39a121bf5872" 42 | }, 43 | "room": { 44 | "S": "lambda" 45 | } 46 | }, 47 | "NewImage": { 48 | "avatar": { 49 | "S": "https://www.gravatar.com/avatar/13764f67b6bf4f47581b57800e719ab9?d=retro" 50 | }, 51 | "time": { 52 | "N": "1675812482906" 53 | }, 54 | "message": { 55 | "S": "1675812482906:3d39a121bf5872" 56 | }, 57 | "content": { 58 | "S": "{\"text\":\"Testing the DynamoDB stream\"}" 59 | }, 60 | "room": { 61 | "S": "lambda" 62 | }, 63 | "username": { 64 | "S": "anonymous_83d396" 65 | } 66 | }, 67 | "SequenceNumber": "865100000000015469830115", 68 | "SizeBytes": 249, 69 | "StreamViewType": "NEW_IMAGE" 70 | }, 71 | "eventSourceARN": "arn:aws:dynamodb:us-west-2:228578805541:table/production_Messages/stream/2023-02-07T17:11:32.070" 72 | } 73 | ] 74 | } 75 | */ 76 | 77 | // Global variable ensures that we don't have to check 78 | // for index existing on every single invoke, just the first 79 | let indexExists = false 80 | 81 | exports.handler = async (event) => { 82 | const INDEX_NAME = 'chat-messages' 83 | 84 | if (!indexExists) { 85 | console.log('Ensuring index exists') 86 | indexExists = await client.indices.exists({ 87 | index: INDEX_NAME 88 | }) 89 | 90 | if (!indexExists) { 91 | try { 92 | const settings = { 93 | settings: { 94 | index: { 95 | number_of_shards: 4, 96 | number_of_replicas: 2 97 | }, 98 | mappings: { 99 | properties: { 100 | content: { 101 | type: 'search_as_you_type' 102 | } 103 | } 104 | } 105 | } 106 | } 107 | 108 | const response = await client.indices.create({ 109 | index: INDEX_NAME, 110 | body: settings 111 | }) 112 | console.log(response.body) 113 | } catch (e) { 114 | console.log(e) 115 | } 116 | } 117 | } 118 | 119 | console.log('Adding messages to index') 120 | 121 | // TODO: Rewrite this to use the bulk API for faster performance: 122 | // https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/bulk_examples.html 123 | for (const record of event.Records) { 124 | if (!record.dynamodb.NewImage) { 125 | continue; 126 | } 127 | 128 | const response = await client.index({ 129 | id: record.dynamodb.Keys.room.S + ':' + record.dynamodb.Keys.message.S, 130 | index: INDEX_NAME, 131 | body: { 132 | room: record.dynamodb.Keys.room.S, 133 | message: record.dynamodb.Keys.message.S, 134 | avatar: record.dynamodb.NewImage.avatar.S, 135 | time: record.dynamodb.NewImage.time.S, 136 | content: JSON.parse(record.dynamodb.NewImage.content.S).text, 137 | username: record.dynamodb.NewImage.username.S 138 | } 139 | }) 140 | console.log(response) 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /services/message-indexer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "message-indexer", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "@aws-sdk/credential-provider-node": "^3.266.1", 13 | "@opensearch-project/opensearch": "^2.2.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /services/message-search/app.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const { defaultProvider } = require('@aws-sdk/credential-provider-node') // V3 SDK. 3 | const { Client } = require('@opensearch-project/opensearch') 4 | const { AwsSigv4Signer } = require('@opensearch-project/opensearch/aws') 5 | 6 | const client = new Client({ 7 | ...AwsSigv4Signer({ 8 | region: process.env.AWS_REGION, 9 | service: 'aoss', // 'aoss' for OpenSearch Serverless 10 | // Must return a Promise that resolve to an AWS.Credentials object. 11 | // This function is used to acquire the credentials when the client start and 12 | // when the credentials are expired. 13 | // The Client will refresh the Credentials only when they are expired. 14 | // With AWS SDK V2, Credentials.refreshPromise is used when available to refresh the credentials. 15 | 16 | // Example with AWS SDK V3: 17 | getCredentials: () => { 18 | // Any other method to acquire a new Credentials object can be used. 19 | const credentialsProvider = defaultProvider() 20 | return credentialsProvider() 21 | } 22 | }), 23 | node: process.env.MESSAGE_COLLECTION_ENDPOINT 24 | }) 25 | 26 | /** 27 | * Example event coming in from the stream 28 | * 29 | */ 30 | exports.handler = async (event) => { 31 | console.log(event) 32 | 33 | let searchTerm = '' 34 | 35 | if (event.queryStringParameters && event.queryStringParameters.q) { 36 | searchTerm = event.queryStringParameters.q 37 | } else { 38 | return { 39 | isBase64Encoded: false, 40 | statusCode: 200, 41 | body: 'Expected query parameter `q` which is a string', 42 | headers: { 43 | 'content-type': 'application/json' 44 | } 45 | } 46 | } 47 | 48 | const INDEX_NAME = 'chat-messages' 49 | 50 | console.log(`Searching for search term ${searchTerm}`) 51 | 52 | const response = await client.search({ 53 | index: INDEX_NAME, 54 | body: { 55 | query: { 56 | "multi_match": { 57 | "query": searchTerm, 58 | "type": "bool_prefix", 59 | "fields": [ 60 | "content", 61 | "content._2gram", 62 | "content._3gram" 63 | ] 64 | } 65 | } 66 | } 67 | }) 68 | 69 | if (response.statusCode === 200) { 70 | console.log(response.body.hits) 71 | 72 | const answer = response.body.hits.hits.map(function (hit) { 73 | return { 74 | score: hit._score, 75 | hit: { 76 | room: hit._source.room, 77 | message: hit._source.message, 78 | avatar: hit._source.avatar, 79 | content: { 80 | text: hit._source.content 81 | }, 82 | username: hit._source.username 83 | } 84 | } 85 | }) 86 | 87 | return { 88 | isBase64Encoded: false, 89 | statusCode: 200, 90 | body: JSON.stringify(answer), 91 | headers: { 92 | 'content-type': 'application/json' 93 | } 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /services/message-search/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "message-indexer", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "@aws-sdk/credential-provider-node": "^3.266.1", 13 | "@opensearch-project/opensearch": "^2.2.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /services/socket/.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | Dockerfile 3 | package-lock.json 4 | tests 5 | -------------------------------------------------------------------------------- /services/socket/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM public.ecr.aws/docker/library/node:20.1 AS build 2 | WORKDIR /srv 3 | ADD package.json . 4 | RUN npm install 5 | 6 | FROM public.ecr.aws/docker/library/node:20.1-slim 7 | COPY --from=build /srv . 8 | ADD . . 9 | EXPOSE 3000 10 | CMD ["node", "index.js"] 11 | -------------------------------------------------------------------------------- /services/socket/index.js: -------------------------------------------------------------------------------- 1 | // Entrypoint 2 | import { server } from './server.js' 3 | import config from './lib/config.js' 4 | 5 | server.listen(config.PORT, function () { 6 | console.log('Server listening at port %d', config.PORT) 7 | }) 8 | 9 | process.on('SIGTERM', function () { 10 | console.log('Received SIGTERM, shutting down server') 11 | server.close() 12 | process.exit(0) 13 | }) 14 | -------------------------------------------------------------------------------- /services/socket/lib/config.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | ENV_NAME: process.env.ENV_NAME, 3 | 4 | PORT: process.env.PORT || 3000, 5 | REGION: process.env.REGION || 'us-east-1', 6 | 7 | REDIS_ENDPOINT: process.env.REDIS_ENDPOINT, 8 | DYNAMODB_ENDPOINT: process.env.DYNAMODB_ENDPOINT, 9 | 10 | USER_TABLE: process.env.USER_TABLE, 11 | MESSAGE_TABLE: process.env.MESSAGE_TABLE, 12 | 13 | // Controls how often clients ping back and forth 14 | HEARTBEAT_TIMEOUT: 8000, 15 | HEARTBEAT_INTERVAL: 4000 16 | } 17 | 18 | config.SELF_URL = process.env.SELF_URL || 'http://localhost:' + config.PORT 19 | 20 | export default config 21 | -------------------------------------------------------------------------------- /services/socket/lib/db.js: -------------------------------------------------------------------------------- 1 | // This database wrapper helper methods to make interacting with DynamoDB 2 | // a little bit easier. It automatically retires with backoff when there are 3 | // throughput limit exceptions, and it automates making followup calls when 4 | // a batch has unprocessed keys 5 | 6 | import pkg from '@aws-sdk/lib-dynamodb' 7 | import { DynamoDB } from './dynamodb-doc-client.js' 8 | import retry from 'async/retry.js' 9 | 10 | const { 11 | GetCommand, 12 | QueryCommand, 13 | PutCommand, 14 | BatchGetCommand, 15 | BatchWriteCommand, 16 | UpdateCommand, 17 | TransactWriteCommand 18 | } = pkg 19 | 20 | const RETRYABLE_ERROR_CODES = { 21 | // Generic retryable DynamoDB error codes 22 | ItemCollectionSizeLimitExceededException: true, 23 | LimitExceededException: true, 24 | ProvisionedThroughputExceededException: true, 25 | RequestLimitExceeded: true, 26 | ResourceInUseException: true, 27 | ThrottlingException: true, 28 | UnrecognizedClientException: true, 29 | // DAX specific retryable errors 30 | NeedMoreData: true, 31 | 'Not enough data': true 32 | } 33 | 34 | // Errors which are expected possibilities, not to alert on 35 | const EXPECTED_ERROR_CODES = { 36 | ConditionalCheckFailedException: true 37 | } 38 | 39 | export const retryable = function (err) { 40 | if (err.name && EXPECTED_ERROR_CODES[err.name]) { 41 | // This is an expected error, let it throw for higher level handling 42 | return false 43 | } 44 | 45 | // An error code that came back from the API, but 46 | // this was an ephemeral error that we can retry 47 | if (err.name && RETRYABLE_ERROR_CODES[err.name]) { 48 | console.error('Retryable DynamoDB error: ' + err.code) 49 | return true 50 | } 51 | 52 | // Identify error based on type 53 | if (err.name && RETRYABLE_ERROR_CODES[typeof err]) { 54 | console.error('Retryable DynamoDB error: ' + typeof err) 55 | return true 56 | } 57 | 58 | // Identify error based on message 59 | if (err.message && RETRYABLE_ERROR_CODES[err.message]) { 60 | console.error('Retryable DynamoDB error: ' + err.message) 61 | return true 62 | } 63 | 64 | // console.error('Unexpected, unretryable DynamoDB error: ', err) 65 | return false 66 | } 67 | 68 | // Define the policy for whether or not to retry, how long to wait, and how many times 69 | export const getDefaultRetryPolicy = function () { 70 | return { 71 | times: 4, 72 | interval: exponentialBackoff, 73 | errorFilter: retryable 74 | } 75 | } 76 | 77 | // Exponential backoff function 78 | // 50ms, 100ms, 200ms, 400ms, etc 79 | export const exponentialBackoff = function (retryCount) { 80 | return 25 * Math.pow(2, retryCount) 81 | } 82 | 83 | // For fetches that take multiple DynamoDB API calls to fetch 84 | // the full set, this helper function combines the result sets 85 | // into one response. 86 | export const combineResultSets = function (setOne, setTwo) { 87 | const combinedResults = {} 88 | 89 | for (const table in setTwo) { 90 | if (setOne[table]) { 91 | combinedResults[table] = setOne[table].concat(setTwo[table]) 92 | } else { 93 | combinedResults[table] = setTwo[table] 94 | } 95 | } 96 | 97 | return combinedResults 98 | } 99 | 100 | export const batchGet = async function (query) { 101 | return await retry( 102 | getDefaultRetryPolicy(), 103 | async function attemptBatchGet () { 104 | const results = await DynamoDB.send(new BatchGetCommand(query)) 105 | 106 | // All results were fetched, so fast return. 107 | if (!results.UnprocessedKeys || Object.keys(results.UnprocessedKeys).length === 0) { 108 | return results 109 | } 110 | 111 | const moreResults = await batchGet({ 112 | RequestItems: results.UnprocessedKeys 113 | }) 114 | 115 | return combineResultSets(results, moreResults) 116 | } 117 | ) 118 | } 119 | 120 | export const batchPut = async function (query) { 121 | return await retry( 122 | getDefaultRetryPolicy(), 123 | async function attemptBatchGet () { 124 | const results = await DynamoDB.send(new BatchWriteCommand(query)) 125 | 126 | // All results were stored, so fast return. 127 | if (!results.UnprocessedKeys || Object.keys(results.UnprocessedKeys).length === 0) { 128 | return 129 | } 130 | 131 | // Partial success, but there were some unprocessed keys 132 | // we need to retry the put on. 133 | await batchPut({ 134 | RequestItems: results.UnprocessedKeys 135 | }) 136 | } 137 | ) 138 | } 139 | 140 | export const put = async function (query) { 141 | return await retry( 142 | getDefaultRetryPolicy(), 143 | async function attemptPut () { 144 | return await DynamoDB.send(new PutCommand(query)) 145 | } 146 | ) 147 | } 148 | 149 | export const update = async function (query) { 150 | const results = await retry( 151 | getDefaultRetryPolicy(), 152 | async function attemptPut () { 153 | return await DynamoDB.send(new UpdateCommand(query)) 154 | } 155 | ) 156 | 157 | return results.Attributes 158 | } 159 | 160 | export const get = async function (query) { 161 | const results = await retry( 162 | getDefaultRetryPolicy(), 163 | async function attemptGet () { 164 | return await DynamoDB.send(new GetCommand(query)) 165 | } 166 | ) 167 | 168 | return results.Item 169 | } 170 | 171 | export const query = async function (query) { 172 | return await retry( 173 | getDefaultRetryPolicy(), 174 | async function attemptQuery () { 175 | return await DynamoDB.send(new QueryCommand(query)) 176 | } 177 | ) 178 | } 179 | 180 | export const transact = async function (query) { 181 | return await retry( 182 | getDefaultRetryPolicy(), 183 | async function attemptQuery () { 184 | return await DynamoDB.send(new TransactWriteCommand(query)) 185 | } 186 | ) 187 | } 188 | -------------------------------------------------------------------------------- /services/socket/lib/dynamodb-client.js: -------------------------------------------------------------------------------- 1 | // Create service client module using ES6 syntax. 2 | import { DynamoDBClient } from '@aws-sdk/client-dynamodb' 3 | import config from './config.js' 4 | 5 | // Create an Amazon DynamoDB service client object. 6 | const ddbClient = new DynamoDBClient({ 7 | endpoint: config.DYNAMODB_ENDPOINT 8 | }) 9 | export { ddbClient } 10 | -------------------------------------------------------------------------------- /services/socket/lib/dynamodb-doc-client.js: -------------------------------------------------------------------------------- 1 | import { DynamoDBDocumentClient } from '@aws-sdk/lib-dynamodb' 2 | import { ddbClient } from './dynamodb-client.js' 3 | 4 | const marshallOptions = { 5 | // Whether to automatically convert empty strings, blobs, and sets to `null`. 6 | convertEmptyValues: false, // false, by default. 7 | // Whether to remove undefined values while marshalling. 8 | removeUndefinedValues: false, // false, by default. 9 | // Whether to convert typeof object to map attribute. 10 | convertClassInstanceToMap: false // false, by default. 11 | } 12 | 13 | const unmarshallOptions = { 14 | // Whether to return numbers as a string instead of converting them to native JavaScript numbers. 15 | wrapNumbers: false // false, by default. 16 | } 17 | 18 | const translateConfig = { marshallOptions, unmarshallOptions } 19 | 20 | // Create the DynamoDB Document client. 21 | const DynamoDB = DynamoDBDocumentClient.from(ddbClient, translateConfig) 22 | 23 | export { DynamoDB } 24 | -------------------------------------------------------------------------------- /services/socket/lib/message.js: -------------------------------------------------------------------------------- 1 | import crypto from 'crypto' 2 | import _ from 'lodash' 3 | import config from './config.js' 4 | import * as DB from './db.js' 5 | 6 | /** 7 | * Add a message to a room 8 | * 9 | * @param {object} message 10 | * @param {string} message.room 11 | * @param {string} message.username 12 | * @param {string} message.avatar 13 | * @param {object} message.content 14 | * @param {Date} message.time 15 | **/ 16 | export const add = async function (message) { 17 | try { 18 | const id = message.time + ':' + crypto.randomBytes(7).toString('hex') 19 | 20 | await DB.put({ 21 | TableName: config.MESSAGE_TABLE, 22 | Item: { 23 | room: message.room, 24 | username: message.username, 25 | avatar: message.avatar, 26 | content: JSON.stringify(message.content), 27 | time: message.time, 28 | message: id 29 | } 30 | }) 31 | 32 | return id 33 | } catch (e) { 34 | console.error(e) 35 | 36 | throw new Error('Failed to insert new user in database') 37 | } 38 | } 39 | 40 | /** 41 | * Fetch a list of the messages in a room 42 | * 43 | * @param {object} where 44 | * @param {string} where.room 45 | * @param {string} where.message 46 | **/ 47 | export const listFromRoom = async function (where) { 48 | let messages 49 | 50 | try { 51 | messages = await DB.query({ 52 | TableName: config.MESSAGE_TABLE, 53 | KeyConditionExpression: 'room = :room', 54 | Limit: 20, 55 | ExpressionAttributeValues: { 56 | ':room': where.room 57 | }, 58 | ExclusiveStartKey: where.message ? where : undefined, 59 | ScanIndexForward: false // Always return newest items first 60 | }) 61 | } catch (e) { 62 | console.error(e) 63 | 64 | throw e 65 | } 66 | 67 | return { 68 | next: _.get(messages, 'LastEvaluatedKey'), 69 | messages: messages.Items.map(function (message) { 70 | return { 71 | message: message.message, 72 | avatar: message.avatar, 73 | username: message.username, 74 | content: JSON.parse(message.content), 75 | time: message.time, 76 | room: message.room 77 | } 78 | }) 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /services/socket/lib/presence.js: -------------------------------------------------------------------------------- 1 | import { redis } from './redis.js' 2 | 3 | /** 4 | * Remember a present user with their connection ID 5 | * 6 | * @param {string} connectionId - The ID of the connection 7 | * @param {object} meta - Any metadata about the connection 8 | **/ 9 | export const upsert = async function (connectionId, meta) { 10 | await redis.hSet('presence', connectionId, 11 | JSON.stringify({ 12 | meta, 13 | when: Date.now() 14 | }) 15 | ) 16 | } 17 | 18 | /** 19 | * Remove a presence. Used when someone disconnects 20 | * 21 | * @param {string} connectionId - The ID of the connection 22 | * @param {object} meta - Any metadata about the connection 23 | **/ 24 | export const remove = async function (connectionId) { 25 | await redis.hDel('presence', connectionId) 26 | } 27 | 28 | /** 29 | * Returns a list of present users, minus any expired 30 | * 31 | **/ 32 | export const list = async function () { 33 | const active = [] 34 | const dead = [] 35 | const now = Date.now() 36 | 37 | const presence = await redis.hGetAll('presence') 38 | 39 | for (const connection in presence) { 40 | const details = JSON.parse(presence[connection]) 41 | details.connection = connection 42 | 43 | if (now - details.when > 8000) { 44 | dead.push(details) 45 | } else { 46 | active.push(details) 47 | } 48 | } 49 | 50 | if (dead.length) { 51 | clean(dead) 52 | } 53 | 54 | return active 55 | } 56 | 57 | /** 58 | * Cleans a list of connections by removing expired ones 59 | * 60 | * @param {array} toDelete - A list of expired presences to remove 61 | **/ 62 | const clean = function (toDelete) { 63 | console.log(`Cleaning ${toDelete.length} expired presences`) 64 | for (const presence of toDelete) { 65 | remove(presence.connection) 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /services/socket/lib/redis.js: -------------------------------------------------------------------------------- 1 | import { createClient } from 'redis' 2 | import config from './config.js' 3 | 4 | export const redis = createClient({ 5 | url: config.REDIS_ENDPOINT 6 | }) 7 | 8 | redis.on('error', err => console.log('Redis Client Error', err)) 9 | 10 | await redis.connect() 11 | 12 | export default redis 13 | -------------------------------------------------------------------------------- /services/socket/lib/user.js: -------------------------------------------------------------------------------- 1 | import config from './config.js' 2 | import bcrypt from 'bcrypt' 3 | import * as DB from './db.js' 4 | 5 | const SALT_ROUNDS = 10 6 | 7 | /** 8 | * Get a user by their username 9 | * 10 | * @param {string} username - Username of the user 11 | * @param {string} password - The user's password 12 | **/ 13 | export const fetchByUsername = async function (username) { 14 | let details = null 15 | 16 | try { 17 | details = await DB.get({ 18 | TableName: config.USER_TABLE, 19 | Key: { 20 | username 21 | } 22 | }) 23 | } catch (e) { 24 | console.error(e) 25 | 26 | throw new Error('Failed to lookup user by username') 27 | } 28 | 29 | return details 30 | } 31 | 32 | /** 33 | * Create a new user with given details 34 | * 35 | * @param {object} details 36 | * @param {string} details.username 37 | * @param {string} details.email 38 | * @param {string} details.password 39 | **/ 40 | export const create = async function (details) { 41 | const existingAccount = await fetchByUsername(details.username) 42 | 43 | if (existingAccount) { 44 | throw new Error('That username is taken already.') 45 | } 46 | 47 | let passwordHash = null 48 | 49 | try { 50 | passwordHash = await bcrypt.hash(details.password, SALT_ROUNDS) 51 | } catch (e) { 52 | console.error(e) 53 | throw e 54 | } 55 | 56 | try { 57 | await DB.put({ 58 | TableName: config.USER_TABLE, 59 | Item: { 60 | username: details.username, 61 | email: details.email, 62 | passwordHash 63 | } 64 | }) 65 | } catch (e) { 66 | console.error(e) 67 | 68 | throw new Error('Failed to insert new user in database') 69 | } 70 | 71 | return 'Success' 72 | } 73 | 74 | /** 75 | * Authenticate a user who submits their username and plaintext password 76 | * 77 | * @param {object} details 78 | * @param {string} details.username 79 | * @param {string} details.password 80 | **/ 81 | export const authenticate = async function (details) { 82 | const account = await fetchByUsername(details.username) 83 | 84 | if (!account) { 85 | throw new Error('No matching account found') 86 | } 87 | 88 | const passed = await bcrypt.compare(details.password, account.passwordHash) 89 | 90 | if (passed) { 91 | return { 92 | username: account.username, 93 | email: account.email 94 | } 95 | } 96 | 97 | return false 98 | } 99 | -------------------------------------------------------------------------------- /services/socket/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "socket.io-chat", 3 | "version": "0.0.0", 4 | "type": "module", 5 | "description": "A simple chat client using socket.io", 6 | "main": "index.js", 7 | "private": true, 8 | "license": "BSD", 9 | "dependencies": { 10 | "async": "3.2.4", 11 | "@aws-sdk/lib-dynamodb": "3.245.0", 12 | "bcrypt": "5.1.0", 13 | "compression": "1.7.4", 14 | "express": "4.18.2", 15 | "express-sslify": "^1.2.0", 16 | "lodash": "4.17.21", 17 | "redis": "4.6.4", 18 | "socket.io": "4.5.4", 19 | "@socket.io/redis-adapter": "8.0.1" 20 | }, 21 | "scripts": { 22 | "start": "LOCAL=true REGION=us-east-1 ENV_NAME=test REDIS_ENDPOINT=localhost DYNAMODB_ENDPOINT=http://localhost:8000 AWS_ACCESS_KEY_ID=test AWS_SECRET_ACCESS_KEY=test node index.js" 23 | }, 24 | "eslintConfig": { 25 | "globals": { 26 | "Vue": true 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /services/socket/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathanpeck/socket.io-chat-fargate/c539fd0b1d3cc469a83a6db304716cef97201245/services/socket/public/favicon.ico -------------------------------------------------------------------------------- /services/socket/public/index.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | Fargate Chat 21 | 22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 | 33 |
34 | 35 |
36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /services/socket/public/static/images/ecs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon-Architecture/64/Arch_Amazon-Elastic-Container-Service_64 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /services/socket/public/static/images/fargate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon-Architecture/64/Arch_AWS-Fargate_64 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /services/socket/public/static/images/lambda.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon-Architecture/64/Arch_AWS-Lambda_64 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /services/socket/public/static/images/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /services/socket/public/static/images/serverless.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon-Architecture/64/Arch_AWS-Serverless-Application-Repository_64 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /services/socket/public/static/style.css: -------------------------------------------------------------------------------- 1 | /* Styles based on https://bootsnipp.com/snippets/0e3Ma */ 2 | 3 | body { 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | min-height: 100vh; 8 | background: #042029; 9 | font-family: "proxima-nova", "Source Sans Pro", sans-serif; 10 | font-size: 1em; 11 | letter-spacing: 0.1px; 12 | color: #32465a; 13 | text-rendering: optimizeLegibility; 14 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); 15 | -webkit-font-smoothing: antialiased; 16 | } 17 | 18 | a { 19 | color: #FF9900; 20 | } 21 | 22 | a:hover { 23 | color: #FF8800; 24 | } 25 | 26 | .btn { 27 | border: 1px solid #FF9900; 28 | background: #FF8800; 29 | } 30 | 31 | .btn:hover { 32 | border: 1px solid #FF9900; 33 | background: #FF9900; 34 | } 35 | 36 | #frame { 37 | width: 100%; 38 | min-width: 360px; 39 | /*max-width: 1000px;*/ 40 | height: 100vh; 41 | min-height: 300px; 42 | background: #E6EAEA; 43 | } 44 | 45 | @media screen and (max-width: 360px) { 46 | #frame { 47 | width: 100%; 48 | height: 100vh; 49 | } 50 | } 51 | 52 | #frame #sidepanel { 53 | float: left; 54 | min-width: 280px; 55 | max-width: 340px; 56 | width: 40%; 57 | height: 100%; 58 | background: #dadfdf; 59 | color: #32465a; 60 | overflow: hidden; 61 | position: relative; 62 | } 63 | 64 | @media screen and (max-width: 735px) { 65 | #frame #sidepanel { 66 | width: 58px; 67 | min-width: 58px; 68 | } 69 | } 70 | 71 | #frame #sidepanel .rooms { 72 | height: calc(100% - 177px); 73 | overflow: hidden; 74 | border-top: 3px solid #a8a8a8; 75 | } 76 | 77 | @media screen and (max-width: 735px) { 78 | #frame #sidepanel .rooms { 79 | height: calc(100% - 149px); 80 | overflow-y: scroll; 81 | overflow-x: hidden; 82 | } 83 | 84 | #frame #sidepanel .rooms::-webkit-scrollbar { 85 | display: none; 86 | } 87 | } 88 | 89 | #frame #sidepanel .rooms.expanded { 90 | height: calc(100% - 334px); 91 | } 92 | 93 | #frame #sidepanel .rooms ul { 94 | margin: 0px; 95 | padding: 0px; 96 | width: 100%; 97 | } 98 | 99 | #frame #sidepanel .rooms ul li.room { 100 | position: relative; 101 | padding: 10px 0 15px 0; 102 | font-size: 0.9em; 103 | cursor: pointer; 104 | border-right: 5px solid #d6dada; 105 | } 106 | 107 | @media screen and (max-width: 735px) { 108 | #frame #sidepanel .rooms ul li.room { 109 | padding: 6px 0 46px 8px; 110 | } 111 | } 112 | 113 | #frame #sidepanel .rooms ul li.room:hover { 114 | background: #E6EAEA; 115 | } 116 | 117 | #frame #sidepanel .rooms ul li.room.active { 118 | background: #E6EAEA; 119 | border-right: 5px solid #FF9900; 120 | } 121 | 122 | #frame #sidepanel .rooms ul li.room.active span.room-status { 123 | border: 2px solid #E6EAEA !important; 124 | } 125 | 126 | #frame #sidepanel .rooms ul li.room .wrap { 127 | width: 88%; 128 | margin: 0 auto; 129 | position: relative; 130 | } 131 | 132 | @media screen and (max-width: 735px) { 133 | #frame #sidepanel .rooms ul li.room .wrap { 134 | width: 100%; 135 | } 136 | } 137 | 138 | #frame #sidepanel .rooms ul li.room .wrap span { 139 | position: absolute; 140 | left: 0; 141 | margin: -2px 0 0 -2px; 142 | width: 10px; 143 | height: 10px; 144 | border-radius: 50%; 145 | border: 2px solid #2c3e50; 146 | background: #95a5a6; 147 | } 148 | 149 | #frame #sidepanel .rooms ul li.room .wrap span.online { 150 | background: #2ecc71; 151 | } 152 | 153 | #frame #sidepanel .rooms ul li.room .wrap span.away { 154 | background: #f1c40f; 155 | } 156 | 157 | #frame #sidepanel .rooms ul li.room .wrap span.unread { 158 | background: #FF9900; 159 | } 160 | 161 | #frame #sidepanel .rooms ul li.room .wrap span.none { 162 | background: transparent; 163 | border: 0px transparent; 164 | } 165 | 166 | #frame #sidepanel .rooms ul li.room .wrap img { 167 | width: 40px; 168 | border-radius: 10%; 169 | float: left; 170 | margin-right: 10px; 171 | } 172 | 173 | @media screen and (max-width: 735px) { 174 | #frame #sidepanel .rooms ul li.room .wrap img { 175 | margin-right: 0px; 176 | } 177 | } 178 | 179 | #frame #sidepanel .rooms ul li.room .wrap .meta { 180 | padding: 5px 0 0 0; 181 | } 182 | 183 | @media screen and (max-width: 735px) { 184 | #frame #sidepanel .rooms ul li.room .wrap .meta { 185 | display: none; 186 | } 187 | } 188 | 189 | #frame #sidepanel .rooms ul li.room .wrap .meta .name { 190 | font-weight: 600; 191 | white-space: nowrap; 192 | overflow: hidden; 193 | text-overflow: ellipsis; 194 | } 195 | 196 | #frame #sidepanel .rooms ul li.room .wrap .meta .preview { 197 | margin: 5px 0 0 0; 198 | padding: 0 0 1px; 199 | font-weight: 400; 200 | white-space: nowrap; 201 | overflow: hidden; 202 | text-overflow: ellipsis; 203 | -moz-transition: 1s all ease; 204 | -o-transition: 1s all ease; 205 | -webkit-transition: 1s all ease; 206 | transition: 1s all ease; 207 | } 208 | 209 | #frame #sidepanel .rooms ul li.room .wrap .meta .preview span { 210 | position: initial; 211 | border-radius: initial; 212 | background: none; 213 | border: none; 214 | padding: 0 2px 0 0; 215 | margin: 0 0 0 1px; 216 | opacity: .5; 217 | } 218 | 219 | 220 | #frame .content { 221 | float: right; 222 | width: 60%; 223 | height: 100%; 224 | overflow: hidden; 225 | position: relative; 226 | } 227 | 228 | @media screen and (max-width: 735px) { 229 | #frame .content { 230 | width: calc(100% - 58px); 231 | min-width: 300px !important; 232 | } 233 | } 234 | 235 | @media screen and (min-width: 850px) { 236 | #frame .content { 237 | width: calc(100% - 340px); 238 | } 239 | } 240 | 241 | #frame div.search { 242 | width: 100%; 243 | height: 60px; 244 | line-height: 60px; 245 | background: #eaeaea; 246 | cursor: pointer; 247 | border-right: 3px solid #e3e2e2; 248 | } 249 | 250 | #frame div.search:hover { 251 | background: #f0f0f0; 252 | } 253 | 254 | #frame .search img { 255 | width: 30px; 256 | border-radius: 10%; 257 | float: left; 258 | margin: 15px 15px 0px 24px 259 | } 260 | 261 | @media screen and (max-width: 735px) { 262 | #frame .search p { 263 | display: none; 264 | } 265 | 266 | #frame .search img { 267 | margin: 15px 15px 0px 14px 268 | } 269 | } 270 | 271 | #frame .content .room-details { 272 | width: 100%; 273 | height: 60px; 274 | line-height: 60px; 275 | background: #f5f5f5; 276 | } 277 | 278 | #frame .content .room-details img.description { 279 | width: 40px; 280 | border-radius: 10%; 281 | float: left; 282 | margin: 9px 12px 0 9px; 283 | } 284 | 285 | #frame .content .room-details p { 286 | float: left; 287 | } 288 | 289 | #frame .content .room-details .online-count { 290 | float: right; 291 | margin-left: 14px; 292 | margin-right: 20px; 293 | } 294 | 295 | /* NEW STYES */ 296 | #frame .content .messages-wrapper { 297 | border-top: 3px solid #a8a8a8; 298 | } 299 | 300 | #frame .content .messages-wrapper .list { 301 | height: auto; 302 | min-height: calc(100% - 93px); 303 | max-height: calc(100% - 93px); 304 | overflow-x: hidden; 305 | overflow-y: scroll; 306 | } 307 | 308 | @media screen and (max-width: 735px) { 309 | #frame .content .messages-wrapper .list { 310 | max-height: calc(100% - 105px); 311 | } 312 | } 313 | 314 | #frame .content .messages-wrapper .list::-webkit-scrollbar { 315 | width: 8px; 316 | background: transparent; 317 | } 318 | 319 | #frame .content .messages-wrapper .list::-webkit-scrollbar-thumb { 320 | background-color: rgba(0, 0, 0, 0.3); 321 | } 322 | 323 | #frame .content .messages-wrapper .list .message:nth-last-child(1) { 324 | margin-bottom: 20px; 325 | } 326 | 327 | #frame .content .messages-wrapper .list .message { 328 | display: inline-block; 329 | margin: 5px 15px 5px 15px; 330 | width: calc(100% - 25px); 331 | font-size: 0.9em; 332 | } 333 | 334 | #frame .content .messages-wrapper .list .message img { 335 | margin: 6px 8px 0 0; 336 | width: 22px; 337 | border-radius: 50%; 338 | float: left; 339 | } 340 | 341 | #frame .content .messages-wrapper .list .message p { 342 | float: left; 343 | display: inline-block; 344 | padding: 10px 15px; 345 | border-radius: 20px; 346 | max-width: calc(100% - 45px); 347 | line-height: 130%; 348 | word-wrap: break-word; 349 | } 350 | 351 | #frame .content .messages-wrapper .list .message .sender { 352 | display: block; 353 | clear: right; 354 | padding: 2px 40px; 355 | font-size: 0.8em; 356 | font-color: #888888; 357 | } 358 | 359 | #frame .content .messages-wrapper .list .message.sent p { 360 | background: #FF8800; 361 | color: #f5f5f5; 362 | } 363 | 364 | #frame .content .messages-wrapper .list .message.replies p { 365 | background: #f5f5f5; 366 | } 367 | 368 | 369 | #frame .content .message-input { 370 | position: absolute; 371 | bottom: 0; 372 | width: 100%; 373 | z-index: 50; 374 | } 375 | 376 | #frame .content .message-input .wrap { 377 | position: relative; 378 | } 379 | 380 | #frame .content .message-input .wrap input { 381 | font-family: "proxima-nova", "Source Sans Pro", sans-serif; 382 | float: left; 383 | border: none; 384 | width: calc(100% - 50px); 385 | padding: 11px 32px 12px 8px; 386 | font-size: 0.8em; 387 | color: #32465a; 388 | } 389 | 390 | @media screen and (max-width: 735px) { 391 | #frame .content .message-input .wrap input { 392 | padding: 15px 32px 16px 8px; 393 | } 394 | } 395 | 396 | #frame .content .message-input .wrap input:focus { 397 | outline: none; 398 | } 399 | 400 | #frame .content .message-input .wrap button { 401 | float: right; 402 | border: none; 403 | width: 50px; 404 | padding: 12px 0; 405 | cursor: pointer; 406 | background: linear-gradient(228deg, rgb(255 138 35), rgb(217, 96, 15), rgb(186, 61, 21)); 407 | color: #f5f5f5; 408 | } 409 | 410 | @media screen and (max-width: 735px) { 411 | #frame .content .message-input .wrap button { 412 | padding: 16px 0; 413 | } 414 | } 415 | 416 | #frame .content .message-input .wrap button:hover { 417 | background: #FF8800; 418 | } 419 | 420 | #frame .content .message-input .wrap button:focus { 421 | outline: none; 422 | } 423 | 424 | #frame .content .message-input-form { 425 | background: white; 426 | position: absolute; 427 | bottom: 0; 428 | width: 100%; 429 | z-index: 50; 430 | padding-bottom: 15px; 431 | } 432 | 433 | #frame .content .message-input-form .wrap { 434 | margin: 15px; 435 | } 436 | 437 | #frame .content .message-input-form .form-group { 438 | margin: 0px; 439 | } 440 | 441 | #frame .content .message-input-form .input-group { 442 | margin-bottom: 5px; 443 | } 444 | 445 | /* Typing indicator based on https://codepen.io/fusco/pen/XbpaYv */ 446 | .typing-indicator { 447 | float: left; 448 | margin: 6px 0 0 8px; 449 | background-color: #f5f5f5; 450 | will-change: transform; 451 | width: auto; 452 | border-radius: 50px; 453 | padding: 15px; 454 | display: table; 455 | margin: 0 auto; 456 | position: relative; 457 | -webkit-animation: 2s bulge infinite ease-out; 458 | animation: 2s bulge infinite ease-out; 459 | } 460 | 461 | .typing-indicator span { 462 | height: 5px; 463 | width: 5px; 464 | float: left; 465 | margin: 0 1px; 466 | background-color: #32465a; 467 | display: block; 468 | border-radius: 50%; 469 | opacity: 0.4; 470 | } 471 | 472 | .typing-indicator span:nth-of-type(1) { 473 | -webkit-animation: 1s blink infinite 0.3333s; 474 | animation: 1s blink infinite 0.3333s; 475 | } 476 | 477 | .typing-indicator span:nth-of-type(2) { 478 | -webkit-animation: 1s blink infinite 0.6666s; 479 | animation: 1s blink infinite 0.6666s; 480 | } 481 | 482 | .typing-indicator span:nth-of-type(3) { 483 | -webkit-animation: 1s blink infinite 0.9999s; 484 | animation: 1s blink infinite 0.9999s; 485 | } 486 | 487 | @-webkit-keyframes blink { 488 | 50% { 489 | opacity: 1; 490 | } 491 | } 492 | 493 | @keyframes blink { 494 | 50% { 495 | opacity: 1; 496 | } 497 | } 498 | 499 | @-webkit-keyframes bulge { 500 | 50% { 501 | -webkit-transform: scale(1.05); 502 | transform: scale(1.05); 503 | } 504 | } 505 | 506 | @keyframes bulge { 507 | 50% { 508 | -webkit-transform: scale(1.05); 509 | transform: scale(1.05); 510 | } 511 | } 512 | 513 | /* Dropdown with arrow adapted from https://bootsnipp.com/snippets/featured/dropdown-menu-ui */ 514 | .dropdown { 515 | z-index: 11 516 | } 517 | 518 | .dropdown-menu>li.item { 519 | line-height: 22px; 520 | margin-left: 1em; 521 | margin-right: 1em; 522 | vertical-align: baseline; 523 | white-space: nowrap; 524 | } 525 | 526 | .dropdown-menu>li.divider { 527 | margin-top: 5px; 528 | margin-bottom: 5px; 529 | } 530 | 531 | .dropdown-menu>li.item img { 532 | width: 22px; 533 | border-radius: 50%; 534 | margin: 0 5px 0 0; 535 | vertical-align: middle 536 | } 537 | 538 | .dropdown ul.dropdown-menu { 539 | position: absolute; 540 | top: calc(100% - 15px); 541 | left: unset; 542 | right: 0px; 543 | border-radius: 4px; 544 | box-shadow: none; 545 | margin-top: 20px; 546 | } 547 | 548 | .dropdown ul.dropdown-menu:before { 549 | content: ""; 550 | border-bottom: 10px solid #fff; 551 | border-right: 10px solid transparent; 552 | border-left: 10px solid transparent; 553 | position: absolute; 554 | top: -10px; 555 | right: 16px; 556 | z-index: 10; 557 | } 558 | 559 | .dropdown ul.dropdown-menu:after { 560 | content: ""; 561 | border-bottom: 12px solid #ccc; 562 | border-right: 12px solid transparent; 563 | border-left: 12px solid transparent; 564 | position: absolute; 565 | top: -12px; 566 | right: 14px; 567 | z-index: 9; 568 | } 569 | 570 | .fade-enter-active, 571 | .fade-leave-active { 572 | transition: opacity .5s; 573 | } 574 | 575 | .fade-enter, 576 | .fade-leave-to 577 | 578 | /* .fade-leave-active below version 2.1.8 */ 579 | { 580 | opacity: 0; 581 | } 582 | 583 | /* Search overlay */ 584 | 585 | /* DIV-element with black background and 50% opacity set */ 586 | div.overlay { 587 | position: fixed; 588 | width: 100%; 589 | height: 100%; 590 | top: 0; 591 | left: 0; 592 | background: rgb(212, 208, 208); 593 | opacity: 0.5; 594 | filter: alpha(opacity=50); 595 | z-index: 80; 596 | /* required for opacity to work in IE */ 597 | } 598 | 599 | 600 | .searcher { 601 | position: relative; 602 | max-width: 600px; 603 | margin: 150px auto; 604 | z-index: 99; 605 | } 606 | 607 | .searcher .searchInput { 608 | background: #fff; 609 | width: 100%; 610 | height: auto; 611 | border-radius: 5px; 612 | position: absolute; 613 | box-shadow: 0px 1px 5px 3px rgba(0, 0, 0, 0.12); 614 | } 615 | 616 | .searchInput input { 617 | height: 55px; 618 | width: 100%; 619 | outline: none; 620 | border: none; 621 | border-radius: 5px; 622 | padding: 0 60px 0 20px; 623 | font-size: 18px; 624 | box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1); 625 | } 626 | 627 | .searchInput.active input { 628 | border-radius: 5px 5px 0 0; 629 | } 630 | 631 | .searchInput .resultBox { 632 | padding: 0; 633 | opacity: 1; 634 | pointer-events: none; 635 | max-height: 280px; 636 | overflow-y: auto; 637 | } 638 | 639 | .searchInput .icon { 640 | position: absolute; 641 | right: 0px; 642 | top: 0px; 643 | height: 55px; 644 | width: 55px; 645 | text-align: center; 646 | line-height: 55px; 647 | font-size: 20px; 648 | color: gray; 649 | cursor: pointer; 650 | } 651 | 652 | .searchInput .icon i { 653 | margin-top: 17px; 654 | } 655 | 656 | b { 657 | font-weight: bold; 658 | } 659 | 660 | 661 | .searcher .message { 662 | padding: 10px; 663 | padding-bottom: 15px; 664 | display: inline-block; 665 | width: 100%; 666 | font-size: 0.9em; 667 | border-bottom: 1px solid #ebebeb; 668 | pointer-events: auto; 669 | cursor: pointer; 670 | } 671 | 672 | .searcher .message:last-child { 673 | border-bottom: none; 674 | border-bottom-left-radius: 5px; 675 | border-bottom-right-radius: 5px; 676 | } 677 | 678 | .searcher .message:hover { 679 | background: #ffd6b9; 680 | } 681 | 682 | .searcher .message img { 683 | margin: 6px 8px 0 0; 684 | width: 22px; 685 | border-radius: 50%; 686 | float: left; 687 | } 688 | 689 | .searcher .message p { 690 | float: left; 691 | display: inline-block; 692 | padding: 10px 15px; 693 | border-radius: 20px; 694 | max-width: calc(100% - 45px); 695 | line-height: 130%; 696 | word-wrap: break-word; 697 | background-color: #ebebeb 698 | } 699 | 700 | .searcher .message .sender { 701 | display: block; 702 | clear: right; 703 | padding: 2px 40px; 704 | font-size: 0.8em; 705 | font-color: #888888; 706 | } -------------------------------------------------------------------------------- /services/socket/public/static/vue-virtual-scroll.js: -------------------------------------------------------------------------------- 1 | ;(function (root, factory) { 2 | var namespace = 'VirtualScrollList' 3 | if (typeof exports === 'object' && typeof module === 'object') { 4 | module.exports = factory(namespace, require('vue')) 5 | } else if (typeof define === 'function' && define.amd) { 6 | define(['vue'], factory.bind(root, namespace)) 7 | } else if (typeof exports === 'object') { 8 | exports[namespace] = factory(namespace, require('vue')) 9 | } else { 10 | root[namespace] = factory(namespace, root['Vue']) 11 | } 12 | })(this, function (namespace, Vue2) { 13 | if (typeof Vue2 === 'object' && typeof Vue2.default === 'function') { 14 | Vue2 = Vue2.default 15 | } 16 | 17 | var _debounce = function (func, wait, immediate) { 18 | var timeout 19 | return function () { 20 | var context = this 21 | var args = arguments 22 | var later = function () { 23 | timeout = null 24 | if (!immediate) { 25 | func.apply(context, args) 26 | } 27 | } 28 | var callNow = immediate && !timeout 29 | clearTimeout(timeout) 30 | timeout = setTimeout(later, wait) 31 | if (callNow) { 32 | func.apply(context, args) 33 | } 34 | } 35 | } 36 | 37 | return Vue2.component(namespace, { 38 | props: { 39 | size: { type: Number, required: true }, 40 | remain: { type: Number, required: true }, 41 | rtag: { type: String, default: 'div' }, 42 | wtag: { type: String, default: 'div' }, 43 | wclass: { type: String, default: '' }, 44 | start: { type: Number, default: 0 }, 45 | offset: { type: Number, default: 0 }, 46 | variable: [Function, Boolean], 47 | bench: Number, 48 | debounce: Number, 49 | totop: Function, 50 | tobottom: Function, 51 | onscroll: Function 52 | }, 53 | 54 | created: function () { 55 | var start = this.start >= this.remain ? this.start : 0 56 | var keeps = this.remain + (this.bench || this.remain) 57 | 58 | this.delta = { 59 | start: start, // start index. 60 | end: start + keeps - 1, // end index. 61 | keeps: keeps, // nums keeping in real dom. 62 | total: 0, // all items count, update in filter. 63 | offsetAll: 0, // cache all the scrollable offset. 64 | paddingTop: 0, // container wrapper real padding-top. 65 | paddingBottom: 0, // container wrapper real padding-bottom. 66 | varCache: {}, // object to cache variable index height and scroll offset. 67 | varAverSize: 0, // average/estimate item height before variable be calculated. 68 | varLastCalcIndex: 0 // last calculated variable height/offset index, always increase. 69 | } 70 | }, 71 | 72 | watch: { 73 | size: function () { 74 | this.alter = 'size' 75 | }, 76 | remain: function () { 77 | this.alter = 'remain' 78 | }, 79 | bench: function () { 80 | this.alter = 'bench' 81 | }, 82 | start: function () { 83 | this.alter = 'start' 84 | }, 85 | offset: function () { 86 | this.alter = 'offset' 87 | } 88 | }, 89 | 90 | methods: { 91 | onScroll: function (e) { 92 | var delta = this.delta 93 | var offset = this.$refs.vsl.scrollTop 94 | 95 | if (delta.total > delta.keeps) { 96 | this.updateZone(offset) 97 | } else { 98 | delta.end = delta.total - 1 99 | } 100 | 101 | var offsetAll = delta.offsetAll 102 | if (this.onscroll) { 103 | this.onscroll(e, { 104 | offset: offset, 105 | offsetAll: offsetAll, 106 | start: delta.start, 107 | end: delta.end 108 | }) 109 | } 110 | 111 | if (!offset && delta.total) { 112 | this.triggerEvent('totop') 113 | } 114 | 115 | if (offset >= offsetAll) { 116 | this.triggerEvent('tobottom') 117 | } 118 | }, 119 | 120 | // update render zone by scroll offset. 121 | updateZone: function (offset) { 122 | var overs = this.variable 123 | ? this.getVarOvers(offset) 124 | : Math.floor(offset / this.size) 125 | 126 | var delta = this.delta 127 | var zone = this.getZone(overs) 128 | var bench = this.bench || this.remain 129 | 130 | // for better performance, if scroll pass items within now bench, do not update. 131 | if (!zone.isLast && (overs > delta.start) && (overs - delta.start <= bench)) { 132 | return 133 | } 134 | 135 | delta.end = zone.end 136 | delta.start = zone.start 137 | this.$forceUpdate() 138 | }, 139 | 140 | // return the scroll passed items count in variable. 141 | getVarOvers: function (offset) { 142 | var low = 0 143 | var middle = 0 144 | var middleOffset = 0 145 | var delta = this.delta 146 | var high = delta.total 147 | 148 | while (low <= high) { 149 | middle = low + Math.floor((high - low) / 2) 150 | middleOffset = this.getVarOffset(middle) 151 | 152 | // calculate the average variable height at first binary search. 153 | if (!delta.varAverSize) { 154 | delta.varAverSize = Math.floor(middleOffset / middle) 155 | } 156 | 157 | if (middleOffset === offset) { 158 | return middle 159 | } else if (middleOffset < offset) { 160 | low = middle + 1 161 | } else if (middleOffset > offset) { 162 | high = middle - 1 163 | } 164 | } 165 | 166 | return low > 0 ? --low : 0 167 | }, 168 | 169 | // return a variable scroll offset from given index. 170 | getVarOffset: function (index, nocache) { 171 | var delta = this.delta 172 | var cache = delta.varCache[index] 173 | 174 | if (!nocache && cache) { 175 | return cache.offset 176 | } 177 | 178 | var offset = 0 179 | for (var i = 0; i < index; i++) { 180 | var size = this.getVarSize(i, nocache) 181 | delta.varCache[i] = { 182 | size: size, 183 | offset: offset 184 | } 185 | offset += size 186 | } 187 | 188 | delta.varLastCalcIndex = Math.max(delta.varLastCalcIndex, index - 1) 189 | delta.varLastCalcIndex = Math.min(delta.varLastCalcIndex, delta.total - 1) 190 | 191 | return offset 192 | }, 193 | 194 | // return a variable size (height) from given index. 195 | getVarSize: function (index, nocache) { 196 | var cache = this.delta.varCache[index] 197 | if (!nocache && cache) { 198 | return cache.size 199 | } 200 | 201 | if (typeof this.variable === 'function') { 202 | return this.variable(index) || 0 203 | } else { 204 | var slot = this.$slots.default[index] 205 | var style = slot && slot.data && slot.data.style 206 | if (style && style.height) { 207 | var shm = style.height.match(/^(.*)px$/) 208 | return (shm && +shm[1]) || 0 209 | } 210 | } 211 | return 0 212 | }, 213 | 214 | // return the variable paddingTop base current zone. 215 | // @todo: if set a large `start` before variable was calculated, 216 | // here will also case too much offset calculate when list is very large, 217 | // consider use estimate paddingTop in this case just like `getVarPaddingBottom`. 218 | getVarPaddingTop: function () { 219 | return this.getVarOffset(this.delta.start) 220 | }, 221 | 222 | // return the variable paddingBottom base current zone. 223 | getVarPaddingBottom: function () { 224 | var delta = this.delta 225 | var last = delta.total - 1 226 | if (delta.total - delta.end <= delta.keeps || delta.varLastCalcIndex === last) { 227 | return this.getVarOffset(last) - this.getVarOffset(delta.end) 228 | } else { 229 | // if unreached last zone or uncalculate real behind offset 230 | // return the estimate paddingBottom avoid too much calculate. 231 | return (delta.total - delta.end) * (delta.varAverSize || this.size) 232 | } 233 | }, 234 | 235 | // retun the variable all heights use to judge reach bottom. 236 | getVarAllHeight: function () { 237 | var delta = this.delta 238 | if (delta.total - delta.end <= delta.keeps || delta.varLastCalcIndex === delta.total - 1) { 239 | return this.getVarOffset(delta.total) 240 | } else { 241 | return this.getVarOffset(delta.start) + (delta.total - delta.end) * (delta.varAverSize || this.size) 242 | } 243 | }, 244 | 245 | // the ONLY ONE public method, allow the parent update variable by index. 246 | updateVariable: function (index) { 247 | // clear/update all the offfsets and heights ahead of index. 248 | this.getVarOffset(index, true) 249 | }, 250 | 251 | // return the right zone info base on `start/index`. 252 | getZone: function (index) { 253 | var start, end 254 | var delta = this.delta 255 | 256 | index = parseInt(index, 10) 257 | index = Math.max(0, index) 258 | 259 | var lastStart = delta.total - delta.keeps 260 | var isLast = (index <= delta.total && index >= lastStart) || (index > delta.total) 261 | if (isLast) { 262 | end = delta.total - 1 263 | start = Math.max(0, lastStart) 264 | } else { 265 | start = index 266 | end = start + delta.keeps - 1 267 | } 268 | 269 | return { 270 | end: end, 271 | start: start, 272 | isLast: isLast 273 | } 274 | }, 275 | 276 | // trigger a props event on parent. 277 | triggerEvent: function (event) { 278 | if (this[event]) { 279 | this[event]() 280 | } 281 | }, 282 | 283 | // set manual scroll top. 284 | setScrollTop: function (scrollTop) { 285 | this.$refs.vsl.scrollTop = scrollTop 286 | }, 287 | 288 | // filter the shown items base on `start` and `end`. 289 | filter: function () { 290 | var delta = this.delta 291 | var slots = this.$slots.default 292 | 293 | if (!slots) { 294 | slots = [] 295 | delta.start = 0 296 | } 297 | 298 | delta.total = slots.length 299 | 300 | var paddingTop, paddingBottom, allHeight 301 | var hasPadding = delta.total > delta.keeps 302 | 303 | if (this.variable) { 304 | allHeight = this.getVarAllHeight() 305 | paddingTop = hasPadding ? this.getVarPaddingTop() : 0 306 | paddingBottom = hasPadding ? this.getVarPaddingBottom() : 0 307 | } else { 308 | allHeight = this.size * delta.total 309 | paddingTop = this.size * (hasPadding ? delta.start : 0) 310 | paddingBottom = this.size * (hasPadding ? delta.total - delta.keeps : 0) - paddingTop 311 | } 312 | 313 | delta.paddingTop = paddingTop 314 | delta.paddingBottom = paddingBottom 315 | delta.offsetAll = allHeight - this.size * this.remain 316 | 317 | var targets = [] 318 | for (var i = delta.start; i <= delta.end; i++) { 319 | targets.push(slots[i]) 320 | } 321 | return targets 322 | } 323 | }, 324 | 325 | mounted: function () { 326 | if (this.start) { 327 | var start = this.getZone(this.start).start 328 | this.setScrollTop(this.variable ? this.getVarOffset(start) : start * this.size) 329 | } else if (this.offset) { 330 | this.setScrollTop(this.offset) 331 | } 332 | }, 333 | 334 | // check if delta should update when prorps change. 335 | beforeUpdate: function () { 336 | var delta = this.delta 337 | delta.keeps = this.remain + (this.bench || this.remain) 338 | 339 | var calcstart = this.alter === 'start' ? this.start : delta.start 340 | var zone = this.getZone(calcstart) 341 | 342 | // if start, size or offset change, update scroll position. 343 | if (~['start', 'size', 'offset'].indexOf(this.alter)) { 344 | this.$nextTick(this.setScrollTop.bind(this, this.alter === 'offset' 345 | ? this.offset : this.variable 346 | ? this.getVarOffset(zone.isLast ? delta.total : zone.start) 347 | : zone.isLast && (delta.total - calcstart <= this.remain) 348 | ? delta.total * this.size : calcstart * this.size) 349 | ) 350 | } 351 | 352 | // if points out difference, force update once again. 353 | if (calcstart !== zone.start || delta.end !== zone.end || this.alter) { 354 | this.alter = '' 355 | delta.end = zone.end 356 | delta.start = zone.start 357 | this.$forceUpdate() 358 | } 359 | }, 360 | 361 | render: function (h) { 362 | var list = this.filter() 363 | var delta = this.delta 364 | var dbc = this.debounce 365 | 366 | return h(this.rtag, { 367 | 'ref': 'vsl', 368 | 'style': { 369 | 'display': 'block', 370 | 'overflow-y': 'auto', 371 | 'height': this.size * this.remain + 'px' 372 | }, 373 | 'on': { 374 | '&scroll': dbc ? _debounce(this.onScroll.bind(this), dbc) : this.onScroll 375 | } 376 | }, [ 377 | h(this.wtag, { 378 | 'style': { 379 | 'display': 'block', 380 | 'padding-top': delta.paddingTop + 'px', 381 | 'padding-bottom': delta.paddingBottom + 'px' 382 | }, 383 | 'class': this.wclass 384 | }, list) 385 | ]) 386 | } 387 | }) 388 | }) 389 | -------------------------------------------------------------------------------- /services/socket/server.js: -------------------------------------------------------------------------------- 1 | // Setup basic express server 2 | import _ from 'lodash' 3 | import crypto from 'crypto' 4 | import express from 'express' 5 | import compression from 'compression' 6 | import enforce from 'express-sslify' 7 | import config from './lib/config.js' 8 | import http from 'http' 9 | import { Server } from 'socket.io' 10 | import { createAdapter } from '@socket.io/redis-adapter' 11 | import * as Presence from './lib/presence.js' 12 | import * as User from './lib/user.js' 13 | import * as Message from './lib/message.js' 14 | import client from './lib/redis.js' 15 | 16 | // Setup the HTTP server that serves static assets 17 | const app = express() 18 | export const server = http.createServer(app) 19 | 20 | app.use(compression()) 21 | 22 | // Force redirect to HTTPS if the protocol was HTTP 23 | if (!process.env.LOCAL) { 24 | app.use(enforce.HTTPS({ trustProtoHeader: true })) 25 | } 26 | 27 | // The static paths 28 | app.use(express.static('public')) 29 | 30 | // A mocked up saerch endpoint 31 | app.get('/search', (req, res) => { 32 | res.status(200).send([{ 33 | score: 1, 34 | hit: { 35 | username: 'Backend system message', 36 | avatar: 'https://www.gravatar.com/avatar/3bf43d16dedfc155a52744d98345f57b?d=retro', 37 | content: { 38 | text: `Search endpoint not connected yet. You searched for '${req.query.q}'` 39 | } 40 | } 41 | }]) 42 | }) 43 | 44 | // The Socket.io features on top of the HTTP server 45 | const io = new Server(server, { 46 | pingInterval: config.HEARTBEAT_INTERVAL, 47 | pingTimeout: config.HEARTBEAT_TIMEOUT 48 | }) 49 | 50 | // Setup socket.io to scale horizontally using Redis pubsub 51 | const pubClient = client.duplicate() 52 | const subClient = client.duplicate() 53 | await pubClient.connect() 54 | await subClient.connect() 55 | 56 | io.adapter(createAdapter(pubClient, subClient)) 57 | 58 | // Handler for socket.io connections 59 | io.on('connection', async function (socket) { 60 | // Initially the socket starts out as not authenticated 61 | socket.authenticated = false 62 | 63 | const users = await Presence.list() 64 | 65 | // Tell the socket how many users are present. 66 | io.to(socket.id).emit('presence', { 67 | numUsers: users.length 68 | }) 69 | 70 | // when the client emits 'new message', this listens and executes 71 | socket.on('new message', async function (data, callback) { 72 | if (!socket.authenticated) { 73 | // Don't allow people not authenticated to send a message 74 | return callback('Can\'t send a message until you are authenticated') 75 | } 76 | 77 | if (!data.room || !_.isString(data.room)) { 78 | return callback('Must pass a parameter `room` which is a string') 79 | } 80 | 81 | if (!data.message || !_.isString(data.message)) { 82 | return callback('Must pass a parameter `message` which is a string') 83 | } 84 | 85 | const messageBody = { 86 | room: data.room, 87 | time: Date.now(), 88 | content: { 89 | text: data.message 90 | }, 91 | username: socket.username, 92 | avatar: socket.avatar 93 | } 94 | 95 | // Store the messages in DynamoDB 96 | messageBody.message = await Message.add(messageBody) 97 | 98 | socket.broadcast.emit('new message', messageBody) 99 | 100 | return callback(null, messageBody) 101 | }) 102 | 103 | socket.on('message list', async function (from, callback) { 104 | let messages 105 | 106 | if (!from.room || !_.isString(from.room)) { 107 | return callback('Must pass a parameter `from.room` which is a string') 108 | } 109 | 110 | try { 111 | messages = await Message.listFromRoom(from) 112 | } catch (e) { 113 | return callback(e) 114 | } 115 | 116 | return callback(null, messages) 117 | }) 118 | 119 | socket.conn.on('heartbeat', function () { 120 | if (!socket.authenticated) { 121 | // Don't start counting as present until they authenticate. 122 | return 123 | } 124 | 125 | Presence.upsert(socket.id, { 126 | username: socket.username 127 | }) 128 | }) 129 | 130 | // Client wants a list of rooms 131 | socket.on('room list', function (callback) { 132 | if (!_.isFunction(callback)) { 133 | return 134 | } 135 | 136 | return callback(null, [ 137 | { 138 | id: 'general', 139 | name: 'Serverless is Awesome', 140 | preview: 'General serverless talk', 141 | image: '/static/images/serverless.svg', 142 | status: 'none', 143 | onlineCount: 0 144 | }, 145 | { 146 | id: 'fargate', 147 | name: 'AWS Fargate', 148 | preview: 'Serverless containers', 149 | image: '/static/images/fargate.svg', 150 | status: 'none', 151 | onlineCount: 0 152 | }, 153 | { 154 | id: 'lambda', 155 | name: 'AWS Lambda', 156 | preview: 'Serverless functions', 157 | image: '/static/images/lambda.svg', 158 | status: 'none', 159 | onlineCount: 0 160 | }, 161 | { 162 | id: 'ecs', 163 | name: 'Amazon Elastic Container Service', 164 | preview: 'Orchestrate serverless containers', 165 | image: '/static/images/ecs.svg', 166 | status: 'none', 167 | onlineCount: 0 168 | } 169 | ]) 170 | }) 171 | 172 | // Client wants to create a new account 173 | socket.on('create user', async function (details, callback) { 174 | if (!_.isFunction(callback)) { 175 | return 176 | } 177 | 178 | if (socket.authenticated) { 179 | return callback('User already has a logged in identity') 180 | } 181 | 182 | if (!details.username || !_.isString(details.username)) { 183 | return callback('Must pass a parameter `username` which is a string') 184 | } 185 | 186 | if (!details.email || !_.isString(details.email)) { 187 | return callback('Must pass a parameter `email` which is a string') 188 | } 189 | 190 | if (!details.password || !_.isString(details.password)) { 191 | return callback('Must pass a parameter `password` which is a string') 192 | } 193 | 194 | details.password = details.password.trim().toLowerCase() 195 | details.username = details.username.trim().toLowerCase() 196 | details.email = details.email.trim().toLowerCase() 197 | 198 | try { 199 | await User.create({ 200 | username: details.username, 201 | email: details.email, 202 | password: details.password 203 | }) 204 | } catch (e) { 205 | return callback(e.toString()) 206 | } 207 | 208 | // Set details on the socket. 209 | socket.authenticated = true 210 | socket.username = details.username 211 | socket.email = details.email 212 | socket.avatar = 'https://www.gravatar.com/avatar/' + crypto.createHash('md5').update(socket.email).digest('hex') 213 | 214 | // Set the user as present. 215 | Presence.upsert(socket.id, { 216 | username: socket.username 217 | }) 218 | socket.present = true 219 | 220 | const users = await Presence.list() 221 | 222 | socket.emit('login', { 223 | numUsers: users.length 224 | }) 225 | 226 | // echo globally (all clients) that a person has connected 227 | io.emit('user joined', { 228 | username: socket.username, 229 | avatar: socket.avatar, 230 | numUsers: users.length 231 | }) 232 | 233 | return callback(null, { 234 | username: socket.username, 235 | avatar: socket.avatar 236 | }) 237 | }) 238 | 239 | // Client wants to authenticate a user 240 | socket.on('authenticate user', async function (details, callback) { 241 | if (!_.isFunction(callback)) { 242 | return 243 | } 244 | 245 | if (socket.authenticated) { 246 | return callback('User already has a logged in identity') 247 | } 248 | 249 | if (!details.username || !_.isString(details.username)) { 250 | return callback('Must pass a parameter `username` which is a string') 251 | } 252 | 253 | if (!details.password || !_.isString(details.password)) { 254 | return callback('Must pass a parameter `password` which is a string') 255 | } 256 | 257 | details.password = details.password.trim().toLowerCase() 258 | details.username = details.username.trim().toLowerCase() 259 | 260 | let result 261 | 262 | try { 263 | result = await User.authenticate({ 264 | username: details.username, 265 | password: details.password 266 | }) 267 | } catch (e) { 268 | return callback(e.toString()) 269 | } 270 | 271 | if (!result) { 272 | return callback('No matching account found') 273 | } 274 | 275 | // Set the details on the socket. 276 | socket.authenticated = true 277 | socket.username = result.username 278 | socket.email = result.email 279 | socket.avatar = 'https://www.gravatar.com/avatar/' + crypto.createHash('md5').update(socket.email).digest('hex') 280 | 281 | // Set the user as present. 282 | Presence.upsert(socket.id, { 283 | username: socket.username 284 | }) 285 | socket.present = true 286 | 287 | const users = await Presence.list() 288 | 289 | socket.emit('login', { 290 | numUsers: users.length 291 | }) 292 | 293 | // echo globally (all clients) that a person has connected 294 | io.emit('user joined', { 295 | username: socket.username, 296 | avatar: socket.avatar, 297 | numUsers: users.length 298 | }) 299 | 300 | return callback(null, { 301 | username: socket.username, 302 | avatar: socket.avatar 303 | }) 304 | }) 305 | 306 | socket.on('anonymous user', async function (callback) { 307 | if (!_.isFunction(callback)) { 308 | return 309 | } 310 | 311 | socket.authenticated = true 312 | socket.username = 'anonymous_' + crypto.randomBytes(3).toString('hex') 313 | socket.avatar = 'https://www.gravatar.com/avatar/' + crypto.createHash('md5').update(socket.username).digest('hex') + '?d=retro' 314 | 315 | // Set the user as present. 316 | Presence.upsert(socket.id, { 317 | username: socket.username 318 | }) 319 | socket.present = true 320 | 321 | const users = await Presence.list() 322 | 323 | socket.emit('login', { 324 | numUsers: users.length 325 | }) 326 | 327 | // echo globally (all clients) that a person has connected 328 | io.emit('user joined', { 329 | username: socket.username, 330 | avatar: socket.avatar, 331 | numUsers: users.length 332 | }) 333 | 334 | return callback(null, { 335 | username: socket.username, 336 | avatar: socket.avatar 337 | }) 338 | }) 339 | 340 | // when the client emits 'typing', we broadcast it to others 341 | socket.on('typing', function (room) { 342 | if (!socket.authenticated) { 343 | return 344 | } 345 | 346 | socket.broadcast.emit('typing', { 347 | room, 348 | username: socket.username, 349 | avatar: socket.avatar 350 | }) 351 | }) 352 | 353 | // when the client emits 'stop typing', we broadcast it to others 354 | socket.on('stop typing', function (room) { 355 | if (!socket.authenticated) { 356 | return 357 | } 358 | 359 | socket.broadcast.emit('stop typing', { 360 | room, 361 | username: socket.username 362 | }) 363 | }) 364 | 365 | // when the user disconnects.. perform this 366 | socket.on('disconnect', async function () { 367 | if (socket.authenticated) { 368 | Presence.remove(socket.id) 369 | 370 | const users = await Presence.list() 371 | 372 | // echo globally (all clients) that a person has left 373 | socket.broadcast.emit('user left', { 374 | username: socket.username, 375 | avatar: socket.avatar, 376 | numUsers: users.length 377 | }) 378 | } 379 | }) 380 | }) 381 | -------------------------------------------------------------------------------- /services/test-suite/.dockerignore: -------------------------------------------------------------------------------- 1 | Dockerfile 2 | package-lock.json 3 | node_modules -------------------------------------------------------------------------------- /services/test-suite/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:18 AS build 2 | WORKDIR /srv 3 | ADD package.json . 4 | RUN npm install 5 | 6 | FROM node:18-slim 7 | COPY --from=build /srv . 8 | ADD . . 9 | EXPOSE 3000 10 | CMD ["node", "./node_modules/.bin/mocha", "-b", "--exit"] 11 | -------------------------------------------------------------------------------- /services/test-suite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tests", 3 | "version": "0.0.0", 4 | "description": "The test suite for the application", 5 | "author": "Grant Timmerman", 6 | "private": true, 7 | "license": "BSD", 8 | "dependencies": { 9 | "chai": "4.3.7", 10 | "mocha": "10.2.0", 11 | "request-promise-native": "1.0.5", 12 | "request": "2.87.0", 13 | "socket.io-client": "4.5.4" 14 | }, 15 | "scripts": { 16 | "test": "LOCAL=true REGION=us-east-1 ENV_NAME=test REDIS_ENDPOINT=localhost DYNAMODB_ENDPOINT=http://localhost:8000 AWS_ACCESS_KEY_ID=test AWS_SECRET_ACCESS_KEY=test mocha -b" 17 | }, 18 | "eslintConfig": { 19 | "globals": { 20 | "Vue": true 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /services/test-suite/test/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | SELF_URL: process.env.SELF_URL, 3 | WS_URL: process.env.WS_URL 4 | } 5 | -------------------------------------------------------------------------------- /services/test-suite/test/core-api.js: -------------------------------------------------------------------------------- 1 | const request = require('request-promise-native') 2 | const expect = require('chai').expect 3 | const socketClient = require('socket.io-client') 4 | const config = require('./config') 5 | 6 | const client = request.defaults({ 7 | baseUrl: config.SELF_URL, 8 | resolveWithFullResponse: true 9 | }) 10 | 11 | describe('The application server', function () { 12 | it('should serve webpages over HTTP', async function () { 13 | const result = await client.get('index.html') 14 | expect(result.statusCode).to.equal(200) 15 | }) 16 | 17 | it('should have a socket.io server', async function () { 18 | const socket = socketClient(config.WS_URL) 19 | 20 | socket.on('connect_error', function (e) { 21 | throw e 22 | }) 23 | 24 | await new Promise(function (resolve) { 25 | socket.on('connect', resolve) 26 | }) 27 | 28 | socket.disconnect() 29 | }) 30 | }) 31 | 32 | describe('The API', function () { 33 | let socket 34 | let newSocket 35 | 36 | it('should accept a connection and emit "presence" to it', function (done) { 37 | let callbacks = 2 38 | socket = socketClient(config.SELF_URL) 39 | 40 | const end = function () { 41 | socket.off('presence') 42 | done() 43 | } 44 | 45 | socket.on('connect', function () { 46 | --callbacks > 0 || end() 47 | }) 48 | 49 | socket.on('presence', function (presence) { 50 | expect(presence).to.be.an('object') 51 | expect(presence).to.have.property('numUsers') 52 | expect(presence.numUsers).to.equal(0) 53 | 54 | --callbacks > 0 || end() 55 | }) 56 | }) 57 | 58 | it('should respond to "room list" with a list of rooms', function (done) { 59 | socket.emit('room list', function (err, results) { 60 | expect(err).to.equal(null) 61 | expect(results).to.be.an('array') 62 | 63 | for (const room of results) { 64 | expect(room).to.be.an('object') 65 | 66 | expect(room).to.have.property('id') 67 | expect(room.id).to.be.a('string') 68 | 69 | expect(room).to.have.property('name') 70 | expect(room.name).to.be.a('string') 71 | 72 | expect(room).to.have.property('image') 73 | expect(room.image).to.be.a('string') 74 | 75 | expect(room).to.have.property('status') 76 | expect(room.status).to.be.a('string') 77 | 78 | expect(room).to.have.property('onlineCount') 79 | expect(room.onlineCount).to.be.a('number') 80 | } 81 | 82 | done() 83 | }) 84 | }) 85 | 86 | it('should reject "new message" from unauthenticated users', function (done) { 87 | socket.emit('new message', { foo: 'bar' }, function (err) { 88 | expect(err).to.be.a('string') 89 | expect(err).to.equal('Can\'t send a message until you are authenticated') 90 | done() 91 | }) 92 | }) 93 | 94 | it('should handle "anonymous user" properly', function (done) { 95 | let callbacks = 2 96 | 97 | const end = function () { 98 | socket.off('user joined') 99 | done() 100 | } 101 | 102 | socket.emit('anonymous user', function (err, results) { 103 | expect(err).to.equal(null) 104 | expect(results).to.be.an('object') 105 | 106 | expect(results).to.have.property('username') 107 | expect(results.username).to.be.a('string') 108 | 109 | expect(results).to.have.property('avatar') 110 | expect(results.avatar).to.be.a('string') 111 | 112 | --callbacks > 0 || end() 113 | }) 114 | 115 | socket.on('user joined', function (details) { 116 | expect(details).to.be.an('object') 117 | 118 | expect(details).to.have.property('username') 119 | expect(details.username).to.be.a('string') 120 | 121 | expect(details).to.have.property('avatar') 122 | expect(details.avatar).to.be.a('string') 123 | 124 | expect(details).to.have.property('numUsers') 125 | expect(details.numUsers).to.equal(1) 126 | 127 | --callbacks > 0 || end() 128 | }) 129 | }) 130 | 131 | it('when another client connect server should emit correct "presence"', function (done) { 132 | newSocket = socketClient(config.SELF_URL) 133 | 134 | newSocket.on('presence', function (presence) { 135 | expect(presence).to.be.an('object') 136 | expect(presence).to.have.property('numUsers') 137 | expect(presence.numUsers).to.equal(1) 138 | 139 | newSocket.off('presence') 140 | done() 141 | }) 142 | }) 143 | 144 | it('when unauthenticated client tries to send message it should be rejected', function (done) { 145 | newSocket.emit('new message', { foo: 'bar' }, function (err) { 146 | expect(err).to.be.a('string') 147 | expect(err).to.equal('Can\'t send a message until you are authenticated') 148 | done() 149 | }) 150 | }) 151 | 152 | it('when other client joins server should emit "user joined"', function (done) { 153 | let callbacks = 3 154 | 155 | const end = function () { 156 | newSocket.off('user joined') 157 | socket.off('user joined') 158 | done() 159 | } 160 | 161 | newSocket.emit('create user', { 162 | username: 'test_' + new Date().getTime(), 163 | email: 'testemail_' + new Date().getTime() + '@test.com', 164 | password: 'bogus' 165 | }, function (err, results) { 166 | expect(err).to.equal(null) 167 | expect(results).to.be.an('object') 168 | 169 | expect(results).to.have.property('username') 170 | expect(results.username).to.be.a('string') 171 | 172 | expect(results).to.have.property('avatar') 173 | expect(results.avatar).to.be.a('string') 174 | 175 | --callbacks > 0 || end() 176 | }) 177 | 178 | socket.on('user joined', function (details) { 179 | expect(details).to.be.an('object') 180 | 181 | expect(details).to.have.property('username') 182 | expect(details.username).to.be.a('string') 183 | 184 | expect(details).to.have.property('avatar') 185 | expect(details.avatar).to.be.a('string') 186 | 187 | expect(details).to.have.property('numUsers') 188 | expect(details.numUsers).to.equal(2) 189 | 190 | --callbacks > 0 || end() 191 | }) 192 | 193 | newSocket.on('user joined', function (details) { 194 | expect(details).to.be.an('object') 195 | 196 | expect(details).to.have.property('username') 197 | expect(details.username).to.be.a('string') 198 | 199 | expect(details).to.have.property('avatar') 200 | expect(details.avatar).to.be.a('string') 201 | 202 | expect(details).to.have.property('numUsers') 203 | expect(details.numUsers).to.equal(2) 204 | 205 | --callbacks > 0 || end() 206 | }) 207 | }) 208 | 209 | it('when authenticated client tries to send malformed message it should be rejected', function (done) { 210 | newSocket.emit('new message', { foo: 'bar' }, function (err) { 211 | expect(err).to.be.a('string') 212 | expect(err).to.equal('Must pass a parameter `room` which is a string') 213 | done() 214 | }) 215 | }) 216 | 217 | const sentMessages = [] 218 | 219 | it('when authenticated client sends good message it should be emitted to all', function (done) { 220 | let callbacks = 2 221 | 222 | const end = function () { 223 | socket.off('new message') 224 | done() 225 | } 226 | 227 | newSocket.emit( 228 | 'new message', 229 | { 230 | room: 'general', 231 | message: 'hey what up?' 232 | }, 233 | function (err, message) { 234 | expect(err).to.equal(null) 235 | 236 | expect(message).to.be.an('object') 237 | 238 | expect(message).to.have.property('room') 239 | expect(message.room).to.be.a('string') 240 | 241 | expect(message).to.have.property('username') 242 | expect(message.username).to.be.a('string') 243 | 244 | expect(message).to.have.property('avatar') 245 | expect(message.avatar).to.be.a('string') 246 | 247 | expect(message).to.have.property('room') 248 | expect(message.room).to.be.a('string') 249 | 250 | expect(message).to.have.property('time') 251 | expect(message.time).to.be.a('number') 252 | 253 | expect(message).to.have.property('content') 254 | expect(message.content).to.be.a('object') 255 | 256 | expect(message.content).to.have.property('text') 257 | expect(message.content.text).to.be.a('string') 258 | 259 | --callbacks > 0 || end() 260 | } 261 | ) 262 | 263 | socket.on('new message', function (message) { 264 | expect(message).to.be.an('object') 265 | sentMessages.unshift(message) 266 | 267 | expect(message).to.have.property('room') 268 | expect(message.room).to.be.a('string') 269 | 270 | expect(message).to.have.property('username') 271 | expect(message.username).to.be.a('string') 272 | 273 | expect(message).to.have.property('avatar') 274 | expect(message.avatar).to.be.a('string') 275 | 276 | expect(message).to.have.property('room') 277 | expect(message.room).to.be.a('string') 278 | 279 | expect(message).to.have.property('time') 280 | expect(message.time).to.be.a('number') 281 | 282 | expect(message).to.have.property('content') 283 | expect(message.content).to.be.a('object') 284 | 285 | expect(message.content).to.have.property('text') 286 | expect(message.content.text).to.be.a('string') 287 | 288 | --callbacks > 0 || end() 289 | }) 290 | }) 291 | 292 | it('when other authenticated client sends good message it should be emitted to all', function (done) { 293 | let callbacks = 2 294 | 295 | const end = function () { 296 | socket.off('new message') 297 | done() 298 | } 299 | 300 | socket.emit( 301 | 'new message', 302 | { 303 | room: 'general', 304 | message: 'nothing much, how about you?' 305 | }, 306 | function (err, message) { 307 | expect(err).to.equal(null) 308 | 309 | expect(message).to.be.an('object') 310 | 311 | expect(message).to.have.property('room') 312 | expect(message.room).to.be.a('string') 313 | 314 | expect(message).to.have.property('username') 315 | expect(message.username).to.be.a('string') 316 | 317 | expect(message).to.have.property('avatar') 318 | expect(message.avatar).to.be.a('string') 319 | 320 | expect(message).to.have.property('room') 321 | expect(message.room).to.be.a('string') 322 | 323 | expect(message).to.have.property('time') 324 | expect(message.time).to.be.a('number') 325 | 326 | expect(message).to.have.property('content') 327 | expect(message.content).to.be.a('object') 328 | 329 | expect(message.content).to.have.property('text') 330 | expect(message.content.text).to.be.a('string') 331 | 332 | --callbacks > 0 || end() 333 | } 334 | ) 335 | 336 | newSocket.on('new message', function (message) { 337 | expect(message).to.be.an('object') 338 | sentMessages.unshift(message) 339 | 340 | expect(message).to.have.property('room') 341 | expect(message.room).to.be.a('string') 342 | 343 | expect(message).to.have.property('username') 344 | expect(message.username).to.be.a('string') 345 | 346 | expect(message).to.have.property('avatar') 347 | expect(message.avatar).to.be.a('string') 348 | 349 | expect(message).to.have.property('room') 350 | expect(message.room).to.be.a('string') 351 | 352 | expect(message).to.have.property('time') 353 | expect(message.time).to.be.a('number') 354 | 355 | expect(message).to.have.property('content') 356 | expect(message.content).to.be.a('object') 357 | 358 | expect(message.content).to.have.property('text') 359 | expect(message.content.text).to.be.a('string') 360 | 361 | --callbacks > 0 || end() 362 | }) 363 | }) 364 | 365 | it('fetching the "message list" should return the right messages in the right order', function (done) { 366 | socket.emit('message list', { room: 'general' }, function (err, results) { 367 | expect(results.messages).to.be.a('array') 368 | 369 | // Ensure the messages we sent are there, match, and are in the right order. 370 | expect(results.messages[0]).to.deep.equal(sentMessages[0]) 371 | expect(results.messages[1]).to.deep.equal(sentMessages[1]) 372 | 373 | done() 374 | }) 375 | }) 376 | 377 | it('when other client disconnects server should emit "user left"', function (done) { 378 | socket.on('user left', function (details) { 379 | expect(details).to.be.an('object') 380 | 381 | expect(details).to.have.property('username') 382 | expect(details.username).to.be.a('string') 383 | 384 | expect(details).to.have.property('avatar') 385 | expect(details.avatar).to.be.a('string') 386 | 387 | expect(details).to.have.property('numUsers') 388 | expect(details.numUsers).to.equal(1) 389 | 390 | socket.off('user left') 391 | done() 392 | }) 393 | 394 | newSocket.disconnect() 395 | }) 396 | 397 | after(function () { 398 | socket.disconnect() 399 | }) 400 | }) 401 | -------------------------------------------------------------------------------- /services/web/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM public.ecr.aws/nginx/nginx:mainline 2 | EXPOSE 80 3 | COPY public /usr/share/nginx/html/ -------------------------------------------------------------------------------- /services/web/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathanpeck/socket.io-chat-fargate/c539fd0b1d3cc469a83a6db304716cef97201245/services/web/public/favicon.ico -------------------------------------------------------------------------------- /services/web/public/index.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | Fargate Chat 21 | 22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 | 33 |
34 | 35 |
36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /services/web/public/static/images/ecs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon-Architecture/64/Arch_Amazon-Elastic-Container-Service_64 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /services/web/public/static/images/fargate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon-Architecture/64/Arch_AWS-Fargate_64 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /services/web/public/static/images/lambda.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon-Architecture/64/Arch_AWS-Lambda_64 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /services/web/public/static/images/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /services/web/public/static/images/serverless.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon-Architecture/64/Arch_AWS-Serverless-Application-Repository_64 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /services/web/public/static/style.css: -------------------------------------------------------------------------------- 1 | /* Styles based on https://bootsnipp.com/snippets/0e3Ma */ 2 | 3 | body { 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | min-height: 100vh; 8 | background: #042029; 9 | font-family: "proxima-nova", "Source Sans Pro", sans-serif; 10 | font-size: 1em; 11 | letter-spacing: 0.1px; 12 | color: #32465a; 13 | text-rendering: optimizeLegibility; 14 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); 15 | -webkit-font-smoothing: antialiased; 16 | } 17 | 18 | a { 19 | color: #FF9900; 20 | } 21 | 22 | a:hover { 23 | color: #FF8800; 24 | } 25 | 26 | .btn { 27 | border: 1px solid #FF9900; 28 | background: #FF8800; 29 | } 30 | 31 | .btn:hover { 32 | border: 1px solid #FF9900; 33 | background: #FF9900; 34 | } 35 | 36 | #frame { 37 | width: 100%; 38 | min-width: 360px; 39 | /*max-width: 1000px;*/ 40 | height: 100vh; 41 | min-height: 300px; 42 | background: #E6EAEA; 43 | } 44 | 45 | @media screen and (max-width: 360px) { 46 | #frame { 47 | width: 100%; 48 | height: 100vh; 49 | } 50 | } 51 | 52 | #frame #sidepanel { 53 | float: left; 54 | min-width: 280px; 55 | max-width: 340px; 56 | width: 40%; 57 | height: 100%; 58 | background: #dadfdf; 59 | color: #32465a; 60 | overflow: hidden; 61 | position: relative; 62 | } 63 | 64 | @media screen and (max-width: 735px) { 65 | #frame #sidepanel { 66 | width: 58px; 67 | min-width: 58px; 68 | } 69 | } 70 | 71 | #frame #sidepanel .rooms { 72 | height: calc(100% - 177px); 73 | overflow: hidden; 74 | border-top: 3px solid #a8a8a8; 75 | } 76 | 77 | @media screen and (max-width: 735px) { 78 | #frame #sidepanel .rooms { 79 | height: calc(100% - 149px); 80 | overflow-y: scroll; 81 | overflow-x: hidden; 82 | } 83 | 84 | #frame #sidepanel .rooms::-webkit-scrollbar { 85 | display: none; 86 | } 87 | } 88 | 89 | #frame #sidepanel .rooms.expanded { 90 | height: calc(100% - 334px); 91 | } 92 | 93 | #frame #sidepanel .rooms ul { 94 | margin: 0px; 95 | padding: 0px; 96 | width: 100%; 97 | } 98 | 99 | #frame #sidepanel .rooms ul li.room { 100 | position: relative; 101 | padding: 10px 0 15px 0; 102 | font-size: 0.9em; 103 | cursor: pointer; 104 | border-right: 5px solid #d6dada; 105 | } 106 | 107 | @media screen and (max-width: 735px) { 108 | #frame #sidepanel .rooms ul li.room { 109 | padding: 6px 0 46px 8px; 110 | } 111 | } 112 | 113 | #frame #sidepanel .rooms ul li.room:hover { 114 | background: #E6EAEA; 115 | } 116 | 117 | #frame #sidepanel .rooms ul li.room.active { 118 | background: #E6EAEA; 119 | border-right: 5px solid #FF9900; 120 | } 121 | 122 | #frame #sidepanel .rooms ul li.room.active span.room-status { 123 | border: 2px solid #E6EAEA !important; 124 | } 125 | 126 | #frame #sidepanel .rooms ul li.room .wrap { 127 | width: 88%; 128 | margin: 0 auto; 129 | position: relative; 130 | } 131 | 132 | @media screen and (max-width: 735px) { 133 | #frame #sidepanel .rooms ul li.room .wrap { 134 | width: 100%; 135 | } 136 | } 137 | 138 | #frame #sidepanel .rooms ul li.room .wrap span { 139 | position: absolute; 140 | left: 0; 141 | margin: -2px 0 0 -2px; 142 | width: 10px; 143 | height: 10px; 144 | border-radius: 50%; 145 | border: 2px solid #2c3e50; 146 | background: #95a5a6; 147 | } 148 | 149 | #frame #sidepanel .rooms ul li.room .wrap span.online { 150 | background: #2ecc71; 151 | } 152 | 153 | #frame #sidepanel .rooms ul li.room .wrap span.away { 154 | background: #f1c40f; 155 | } 156 | 157 | #frame #sidepanel .rooms ul li.room .wrap span.unread { 158 | background: #FF9900; 159 | } 160 | 161 | #frame #sidepanel .rooms ul li.room .wrap span.none { 162 | background: transparent; 163 | border: 0px transparent; 164 | } 165 | 166 | #frame #sidepanel .rooms ul li.room .wrap img { 167 | width: 40px; 168 | border-radius: 10%; 169 | float: left; 170 | margin-right: 10px; 171 | } 172 | 173 | @media screen and (max-width: 735px) { 174 | #frame #sidepanel .rooms ul li.room .wrap img { 175 | margin-right: 0px; 176 | } 177 | } 178 | 179 | #frame #sidepanel .rooms ul li.room .wrap .meta { 180 | padding: 5px 0 0 0; 181 | } 182 | 183 | @media screen and (max-width: 735px) { 184 | #frame #sidepanel .rooms ul li.room .wrap .meta { 185 | display: none; 186 | } 187 | } 188 | 189 | #frame #sidepanel .rooms ul li.room .wrap .meta .name { 190 | font-weight: 600; 191 | white-space: nowrap; 192 | overflow: hidden; 193 | text-overflow: ellipsis; 194 | } 195 | 196 | #frame #sidepanel .rooms ul li.room .wrap .meta .preview { 197 | margin: 5px 0 0 0; 198 | padding: 0 0 1px; 199 | font-weight: 400; 200 | white-space: nowrap; 201 | overflow: hidden; 202 | text-overflow: ellipsis; 203 | -moz-transition: 1s all ease; 204 | -o-transition: 1s all ease; 205 | -webkit-transition: 1s all ease; 206 | transition: 1s all ease; 207 | } 208 | 209 | #frame #sidepanel .rooms ul li.room .wrap .meta .preview span { 210 | position: initial; 211 | border-radius: initial; 212 | background: none; 213 | border: none; 214 | padding: 0 2px 0 0; 215 | margin: 0 0 0 1px; 216 | opacity: .5; 217 | } 218 | 219 | 220 | #frame .content { 221 | float: right; 222 | width: 60%; 223 | height: 100%; 224 | overflow: hidden; 225 | position: relative; 226 | } 227 | 228 | @media screen and (max-width: 735px) { 229 | #frame .content { 230 | width: calc(100% - 58px); 231 | min-width: 300px !important; 232 | } 233 | } 234 | 235 | @media screen and (min-width: 850px) { 236 | #frame .content { 237 | width: calc(100% - 340px); 238 | } 239 | } 240 | 241 | #frame div.search { 242 | width: 100%; 243 | height: 60px; 244 | line-height: 60px; 245 | background: #eaeaea; 246 | cursor: pointer; 247 | border-right: 3px solid #e3e2e2; 248 | } 249 | 250 | #frame div.search:hover { 251 | background: #f0f0f0; 252 | } 253 | 254 | #frame .search img { 255 | width: 30px; 256 | border-radius: 10%; 257 | float: left; 258 | margin: 15px 15px 0px 24px 259 | } 260 | 261 | @media screen and (max-width: 735px) { 262 | #frame .search p { 263 | display: none; 264 | } 265 | 266 | #frame .search img { 267 | margin: 15px 15px 0px 14px 268 | } 269 | } 270 | 271 | #frame .content .room-details { 272 | width: 100%; 273 | height: 60px; 274 | line-height: 60px; 275 | background: #f5f5f5; 276 | } 277 | 278 | #frame .content .room-details img.description { 279 | width: 40px; 280 | border-radius: 10%; 281 | float: left; 282 | margin: 9px 12px 0 9px; 283 | } 284 | 285 | #frame .content .room-details p { 286 | float: left; 287 | } 288 | 289 | #frame .content .room-details .online-count { 290 | float: right; 291 | margin-left: 14px; 292 | margin-right: 20px; 293 | } 294 | 295 | /* NEW STYES */ 296 | #frame .content .messages-wrapper { 297 | border-top: 3px solid #a8a8a8; 298 | } 299 | 300 | #frame .content .messages-wrapper .list { 301 | height: auto; 302 | min-height: calc(100% - 93px); 303 | max-height: calc(100% - 93px); 304 | overflow-x: hidden; 305 | overflow-y: scroll; 306 | } 307 | 308 | @media screen and (max-width: 735px) { 309 | #frame .content .messages-wrapper .list { 310 | max-height: calc(100% - 105px); 311 | } 312 | } 313 | 314 | #frame .content .messages-wrapper .list::-webkit-scrollbar { 315 | width: 8px; 316 | background: transparent; 317 | } 318 | 319 | #frame .content .messages-wrapper .list::-webkit-scrollbar-thumb { 320 | background-color: rgba(0, 0, 0, 0.3); 321 | } 322 | 323 | #frame .content .messages-wrapper .list .message:nth-last-child(1) { 324 | margin-bottom: 20px; 325 | } 326 | 327 | #frame .content .messages-wrapper .list .message { 328 | display: inline-block; 329 | margin: 5px 15px 5px 15px; 330 | width: calc(100% - 25px); 331 | font-size: 0.9em; 332 | } 333 | 334 | #frame .content .messages-wrapper .list .message img { 335 | margin: 6px 8px 0 0; 336 | width: 22px; 337 | border-radius: 50%; 338 | float: left; 339 | } 340 | 341 | #frame .content .messages-wrapper .list .message p { 342 | float: left; 343 | display: inline-block; 344 | padding: 10px 15px; 345 | border-radius: 20px; 346 | max-width: calc(100% - 45px); 347 | line-height: 130%; 348 | word-wrap: break-word; 349 | } 350 | 351 | #frame .content .messages-wrapper .list .message .sender { 352 | display: block; 353 | clear: right; 354 | padding: 2px 40px; 355 | font-size: 0.8em; 356 | font-color: #888888; 357 | } 358 | 359 | #frame .content .messages-wrapper .list .message.sent p { 360 | background: #FF8800; 361 | color: #f5f5f5; 362 | } 363 | 364 | #frame .content .messages-wrapper .list .message.replies p { 365 | background: #f5f5f5; 366 | } 367 | 368 | 369 | #frame .content .message-input { 370 | position: absolute; 371 | bottom: 0; 372 | width: 100%; 373 | z-index: 50; 374 | } 375 | 376 | #frame .content .message-input .wrap { 377 | position: relative; 378 | } 379 | 380 | #frame .content .message-input .wrap input { 381 | font-family: "proxima-nova", "Source Sans Pro", sans-serif; 382 | float: left; 383 | border: none; 384 | width: calc(100% - 50px); 385 | padding: 11px 32px 12px 8px; 386 | font-size: 0.8em; 387 | color: #32465a; 388 | } 389 | 390 | @media screen and (max-width: 735px) { 391 | #frame .content .message-input .wrap input { 392 | padding: 15px 32px 16px 8px; 393 | } 394 | } 395 | 396 | #frame .content .message-input .wrap input:focus { 397 | outline: none; 398 | } 399 | 400 | #frame .content .message-input .wrap button { 401 | float: right; 402 | border: none; 403 | width: 50px; 404 | padding: 12px 0; 405 | cursor: pointer; 406 | background: linear-gradient(228deg, rgb(255 138 35), rgb(217, 96, 15), rgb(186, 61, 21)); 407 | color: #f5f5f5; 408 | } 409 | 410 | @media screen and (max-width: 735px) { 411 | #frame .content .message-input .wrap button { 412 | padding: 16px 0; 413 | } 414 | } 415 | 416 | #frame .content .message-input .wrap button:hover { 417 | background: #FF8800; 418 | } 419 | 420 | #frame .content .message-input .wrap button:focus { 421 | outline: none; 422 | } 423 | 424 | #frame .content .message-input-form { 425 | background: white; 426 | position: absolute; 427 | bottom: 0; 428 | width: 100%; 429 | z-index: 50; 430 | padding-bottom: 15px; 431 | } 432 | 433 | #frame .content .message-input-form .wrap { 434 | margin: 15px; 435 | } 436 | 437 | #frame .content .message-input-form .form-group { 438 | margin: 0px; 439 | } 440 | 441 | #frame .content .message-input-form .input-group { 442 | margin-bottom: 5px; 443 | } 444 | 445 | /* Typing indicator based on https://codepen.io/fusco/pen/XbpaYv */ 446 | .typing-indicator { 447 | float: left; 448 | margin: 6px 0 0 8px; 449 | background-color: #f5f5f5; 450 | will-change: transform; 451 | width: auto; 452 | border-radius: 50px; 453 | padding: 15px; 454 | display: table; 455 | margin: 0 auto; 456 | position: relative; 457 | -webkit-animation: 2s bulge infinite ease-out; 458 | animation: 2s bulge infinite ease-out; 459 | } 460 | 461 | .typing-indicator span { 462 | height: 5px; 463 | width: 5px; 464 | float: left; 465 | margin: 0 1px; 466 | background-color: #32465a; 467 | display: block; 468 | border-radius: 50%; 469 | opacity: 0.4; 470 | } 471 | 472 | .typing-indicator span:nth-of-type(1) { 473 | -webkit-animation: 1s blink infinite 0.3333s; 474 | animation: 1s blink infinite 0.3333s; 475 | } 476 | 477 | .typing-indicator span:nth-of-type(2) { 478 | -webkit-animation: 1s blink infinite 0.6666s; 479 | animation: 1s blink infinite 0.6666s; 480 | } 481 | 482 | .typing-indicator span:nth-of-type(3) { 483 | -webkit-animation: 1s blink infinite 0.9999s; 484 | animation: 1s blink infinite 0.9999s; 485 | } 486 | 487 | @-webkit-keyframes blink { 488 | 50% { 489 | opacity: 1; 490 | } 491 | } 492 | 493 | @keyframes blink { 494 | 50% { 495 | opacity: 1; 496 | } 497 | } 498 | 499 | @-webkit-keyframes bulge { 500 | 50% { 501 | -webkit-transform: scale(1.05); 502 | transform: scale(1.05); 503 | } 504 | } 505 | 506 | @keyframes bulge { 507 | 50% { 508 | -webkit-transform: scale(1.05); 509 | transform: scale(1.05); 510 | } 511 | } 512 | 513 | /* Dropdown with arrow adapted from https://bootsnipp.com/snippets/featured/dropdown-menu-ui */ 514 | .dropdown { 515 | z-index: 11 516 | } 517 | 518 | .dropdown-menu>li.item { 519 | line-height: 22px; 520 | margin-left: 1em; 521 | margin-right: 1em; 522 | vertical-align: baseline; 523 | white-space: nowrap; 524 | } 525 | 526 | .dropdown-menu>li.divider { 527 | margin-top: 5px; 528 | margin-bottom: 5px; 529 | } 530 | 531 | .dropdown-menu>li.item img { 532 | width: 22px; 533 | border-radius: 50%; 534 | margin: 0 5px 0 0; 535 | vertical-align: middle 536 | } 537 | 538 | .dropdown ul.dropdown-menu { 539 | position: absolute; 540 | top: calc(100% - 15px); 541 | left: unset; 542 | right: 0px; 543 | border-radius: 4px; 544 | box-shadow: none; 545 | margin-top: 20px; 546 | } 547 | 548 | .dropdown ul.dropdown-menu:before { 549 | content: ""; 550 | border-bottom: 10px solid #fff; 551 | border-right: 10px solid transparent; 552 | border-left: 10px solid transparent; 553 | position: absolute; 554 | top: -10px; 555 | right: 16px; 556 | z-index: 10; 557 | } 558 | 559 | .dropdown ul.dropdown-menu:after { 560 | content: ""; 561 | border-bottom: 12px solid #ccc; 562 | border-right: 12px solid transparent; 563 | border-left: 12px solid transparent; 564 | position: absolute; 565 | top: -12px; 566 | right: 14px; 567 | z-index: 9; 568 | } 569 | 570 | .fade-enter-active, 571 | .fade-leave-active { 572 | transition: opacity .5s; 573 | } 574 | 575 | .fade-enter, 576 | .fade-leave-to 577 | 578 | /* .fade-leave-active below version 2.1.8 */ 579 | { 580 | opacity: 0; 581 | } 582 | 583 | /* Search overlay */ 584 | 585 | /* DIV-element with black background and 50% opacity set */ 586 | div.overlay { 587 | position: fixed; 588 | width: 100%; 589 | height: 100%; 590 | top: 0; 591 | left: 0; 592 | background: rgb(212, 208, 208); 593 | opacity: 0.5; 594 | filter: alpha(opacity=50); 595 | z-index: 80; 596 | /* required for opacity to work in IE */ 597 | } 598 | 599 | 600 | .searcher { 601 | position: relative; 602 | max-width: 600px; 603 | margin: 150px auto; 604 | z-index: 99; 605 | } 606 | 607 | .searcher .searchInput { 608 | background: #fff; 609 | width: 100%; 610 | height: auto; 611 | border-radius: 5px; 612 | position: absolute; 613 | box-shadow: 0px 1px 5px 3px rgba(0, 0, 0, 0.12); 614 | } 615 | 616 | .searchInput input { 617 | height: 55px; 618 | width: 100%; 619 | outline: none; 620 | border: none; 621 | border-radius: 5px; 622 | padding: 0 60px 0 20px; 623 | font-size: 18px; 624 | box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1); 625 | } 626 | 627 | .searchInput.active input { 628 | border-radius: 5px 5px 0 0; 629 | } 630 | 631 | .searchInput .resultBox { 632 | padding: 0; 633 | opacity: 1; 634 | pointer-events: none; 635 | max-height: 280px; 636 | overflow-y: auto; 637 | } 638 | 639 | .searchInput .icon { 640 | position: absolute; 641 | right: 0px; 642 | top: 0px; 643 | height: 55px; 644 | width: 55px; 645 | text-align: center; 646 | line-height: 55px; 647 | font-size: 20px; 648 | color: gray; 649 | cursor: pointer; 650 | } 651 | 652 | .searchInput .icon i { 653 | margin-top: 17px; 654 | } 655 | 656 | b { 657 | font-weight: bold; 658 | } 659 | 660 | 661 | .searcher .message { 662 | padding: 10px; 663 | padding-bottom: 15px; 664 | display: inline-block; 665 | width: 100%; 666 | font-size: 0.9em; 667 | border-bottom: 1px solid #ebebeb; 668 | pointer-events: auto; 669 | cursor: pointer; 670 | } 671 | 672 | .searcher .message:last-child { 673 | border-bottom: none; 674 | border-bottom-left-radius: 5px; 675 | border-bottom-right-radius: 5px; 676 | } 677 | 678 | .searcher .message:hover { 679 | background: #ffd6b9; 680 | } 681 | 682 | .searcher .message img { 683 | margin: 6px 8px 0 0; 684 | width: 22px; 685 | border-radius: 50%; 686 | float: left; 687 | } 688 | 689 | .searcher .message p { 690 | float: left; 691 | display: inline-block; 692 | padding: 10px 15px; 693 | border-radius: 20px; 694 | max-width: calc(100% - 45px); 695 | line-height: 130%; 696 | word-wrap: break-word; 697 | background-color: #ebebeb 698 | } 699 | 700 | .searcher .message .sender { 701 | display: block; 702 | clear: right; 703 | padding: 2px 40px; 704 | font-size: 0.8em; 705 | font-color: #888888; 706 | } -------------------------------------------------------------------------------- /services/web/public/static/vue-virtual-scroll.js: -------------------------------------------------------------------------------- 1 | ;(function (root, factory) { 2 | var namespace = 'VirtualScrollList' 3 | if (typeof exports === 'object' && typeof module === 'object') { 4 | module.exports = factory(namespace, require('vue')) 5 | } else if (typeof define === 'function' && define.amd) { 6 | define(['vue'], factory.bind(root, namespace)) 7 | } else if (typeof exports === 'object') { 8 | exports[namespace] = factory(namespace, require('vue')) 9 | } else { 10 | root[namespace] = factory(namespace, root['Vue']) 11 | } 12 | })(this, function (namespace, Vue2) { 13 | if (typeof Vue2 === 'object' && typeof Vue2.default === 'function') { 14 | Vue2 = Vue2.default 15 | } 16 | 17 | var _debounce = function (func, wait, immediate) { 18 | var timeout 19 | return function () { 20 | var context = this 21 | var args = arguments 22 | var later = function () { 23 | timeout = null 24 | if (!immediate) { 25 | func.apply(context, args) 26 | } 27 | } 28 | var callNow = immediate && !timeout 29 | clearTimeout(timeout) 30 | timeout = setTimeout(later, wait) 31 | if (callNow) { 32 | func.apply(context, args) 33 | } 34 | } 35 | } 36 | 37 | return Vue2.component(namespace, { 38 | props: { 39 | size: { type: Number, required: true }, 40 | remain: { type: Number, required: true }, 41 | rtag: { type: String, default: 'div' }, 42 | wtag: { type: String, default: 'div' }, 43 | wclass: { type: String, default: '' }, 44 | start: { type: Number, default: 0 }, 45 | offset: { type: Number, default: 0 }, 46 | variable: [Function, Boolean], 47 | bench: Number, 48 | debounce: Number, 49 | totop: Function, 50 | tobottom: Function, 51 | onscroll: Function 52 | }, 53 | 54 | created: function () { 55 | var start = this.start >= this.remain ? this.start : 0 56 | var keeps = this.remain + (this.bench || this.remain) 57 | 58 | this.delta = { 59 | start: start, // start index. 60 | end: start + keeps - 1, // end index. 61 | keeps: keeps, // nums keeping in real dom. 62 | total: 0, // all items count, update in filter. 63 | offsetAll: 0, // cache all the scrollable offset. 64 | paddingTop: 0, // container wrapper real padding-top. 65 | paddingBottom: 0, // container wrapper real padding-bottom. 66 | varCache: {}, // object to cache variable index height and scroll offset. 67 | varAverSize: 0, // average/estimate item height before variable be calculated. 68 | varLastCalcIndex: 0 // last calculated variable height/offset index, always increase. 69 | } 70 | }, 71 | 72 | watch: { 73 | size: function () { 74 | this.alter = 'size' 75 | }, 76 | remain: function () { 77 | this.alter = 'remain' 78 | }, 79 | bench: function () { 80 | this.alter = 'bench' 81 | }, 82 | start: function () { 83 | this.alter = 'start' 84 | }, 85 | offset: function () { 86 | this.alter = 'offset' 87 | } 88 | }, 89 | 90 | methods: { 91 | onScroll: function (e) { 92 | var delta = this.delta 93 | var offset = this.$refs.vsl.scrollTop 94 | 95 | if (delta.total > delta.keeps) { 96 | this.updateZone(offset) 97 | } else { 98 | delta.end = delta.total - 1 99 | } 100 | 101 | var offsetAll = delta.offsetAll 102 | if (this.onscroll) { 103 | this.onscroll(e, { 104 | offset: offset, 105 | offsetAll: offsetAll, 106 | start: delta.start, 107 | end: delta.end 108 | }) 109 | } 110 | 111 | if (!offset && delta.total) { 112 | this.triggerEvent('totop') 113 | } 114 | 115 | if (offset >= offsetAll) { 116 | this.triggerEvent('tobottom') 117 | } 118 | }, 119 | 120 | // update render zone by scroll offset. 121 | updateZone: function (offset) { 122 | var overs = this.variable 123 | ? this.getVarOvers(offset) 124 | : Math.floor(offset / this.size) 125 | 126 | var delta = this.delta 127 | var zone = this.getZone(overs) 128 | var bench = this.bench || this.remain 129 | 130 | // for better performance, if scroll pass items within now bench, do not update. 131 | if (!zone.isLast && (overs > delta.start) && (overs - delta.start <= bench)) { 132 | return 133 | } 134 | 135 | delta.end = zone.end 136 | delta.start = zone.start 137 | this.$forceUpdate() 138 | }, 139 | 140 | // return the scroll passed items count in variable. 141 | getVarOvers: function (offset) { 142 | var low = 0 143 | var middle = 0 144 | var middleOffset = 0 145 | var delta = this.delta 146 | var high = delta.total 147 | 148 | while (low <= high) { 149 | middle = low + Math.floor((high - low) / 2) 150 | middleOffset = this.getVarOffset(middle) 151 | 152 | // calculate the average variable height at first binary search. 153 | if (!delta.varAverSize) { 154 | delta.varAverSize = Math.floor(middleOffset / middle) 155 | } 156 | 157 | if (middleOffset === offset) { 158 | return middle 159 | } else if (middleOffset < offset) { 160 | low = middle + 1 161 | } else if (middleOffset > offset) { 162 | high = middle - 1 163 | } 164 | } 165 | 166 | return low > 0 ? --low : 0 167 | }, 168 | 169 | // return a variable scroll offset from given index. 170 | getVarOffset: function (index, nocache) { 171 | var delta = this.delta 172 | var cache = delta.varCache[index] 173 | 174 | if (!nocache && cache) { 175 | return cache.offset 176 | } 177 | 178 | var offset = 0 179 | for (var i = 0; i < index; i++) { 180 | var size = this.getVarSize(i, nocache) 181 | delta.varCache[i] = { 182 | size: size, 183 | offset: offset 184 | } 185 | offset += size 186 | } 187 | 188 | delta.varLastCalcIndex = Math.max(delta.varLastCalcIndex, index - 1) 189 | delta.varLastCalcIndex = Math.min(delta.varLastCalcIndex, delta.total - 1) 190 | 191 | return offset 192 | }, 193 | 194 | // return a variable size (height) from given index. 195 | getVarSize: function (index, nocache) { 196 | var cache = this.delta.varCache[index] 197 | if (!nocache && cache) { 198 | return cache.size 199 | } 200 | 201 | if (typeof this.variable === 'function') { 202 | return this.variable(index) || 0 203 | } else { 204 | var slot = this.$slots.default[index] 205 | var style = slot && slot.data && slot.data.style 206 | if (style && style.height) { 207 | var shm = style.height.match(/^(.*)px$/) 208 | return (shm && +shm[1]) || 0 209 | } 210 | } 211 | return 0 212 | }, 213 | 214 | // return the variable paddingTop base current zone. 215 | // @todo: if set a large `start` before variable was calculated, 216 | // here will also case too much offset calculate when list is very large, 217 | // consider use estimate paddingTop in this case just like `getVarPaddingBottom`. 218 | getVarPaddingTop: function () { 219 | return this.getVarOffset(this.delta.start) 220 | }, 221 | 222 | // return the variable paddingBottom base current zone. 223 | getVarPaddingBottom: function () { 224 | var delta = this.delta 225 | var last = delta.total - 1 226 | if (delta.total - delta.end <= delta.keeps || delta.varLastCalcIndex === last) { 227 | return this.getVarOffset(last) - this.getVarOffset(delta.end) 228 | } else { 229 | // if unreached last zone or uncalculate real behind offset 230 | // return the estimate paddingBottom avoid too much calculate. 231 | return (delta.total - delta.end) * (delta.varAverSize || this.size) 232 | } 233 | }, 234 | 235 | // retun the variable all heights use to judge reach bottom. 236 | getVarAllHeight: function () { 237 | var delta = this.delta 238 | if (delta.total - delta.end <= delta.keeps || delta.varLastCalcIndex === delta.total - 1) { 239 | return this.getVarOffset(delta.total) 240 | } else { 241 | return this.getVarOffset(delta.start) + (delta.total - delta.end) * (delta.varAverSize || this.size) 242 | } 243 | }, 244 | 245 | // the ONLY ONE public method, allow the parent update variable by index. 246 | updateVariable: function (index) { 247 | // clear/update all the offfsets and heights ahead of index. 248 | this.getVarOffset(index, true) 249 | }, 250 | 251 | // return the right zone info base on `start/index`. 252 | getZone: function (index) { 253 | var start, end 254 | var delta = this.delta 255 | 256 | index = parseInt(index, 10) 257 | index = Math.max(0, index) 258 | 259 | var lastStart = delta.total - delta.keeps 260 | var isLast = (index <= delta.total && index >= lastStart) || (index > delta.total) 261 | if (isLast) { 262 | end = delta.total - 1 263 | start = Math.max(0, lastStart) 264 | } else { 265 | start = index 266 | end = start + delta.keeps - 1 267 | } 268 | 269 | return { 270 | end: end, 271 | start: start, 272 | isLast: isLast 273 | } 274 | }, 275 | 276 | // trigger a props event on parent. 277 | triggerEvent: function (event) { 278 | if (this[event]) { 279 | this[event]() 280 | } 281 | }, 282 | 283 | // set manual scroll top. 284 | setScrollTop: function (scrollTop) { 285 | this.$refs.vsl.scrollTop = scrollTop 286 | }, 287 | 288 | // filter the shown items base on `start` and `end`. 289 | filter: function () { 290 | var delta = this.delta 291 | var slots = this.$slots.default 292 | 293 | if (!slots) { 294 | slots = [] 295 | delta.start = 0 296 | } 297 | 298 | delta.total = slots.length 299 | 300 | var paddingTop, paddingBottom, allHeight 301 | var hasPadding = delta.total > delta.keeps 302 | 303 | if (this.variable) { 304 | allHeight = this.getVarAllHeight() 305 | paddingTop = hasPadding ? this.getVarPaddingTop() : 0 306 | paddingBottom = hasPadding ? this.getVarPaddingBottom() : 0 307 | } else { 308 | allHeight = this.size * delta.total 309 | paddingTop = this.size * (hasPadding ? delta.start : 0) 310 | paddingBottom = this.size * (hasPadding ? delta.total - delta.keeps : 0) - paddingTop 311 | } 312 | 313 | delta.paddingTop = paddingTop 314 | delta.paddingBottom = paddingBottom 315 | delta.offsetAll = allHeight - this.size * this.remain 316 | 317 | var targets = [] 318 | for (var i = delta.start; i <= delta.end; i++) { 319 | targets.push(slots[i]) 320 | } 321 | return targets 322 | } 323 | }, 324 | 325 | mounted: function () { 326 | if (this.start) { 327 | var start = this.getZone(this.start).start 328 | this.setScrollTop(this.variable ? this.getVarOffset(start) : start * this.size) 329 | } else if (this.offset) { 330 | this.setScrollTop(this.offset) 331 | } 332 | }, 333 | 334 | // check if delta should update when prorps change. 335 | beforeUpdate: function () { 336 | var delta = this.delta 337 | delta.keeps = this.remain + (this.bench || this.remain) 338 | 339 | var calcstart = this.alter === 'start' ? this.start : delta.start 340 | var zone = this.getZone(calcstart) 341 | 342 | // if start, size or offset change, update scroll position. 343 | if (~['start', 'size', 'offset'].indexOf(this.alter)) { 344 | this.$nextTick(this.setScrollTop.bind(this, this.alter === 'offset' 345 | ? this.offset : this.variable 346 | ? this.getVarOffset(zone.isLast ? delta.total : zone.start) 347 | : zone.isLast && (delta.total - calcstart <= this.remain) 348 | ? delta.total * this.size : calcstart * this.size) 349 | ) 350 | } 351 | 352 | // if points out difference, force update once again. 353 | if (calcstart !== zone.start || delta.end !== zone.end || this.alter) { 354 | this.alter = '' 355 | delta.end = zone.end 356 | delta.start = zone.start 357 | this.$forceUpdate() 358 | } 359 | }, 360 | 361 | render: function (h) { 362 | var list = this.filter() 363 | var delta = this.delta 364 | var dbc = this.debounce 365 | 366 | return h(this.rtag, { 367 | 'ref': 'vsl', 368 | 'style': { 369 | 'display': 'block', 370 | 'overflow-y': 'auto', 371 | 'height': this.size * this.remain + 'px' 372 | }, 373 | 'on': { 374 | '&scroll': dbc ? _debounce(this.onScroll.bind(this), dbc) : this.onScroll 375 | } 376 | }, [ 377 | h(this.wtag, { 378 | 'style': { 379 | 'display': 'block', 380 | 'padding-top': delta.paddingTop + 'px', 381 | 'padding-bottom': delta.paddingBottom + 'px' 382 | }, 383 | 'class': this.wclass 384 | }, list) 385 | ]) 386 | } 387 | }) 388 | }) 389 | --------------------------------------------------------------------------------