chatapp

Online Demo

Deploy a Full-Stack Realtime App in seconds using Serverless Components. Just provide your frontend code (powered by the website component), and your backend code (powered by the socket component).

Great use-cases for this project are: Chat Apps, Bots, Notification Systems, Charting Dashboards, Stock Tickers & more. As always, consider a serverless stack like this if you are looking to deliver software or features with extremely low overhead.

1. Install
2. Create
3. Configure
4. Deploy
5. Remove
6. Example

Before starting, you should goto Tencent Cloud Mongodb and buy a instance. Then you can get mongodb connection string.

1. Install

$ npm install -g serverless

2. Create

$ mkdir my-realtime-app && cd my-realtime-app

the directory should look something like this:

|- backend
  |- app.js
|- frontend
  |- index.html
|- serverless.yml
|- .env

# tencent auth
TENCENT_SECRET_ID=123
TENCENT_SECRET_KEY=123

# mongodb connect string
MONGO_CONNECTION=mongodb://xxx:xxx@localhost:27017/chatapp?authSource=admin


# global env
REGION=ap-guangzhou
VPC_ID=vpc-xxx
SUBNET_ID=subnet-xxx

the backend/app.js file should minimally look something like this:

on('connect', async (data, socket) => {})

on('disconnect', async (data, socket) => {})

For more info on working with the socket.js file, check out the socket component docs.

To see a full example of an application built with this, check out this Chat Application.

3. Configure

# serverless.yml
myChatApp:
  component: '@yugasun/serverless-chatapp'
  inputs:
    name: my-chat-app
    description: My Chat App
    region: ${env.REGION}

    # backend config to be passed to the socket component
    backend:
      region: ${env.REGION}
      functionName: chatapp
      code: ./backend
      functionConf:
        memorySize: 128
        timeout: 30
        vpcConfig:
          vpcId: ${env.VPC_ID}
          subnetId: ${env.SUBNET_ID}
        environment:
          variables:
            mongoConnectString: ${env.MONGO_CONNECTION}
      apigatewayConf:
        serviceTimeout: 30
        protocols:
          - https

    # frontend config to be passed to the website component
    frontend:
      protocol: https
      code:
        src: build
        root: frontend
        hook: npm run build
        envPath: ./src

4. Deploy

$ serverless --debug

5. Remove

$ serverless remove --debug

6. Example

You can see a full Chat Application that uses this Component in the example folder. It leverages Tencent Cloud Mongodb to maintain state of who is connected, so that messages can be sent out to the appropriate connection IDs.

You can also see how this Component can be used programmatically in the Chat App Component's source code.

New to Components?

Checkout the Serverless Components repo for more information.