Get started with PubNub Chat Components for React

Migrate to Chat SDK

PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.

See how you can get a 1:1 chat app up and running.

You will download a sample React app that uses two PubNub Chat Components for React: Message Input and Message List. Then, you'll run the app and send your first message by typing it in the message input field. The messages will pile up on the screen as you send them.

Prerequisites​

Tools used

This guide uses React v16.8+, ReactDOM v16.8+, PubNub JavaScript SDK v4.29+, and PubNub React SDK v2.1.0+.

Steps​

Before you start, you need to obtain Publish and Subscribe Keys for your chat app. You need them to initialize the PubNub object in your app to send and receive messages through the PubNub Network. To get both keys, sign in or create an account on the Admin Portal. The autogenerated Demo Keyset in My First App already contains the configuration required to complete this guide.

Keyset configuration

When you create a new app on the Admin Portal, the first set of keys is generated automatically, but a single app can have as many keysets as you like. We recommend that you create separate keysets for production and test environments. There are some of the functionalities you might need to enable on your keyset depending on the use case, but they won't be required to complete this guide. These options include:

  • PRESENCE to monitor the subscribers of channels and delivers information on their real-time status
  • MESSAGE PERSISTENCE (including correct Retention) to persist all messages as they're published.
  • APP CONTEXT to easily store metadata about your application users and channels, and their membership associations, without the need to stand up your own databases. When using this feature, make sure you select a geographical region corresponding to most users of your application and to have these enabled: User Metadata Events, Channel Metadata Events, and Membership Events.

Run the chat app​

Now that you have your keyset, you can set up a chat app in two ways:

  1. Download the getting-started app from the react-chat-components repository.

  2. Unpack the archive into the folder of your choice.

  3. Open the terminal app and install the dependencies in the root react-chat-components folder:

yarn

  1. Go to the samples/react/getting-started folder.

  2. Open the app in the code editor, navigate to the src/getting-started.tsx file and replace myPublishKey and mySubscribeKey with your own Publish and Subscribe Keys from the keyset on the Admin Portal. To associate a sender/current user with the PubNub messages, it's required to configure the userId parameter that refers to your user ID in the database. If you wish, modify the default value for the chat user.

publishKey: "myPublishKey",
subscribeKey: "mySubscribeKey",
userId: "myFirstUser",
userId

For simplicity, the getting started app sets a static userId. However, if you implement chat in your app, you should generate a userId per user, device, and server and reuse it for their lifetime. Using separate User IDs in real-life apps is particularly important as it impacts your overall billing and the way your app works.

The complete getting-started.tsx file looks as follows:

/* Imports PubNub JavaScript and React SDKs to create and access PubNub instance across your app. */
/* Imports the required PubNub Chat Components to easily create chat apps with PubNub. */
import React from "react";
import PubNub from "pubnub";
import { PubNubProvider } from "pubnub-react";
import { Chat, MessageList, MessageInput } from "@pubnub/react-chat-components";

/* Creates and configures your PubNub instance. Be sure to replace "myPublishKey" and "mySubscribeKey"
  with your own keyset. If you wish, modify the default "myFirstUser" userId value for the chat user. */
const pubnub = new PubNub({
  publishKey: "myPublishKey",
  subscribeKey: "mySubscribeKey",
  userId: "myFirstUser",
});
const currentChannel = "Default";
show all 33 lines
  1. Back in the terminal, run the app on the dev server.
yarn start

Send your first message​

  1. Open the dev server in the browser at the default address http://127.0.0.1:5173/.

  2. Type and send your first message. The messages will pile up on the screen as you send them.

Getting Sttarted app for React

  1. To verify that the app is connected to the PubNub Network, mock a real-live chat conversation with myFirstUser. Open localhost in a new browser tab, send a message from one tab and reply to it from another.

Next steps​

With a React app running, find out how you can expand and customize it. Check out our:

Last updated on
On this page