mattfite / chat-demo

A simple serverless chat demo

A simple serverless chat application

This is a living project built to demonstrate serverless concepts

Configure

Create a file named credentials.json from the template, and fill in all the secret info. You'll have to get this from Matt.

cp credentials-template.json credentials.json

Develop

To develop, install dependencies with NPM and launch webpack dev server:

npm install
npm run webpack-serve

The app is accessible at localhost:3000. The files are automatically recompiled and served from memory as the contents change.

Test

There are no tests at the moment, but there is static code analysis, using eslint. To check your code for issues, run the following command:

npm run lint

Build

Build static files in the public directory with NPM:

npm install
npm run build

Deploy

After building, you can host the root directory somewhere, like Amazon S3

npm run deploy

This will copy the contents of the public/ directory to s3://chat-demo. In order to work, you must:

• Have aws cli setup in your path
• Have your AWS cli credentials properly configured
• Have R/W access to the s3://chat-demo bucket

References

• Serverless JS-Webapp Pub/Sub with AWS IoT
• AWS IoT-based serverless JS-Webapp Pub/Sub demo
• Is it possible to use Socket.io with AWS Lambda?
• Building Facebook Messenger
• MQTT Essentials 1: Introducing MQTT
• MQTT Essentials 2: Publish & Subscribe
• MQTT Essentials 3: Client, Broker and Connection Establishment
• MQTT Essentials 4: Publish, Subscribe & Unsubscribe
• MQTT Essentials 5: Topics & Best Practices
• MQTT Essentials 6: Quality of Service 0, 1 & 2
• Building a Chat Application with Socket.io
• 600k concurrent websocket connections on AWS using Node.js
• How the AWS IoT Platform Works
• How To Build A Serverless Notificaiton System on AWS
• Serverless Service for Serverless Notifications (AWS IoT)
• A chat application without servers
• aws-signature-v4
• AWS S3: Permissions Required for Website Access
• AWS SDK for JavaScript: Bundling Applications with Webpack

chat-demo's Issues

Add authentication with an SSO provider

leading contenders are:

• Auth0 -- 7,000 users free. Completely free for OSS projects.
• Cognito -- Free for the first 50,000 MAUs. Not free after that.

Bonus points for doing this as a single-page app.

UI should be improved to prevent usage without login

Access usage data

it would be great to be able to see:

• number of active users
• number of active conversations
• monthly volume of message traffic

Should only be available to elevated or admin users ( #10 ).

UX improvements for Stesie's app

• Hide the text input and send button until connection is successful
• Clear input when message is sent
• Enter key should send the message, not refresh the page

Remove secret keys in public assets

I removed the secret keys from the source code, but they are still included in the compiled assets. Explore creating a lambda function that creates the URL hash and reads the secret keys from an environment variable. The the app can fetch the URL before connecting to the WebSocket via API Gateway.

Make it mobile

It looks kind of crappy on mobile. You can add a couple meta tags to make it render better on a small display.

Implement Socket.io UI

Create an alternate UI which is based on the tutorial from socket.io. The clients should be able to communicate using either UI.

Hook it into CodeStar

Prefix messages with user name or user id

Consider adding user roles

Once there are users with authentication ( #9 ) we need to determine if there should be an administrative user to manage or remove other user accounts or topics.

Deploy command

Create a command to deploy the static files to s3.

I recommend adding an npm script npm run deploy

JavaScript Linting

Use eslint for static code analysis of javascript files. This would be nice to have in lieu of unit tests, so we can establish good coding practices and demonstrate how this can be added to the CodeStar build pipeline.