juanr.co

RealtimeChat setup

3 min read

Some things in here are no longer relevant since the project has evolved

This is a list of things that you need to do in order to fully deploy the rtchat project, note that it does not include all the steps.

To host the whole rtchat project you will need a Firebase project with billing enabled. The project also uses other GCP services outside Firebase.

General files

Set up .firebaserc to match your project, you might need to use the comand firebase use --add <project-id> instead.

Deploy the hosted site

This site is used as part of the authentication flow, you can deploy it by running: firebase deploy --only hosting, after the site is deployed take note of the url that was generated.

Twitch Application

  • Create a new application from the twitch developer console.
  • Set up callbacks URL to match <firebase hosted URL>/auth/twitch/callback

Mobile App

  • Set up an android application in your firebase project (you probably need the fingerprint for auth, see)
  • Download the config file and update it in android/app/google-services.json
  • Update url in lib/screens/sign_in.dart to match your firebase hosted site (without https://).
    • You are likely to need to run flutter clean (I think otherwise the build will keep the old google services file)

Pub/Sub resources

In order for the agent to connect to a users chat, realtimechat uses pub/sub to manage agent subscriptions. This resources are created in GCP.

  • Create a topic named subscribe, the topic name will end up being something like projects/<your firebase project>/topics/subscribe
  • Create a topic named unsubscribe, the topic name will end up being something like projects/<your firebase project>/topics/unsubscribe
  • Create a subscription to the subscribe topic called subscribe-sub with pull type.
  • Add the Pub/Sub Editor role to the Firebase service account.

Functions

  • Add your twitch app config to firebase firebase functions:config:set twitch.id="CLIENT_ID" twitch.secret="SECRET" express.secret="something"
  • Enable IAM Service Credentials API in GCP
  • Copy your Firebase service account file to functions/service_account.json.
  • Update functions/src/auth.ts HOST to match your firebase hosted site.
  • Update ocurrences of rtchat-47692 in functions/src/subscriptions.ts and functions/src/eventsub.ts

Agent

  • Copy your Firebase service account file to agent/service_account.json.
  • Update agent/.env to include your Firebase project id, twitch app id, app secret and twitch bot user id (this user id is not twitches id but rtchat id, so the use must have logged in before to get this value).
  • Update the bot name in src/client.ts from realtimechat to bot name (same user for which the id was provided in the previous step)
  • Update ocurrences of rtchat-47692 in agent/index.ts to match your project id.

Secret Manager

The newest version now pulls secrets from GCPs Secret Manager, so you will need to follow these steps:

  • Enable Secret Manager API for the project (from GCP, not from Firebase)
  • Create the firebase-service-account secret, download the service account json from firebase and upload that as the secret.
  • Create the twitch-client-secret secret, grab your Twitch App secret from the twitch developer console and use that as “plain text secret”.
  • Probably add some permissions to the account?

Notes

  • There are features that won’t work on your self hosted deployment, for example, Twitch EventSub requires the channel’s credentials and as such you won’t receive these event unless you are a partner yourself.
  • debugPaintSizeEnabled visual debug limits margins

Graph View

Backlinks