In this tutorial, you'll explore Animal Forest Chat, a simple, yet feature-rich web chat app with React and the PubNub React SDK. The app runs in any modern browser, using PubNub as the core messaging infrastructure and framework to connect your chat users.
Download the code
You can get the full source code from GitHub. The code for this tutorial is in the
This tutorial requires the Presence and Storage & Playback add-ons. Refer to Create a PubNub app for detailed instructions.
A PubNub account. Sign up for PubNub and manage your projects from the Admin Dashboard.
Node.js. If you don't have Node.js installed, you can download it here.
Create a PubNub app
To create and configure a PubNub app for this tutorial, do the following:
Sign in to your PubNub Admin Dashboard, click Create New App, and give your app a name.
Select your new app, then click its keyset. Copy the Publish and Subscribe keys. You'll need these keys to include in your project.
Scroll down on the Key Options page and enable the Presence and Storage & Playback add-on features.
Click Save Changes, and you're done!
Run the project
To run the application in your local environment, do the following:
Include your PubNub keys into the project by adding them to the
The file should be similar to the following:
Navigate to the react project directory and install the project.
Finally, run the project in your local environment.
Open http://localhost:3000 to view the application in your browser. When you're done, type Control-C in your terminal window to stop the web server.
Explore the code
To learn more, the reference section in the documentation includes code snippets for advanced features like typing indicators, unread message counts, security controls, chatbots, and more.