{"id":20058859,"url":"https://github.com/ably-labs/scalable-serverless-editable-chat-demo","last_synced_at":"2025-05-05T15:30:30.826Z","repository":{"id":47470587,"uuid":"387483907","full_name":"ably-labs/scalable-serverless-editable-chat-demo","owner":"ably-labs","description":"A chat demo built in Nuxt.js with Ably, AWS RDS for Postgres, AWS Lambdas and the Ably/Postgres connector to make it entirely serverless and scalable","archived":false,"fork":false,"pushed_at":"2023-06-21T23:20:01.000Z","size":690,"stargazers_count":8,"open_issues_count":1,"forks_count":6,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-04-17T15:32:37.241Z","etag":null,"topics":["aws","cdc","editable-chat","lambda","postgresql","realtime-database","serverless"],"latest_commit_sha":null,"homepage":"https://serverless-scalable-chat.netlify.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ably-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-19T14:00:51.000Z","updated_at":"2023-03-19T03:02:14.000Z","dependencies_parsed_at":"2022-08-28T09:00:18.402Z","dependency_job_id":null,"html_url":"https://github.com/ably-labs/scalable-serverless-editable-chat-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Fscalable-serverless-editable-chat-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Fscalable-serverless-editable-chat-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Fscalable-serverless-editable-chat-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Fscalable-serverless-editable-chat-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ably-labs","download_url":"https://codeload.github.com/ably-labs/scalable-serverless-editable-chat-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224452840,"owners_count":17313668,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","cdc","editable-chat","lambda","postgresql","realtime-database","serverless"],"created_at":"2024-11-13T13:04:37.110Z","updated_at":"2024-11-13T13:04:37.661Z","avatar_url":"https://github.com/ably-labs.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A fully serverless editable chat demo that can scale to arbitrary levels\n\nOne of the obvious architectural patterns when it comes to building chat apps with a [Pub/Sub](https://ably.com/topic/pub-sub) service like [Ably](https://ably.com/) is to publish messages on a channel and make sure all the participants are subscribed to that same channel so they can receive the updates.\n\nThis pattern, however, suffers from the fact that there's no way to stream updates about previously published messages, for example in the case of having to edit a previously sent chat message. \n\nThis can be resolved by adopting a database-driven architectural pattern and allowing realtime messages to be triggered following any changes to the database, and thus to previously published data. To make this possible, the editable chat app makes use of the [Ably Postgres connector](https://github.com/ably-labs/ably-postgres-connector) which can watch for changes on a Postgres DB and publish messages to specific Ably channels on any change.\n\n## Supporting articles\n\nI've written extensively about the architecture, implementation and deployment of various components of this app.\n\nYou can find them here:\n\n- [Database-driven realtime architectures: building a serverless and editable chat app - Part 1](https://ably.com/blog/database-driven-realtime-architectures-serverless-editable-chat-app-part-1)\n- [Database-driven realtime architectures: building a serverless and editable chat app - Part 2](https://ably.com/blog/database-driven-realtime-architectures-serverless-editable-chat-app-part-2)\n\n## App architecture\n\n![Serverless chat app architecture](https://user-images.githubusercontent.com/5900152/132007004-f9f359ba-67c8-43c9-b627-0fff901b10d0.jpg)\n\n## Tech stack of the chat app\n\n- [NuxtJS](https://nuxtjs.org/) for frontend web development.\n- [Ably](https://ably.com/) to enable the Pub/Sub pattern.\n- [AWS Lambda](https://aws.amazon.com/lambda/) functions to insert and update rows in the database.\n- [PostgresDB](https://www.postgresql.org/) hosted on [AWS RDS](https://aws.amazon.com/rds/) to store the data.\n- [Ably Postgres connector](https://github.com/ably-labs/ably-postgres-connector) to watch changes on the database tables and publish messages on every change.\n- [AWS Fargate](https://aws.amazon.com/fargate/) with [AWS ECS](https://aws.amazon.com/ecs/) and [AWS ECR](https://aws.amazon.com/ecr/) to deploy the Ably Postgres connector's dockerized image.\n- [Netlify functions](https://www.netlify.com/products/functions/) to enable a token auth endpoint to authenticate with Ably.\n- [Netlify](https://netlify.com/) to host the static Jamstack site.\n\n## How to check out the demo\n\nGo to [https://serverless-scalable-chat.netlify.app/](https://serverless-scalable-chat.netlify.app/) and try it out. You can open multiple instances of it in different tabs or browsers to pretend there are multiple users.\n\n## How to run it locally\n\n#### Step 1 - Set up your Postgres Database\n\nThis project requires a PostgresDB to store messages. \n\n- Download and install [Postgres](https://www.postgresql.org/)\n- Download and install [pgAdmin](https://www.pgadmin.org/) to perform various operations on your PostgresDB\n- Create a new table called `chat_data` with the following SQL command\n\n```\nCREATE TABLE IF NOT EXISTS public.chat_data\n(\n    username text COLLATE pg_catalog.\"default\",\n    msg_id text COLLATE pg_catalog.\"default\" NOT NULL,\n    msg_data text COLLATE pg_catalog.\"default\",\n    client_id text COLLATE pg_catalog.\"default\",\n    incremental_record_id bigint NOT NULL DEFAULT nextval('chat_data_incremental_record_id_seq'::regclass),\n    created_at_timestamp bigint,\n    is_edited boolean,\n    CONSTRAINT chat_data_pkey PRIMARY KEY (msg_id)\n)\n```\n\n#### Step 2 - Set up the Ably Postgres connector for your app\n\nThis project depends on the Ably Postgres connector, so we'll need to set that up with our credentials.\n\n- Clone the connector repo with `git clone https://github.com/ably-labs/ably-postgres-connector.git`\n- Update `config/default.json` with the details of your database, tables, Ably channels and API Key. Note that if you want to name your channels differently, you'll need to update this in the Nuxt app as well.\n- Run the connector locally using `node test.js`\n\n#### Step 3 - Set up the Lambda function and Ably integration\n\nThis project uses a Lambda function to make `INSERT` and `UPDATE` operations on the database. You can find the code in the `lambda-function` folder. \n\nUpload this code to your Lambda function and set it up to be triggered whenever a new message is published on the `outgoing-chat` channel of your Ably app by [following the steps provided in Ably docs](https://ably.com/documentation/general/events/aws-lambda).\n\n#### Step 4 - Set up Ably auth endpoint\n\nAbly accepts two ways of authentication - [Basic Auth](https://ably.com/documentation/core-features/authentication#basic-authentication) and [Token Auth](https://ably.com/documentation/core-features/authentication#token-authentication). \n\nBasic auth is mostly useful for quick demos but you'll need to use Token Auth for secure authentication on production level apps to make sure the API Key doesn't get exposed.\n\n##### For local usage\n\nIf you'd just like to try it out using Basic auth, you'll need to update the `instantiateAbly()` method in the `actions.js` file of the Nuxt store. Just replace the `authUrl: ''` parameter with `key: '\u003cYOUR-ABLY-API-KEY\u003e'`.\n\n##### For usage in production\n\nTo enable Token auth, we can set up an auth endpoint and have this endpoint issue [Ably Token Requests](https://ably.com/documentation/realtime/authentication#token-request) so that our frontend clients can authenticate with Ably securely. \n\nIn this repo, I have the auth endpoint hosted as a Netlify serverless function. You can find this in `chat-web-app/netlify/functions/ably-auth.js`. When you deploy the Nuxt project to Netlify, the function will be automatically activated by Netlify. \n\nHowever, you'll need to update the `authUrl` parameter used to authenticate Ably in the Nuxt app and add your function's URL instead. \n\nYou can find this in the `instantiateAbly()` method in the `actions.js` file of the Nuxt store. Just replace the `https://serverless-scalable-chat.netlify.app` part of the endpoint with your Netlify function's URL.\n\nFor this to work, you'll need to supply your Ably API Key to the Netlify function via env variables. You can add it like so `ABLY_API_KEY=\u003cYOUR-API-KEY\u003e`\n\nWith this, you should be all set with the Ably auth step.\n\n#### Step 5 - Run the chat app\n\n- Change directory to the web app with `cd chat-web-app`\n\n- Install all the dependencies with `npm install`\n\n- Run the app with `npm run dev`\n\n- Go to the browser and open multiple instances of `http://localhost:3000/` to try out the app.\n\nNote: If you've used Token auth via Netlify functions, make sure that you've deployed the serverless auth endpoint before running the app.\n\n## Other notes\n\n- All the Ably methods are in the `chat-web-app/store/actions.js` file.\n- More details on various steps are coming soon but in the meantime, feel free to reach out to me [directly via Twitter](https://twitter.com/Srushtika) or [via Ably Support](https://ably.com/contact), in case of any questions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fably-labs%2Fscalable-serverless-editable-chat-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fably-labs%2Fscalable-serverless-editable-chat-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fably-labs%2Fscalable-serverless-editable-chat-demo/lists"}