Please note that this project is no longer actively maintained or accepting Pull Requests. Please use the React Group Chat app instead.

---

Simple Group Chat App

Featuring Reusable PubNub React Chat Components

This project is a collection of reusable chat components that makes it simple to get started with PubNub in React. Each of the components are designed to be reusable, expandable, and easy to use in another React application. Anyone can build a robust chat app by using these components as a starting point.

Support Chat App was built using the components found in this project.

This project is an example of a group chat style chat experience using reusable chat components. It includes the basic features you would expect from a group chat.

Important Note: This project is a work in progress. It may contain incomplete code. Pull requests to fix bugs and add features are always welcomed.

Included Components:

• Active Users - Displays a list of the active users in the chat and a total count.
• Message List - Displays the messages received in the chat and the chat history when first loaded.
• Compose - Provides input area for sending new messages to the chat.

Components Coming Soon:

• Emoji - Adds emojis to the Compose component.
• Typing Indicator - Add typing indicator to the Compose component.
• Read Receipts - Updates Message List component with a timestamp of when messages were last read.

Notable Features:

• Group style chat with automatic creation of users.
• PubNub Presence powered user activity.
• Message history.

Requirements

• Node.js
• PubNub Account (Free)

PubNub Account and App Setup

1. You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys from the PubNub Developer Portal.

2. Sign in to your PubNub Dashboard.

3. Click Create New App.

4. Give your app a name, and select Chat App as the app type.

5. Click Create.

6. Click your new app to open its settings, then click its keyset.

7. Enable the Channel Presence feature for your keyset.

8. Enable the Storage and Playback feature for your keyset.

9. Enable the Stream Controller feature for your keyset.

10. Copy the Publish and Subscribe keys for the next step.

Building and Running

1. You'll need to run the following commands from your terminal.

2. Clone the GitHub repository.

   git clone https://github.com/PubNubDevelopers/chat-component-app-simple.git

3. Navigate into the repository.

   cd chat-component-app-simple

4. Open src/config/pubnub-keys.json. Replace YOUR_PUBLISH_KEY_HERE and YOUR_SUBSCRIBE_KEY_HERE with your keyset from your PubNub Dashboard.

5. Install the node modules.

   npm install

6. Run the project in your local environment.

   npm start

   A web browser should automatically open and you can start chatting! If it doesn't open try navigating to http://localhost:8080/

Further Information

Checkout PubNub Chat Docs page for more information about how to use the React and Redux SDKs to add in-app chat to your applications.