Team Chat Powered by PubNub

Team Chat Powered by PubNub

    ›Quickstart

    Quickstart

    • Introduction
    • Run Locally
    • Advanced Features

    Tutorial

    • Overview
    • Setup Theming
    • Add PubNub Keys
    • Populate Data
    • Login
    • Show User Details
    • Show Conversations
    • Send Messages
    • Join Conversation
    • Leave Conversation
    • Show Members
    • Send Typing Indicators
    • Profanity Filter

    Advanced Features

    Team Chat comes with additional rich features like link previews, gifs, and content moderation. These features required additional setup and free third party APIs.

    Gif Picker

    To enable the gif picker, you need a GIPHY API key. You can sign up for a (free) developer account and create a key from the GIPHY developer dashboard.

    1. Create .env at the root of the project to hold your environment variables. This file will no be commited.

    2. Copy the API key from the dashboard and add it to .env.

      GIPHY_API_KEY=your-api-key
      
    3. The variable needs to be exposed to the React app by adding another line.

      REACT_APP_GIPHY_API_KEY=$GIPHY_API_KEY
      
    1. Restart the dev server for the changes to take effect.

      npm start
      

    Image Moderation

    In addition to message moderation, AI powered moderation can be enabled to block innapropriate images.

    You can sign up for a (free) account and API key from the Sightengine dashboard.

    1. Add the API User and API Secret to your .env file.

      FUNCTIONS_SIGHTENGINE_API_SECRET=your-api-secret
      FUNCTIONS_SIGHTENGINE_API_USER=your-api-user
      

    /giphy command

    The /giphy ${message} command shares a gif related to the message.

    1. You should have created a GIPHY API key in the Gif Picker section. Exposed it to the function by adding another variable that references it.

      FUNCTIONS_GIPHY_API_KEY=$GIPHY_API_KEY
      

    Deploy Functions

    Link previews, message moderation, and the /giphy command are powered by PubNub functions. To enable these features, you'll need to build and deploy the function code in /server.

    Option 1: Automatic Upload

    Note: To manage functions from the CLI, you have to sign in to your PubNub account. This is currently not possible if you created your account with SSO.

    1. Use the CLI to build and deploy the functions from source (in server/src).

      npm run deploy:functions
      
    2. Enter your PubNub account email and password (these will not be saved).

    3. Select your app and keyset using the up/down arrows and return to submit.

    Option 2: Manual Upload

    1. From the PubNub dashboard, select the keyset your are using. Then, open the functions tab (on the left). Enter a module name and description, then click Create New Module.

    2. Click Create Function, give it a name, set the event type to Before Publish or Fire and enter * for the channel pattern and click Create.

    3. Use the CLI to build the functions from source (in server/src).

      npm run build:functions
      
    4. After running the build command, a minified and compiled version of the function is available is server/build/transformPublishedMessages.js. Copy the contents of the file into the functions editor and click Save.

    5. Click Start Module from the top right to deploy your function.

    ← Run LocallyOverview →
    • Gif Picker
    • Image Moderation
    • /giphy command
    • Deploy Functions
      • Option 1: Automatic Upload
      • Option 2: Manual Upload
    Docs
    QuickstartTutorialThemeingPubNub Chat
    Source
    GitHubStar
    PubNub
    Copyright © 2020 PubNub