Skip to content

Latest commit

 

History

History
138 lines (104 loc) · 4.75 KB

README.md

File metadata and controls

138 lines (104 loc) · 4.75 KB
Raw

React chat

Chat Engine is a free serverless chat API.

Try our free plan at chatengine.io

Installation

  • Using npm: npm install react-chat-engine --save
  • Using Yarn: yarn add react-chat-engine

Quick Start

Add serverless chat to your React app in 3 minutes.

  1. Register then create a project and user at chatengine.io

  2. Collect the public key, username and user password

  3. Install yarn add react-chat-engine

  4. Import the ChatEngine component and pass in publicKey, userName, and userSecret props

  5. Voila! You're done

EXAMPLE: Your implementation should look like the following

import React from 'react'

import { ChatEngine } from 'react-chat-engine'

export function App() {
  return (
    <ChatEngine
      publicKey={'b75e5bd5-cd84-404c-b820-06feff8c98c0'}
      userName={'john_smith'}
      userSecret={'secret_1234'}
    />
  )
}

Features

  • Authenticate users
  • Subscribe (connect) to incoming chats and messages
  • Create chats and messages
  • Add and remove people from chats
  • Edit and delete chat and message data

Props

  • publicKey (UUID REQUIRED) - Public API key for your chatengine.io project
  • userName (String REQUIRED) - Username of a person in this project
  • userSecret (String REQUIRED) - Set a secret for this person and use it to authenticate.
  • onConnect (Function) - Callback when the connection/authentication is complete
  • onFailAuth (Function) - Callback when the connection/authentication fails
  • onGetChats (Function) Callback when the person fetches their chats array
  • onNewChat (Function) - Callback when the person creates a new chat
  • onEditChat (Function) - Callback when the person edits a chat title
  • onDeleteChat (Function) - Callback when the person deletes one of their chats (must the chat's admin)
  • onAddPerson (Function) - Callback when a person is added to a chat
  • onRemovePerson (Function) - Callback when a person is removed/deleted from a chat
  • onGetMessages (Function) - Callback when the person gets a chat's messages
  • onNewMessage (Function) - Callback when a person posts a new message in one of the chats
  • onEditMessage (Function) - Callback when a person edits a new message in one of the chats
  • onDeleteMessage (Function) - Callback when a person deletes a new message in one of the chats
  • hideUI (Boolean) - Hides all UI components for a custom implementation (Warning: Advanced)

Functions

import { functionName } from 'react-chat-engine'

...

functionName(conn, args)
  • getChats (conn) => void - Get a person's array of chats
  • newChat (conn, title) => void - Create a new chat with this person as admin
  • editChat (conn, chatId, chatObj) => void - Edit the title of an existing chat
  • deleteChat (conn, chatId) => void - If you're admin, delete this existing chat
  • addPerson (props, chatId, userName) => void - Add an existing person (in the project) to an existing chat
  • removePerson (props, chatId, userName) => void - If you're admin, remove this user from an existing chat
  • getMessages (props, chatId) => void - Get the messages for an existing chat
  • sendMessage (props, chatId, messageObj) => void - Send a new message object into this chat
  • editMessage (props, chatId, messageId, messageObj) => void - Edit an exiting message object in this chat
  • deleteMessage (props, chatId, messageId) => void - Delete an exiting message object from this chat

Objects

Chat Object

  • id (int) - Unique primary key to identify this chat
  • admin (String) - Unique username of the person who created this chat
  • title (String) - Optional title of this chat
  • created (Datetime) - Date-time of chat creation
  • people (Array) - Array of people added to this chat
{
    "id": 1,
    "admin": "john_smith",
    "title": "Canada Day Party!",
    "created": "2020-09-05T20:28:22.352373Z",
    "people": [
        {
            "person": "john_smith"
        }
    ]
}

Chat / Person Association

  • person (String) - Unique username of a person involved in this chat
{ person: "john_smith" }

Message Object

  • id (int) - Unique primary key to identify this message
  • sender (String) - Unique username of the person who sent this message
  • text (String) - Contents of the message sent
  • created (Datetime) - Date-time of message creation
{
    "id": 1,
    "sender": "john_smith",
    "text": "Hey let's party!",
    "created": "2020-09-07T13:20:26.936400Z"
}