Basic Chat

Chat

Author:

PubNub

Link to Github

Basic Chat

Overview

All chat experiences start with a basic chat room. This Basic Chat allows you to reproduce this experience with PubNub API’s in a 3 step process, clone the repo, put in your keys, and fire it up. Join a room, see who’s there, and type messages back and forth with everyone. New people who join show up automatically, and on load it retrieves the recent message history.

Understanding the basics of chat is essential to building more complex experiences. Basic Chat is IRC is a nutshell, and is the foundation for all chat experiences.

Developer

This demonstration is made from several nested components:

  • AppState

  • ActiveUserListPanel

    • ActiveUserList

      • ActiveUser

  • MessageListPanel

    • MessageList

      • Message

  • ComposeMessageBox

Each “panel” component is responsive so that it works across all device screen sizes and dimensions. Each “list” component is associated with a Channel on which the communication is centered, with a list item component for each item in each list (ActiveUser and Message). The React components use React Context (AppContext) to manage the interaction of PubNub API and the React Components by subscribing to the Channel being used, and receiving Presence Events (tracking the Active Users), and updating the interface with incoming data.

MessageList is associated with a Channel, and will pull recent message History from that channel upon initialization.

ActiveUserList is also associated with a Channel, and will monitor the users that join and are active in that channel.

ComposeMessageBox will publish messages to the Channel.

Easy to set up and try for yourself, simply visit Github, clone the repo, follow the instructions and you will have a chat room up and running in minutes.

Feedback & Support

Need help? Contact PubNub Support.

Talk to an expert

Contact Sales