Build a Chat Application in JavaScript in 10 Lines of Code
PubNub Chat offers a robust real-time network and APIs to send and receive data in any application. Take advantage of our services to quickly build chat with enterprise-grade security, scalability, and reliability. PubNub eliminates the time it takes to set up and manage your infrastructure so you can focus on solving business problems for your customers.
Follow this tutorial to learn how to create a live chat app with only ten lines of code using the PubNub JavaScript SDK.
Try the Chat Demo
There are two methods available for you to try out this demo:
Our interactive 10-chat demo will take you through this mini-chat application step-by-step. This demo is the same code you can copy below with an interactive walkthrough.
Clone the GitHub repository to see how the application works behind the scenes and build your own features.
Open the demo in two tabs to chat between windows!
How to Build Your Own Real-Time Chat App
To start your real-time chat app, you'll need to obtain the API keys necessary to connect ot the PubNub platform: the publish and subscribe keys. You can get your own set of free API keys by following these steps:
Log in to the Admin Portal.
Click on the Apps tab on the left-hand side.
Click on the “Create New App” button to create a new application. Give the application a name and click the “Create” button.
Click on your newly created app. You will be brought to the keysets page for this application. Note that each application created automatically generates a new keyset for you, but you will be creating a new keyset to enable specific features.
Click the “Create New Keyset” button on the upper right side of the portal.
A pop-up appears. Give the keyset a name and click the “Create” button.
Click on the newly created keyset.
Copy the Publish and Subscribe Keys by clicking on the copy icons next to each key field.
Once you've obtained the API keys, create the file index.html and save it. In index.html, integrate the PubNub SDK into your project using a content delivery network.
Then, configure PubNub by adding the following code to the file for your application.
Be sure to replace PUBNUB_PUBLISH_KEY and PUBNUB_SUBSCRIBE_KEY with the respective publish and subscribe keys you obtained from the PubNub Admin Portal.
You can complete your chat application by adding the message input fields, sending chat buttons, and custom CSS to style these elements. Check out the Simple Chat GitHub for more info and the complete source code.
What Tools Can Help Me Build Chat?
PubNub offers many SDKs, including a dedicated Chat SDK tailored specifically to the chat use case by offering easy-to-user methods that let you do exactly what you want.
These SDKs make it simple to add chat to your applications. You can focus on creating the best client-side user experience while PubNub takes care of the application's server side.
Create 1:1 private chat rooms, group chats, or even mega chats for large-scale events. Here are a few examples:
Virtual Events: Streaming chat in live events
Telemedicine: Private chat between doctors and patients
Gaming: Live chat for online game players
Support: Chat between agents and customers
Marketplaces: Chat between buyers and sellers
Collaboration: Chat for team communication at the workplace
Advanced Chat Features
Once you’re sending and receiving messages, you can use PubNub Chat to build features into your chat like these:
Typing Indicators: Indicate if users are typing messages in a channel.
Read Receipts: Enable users to track the delivery of messages in a channel.
Sending and Receiving Files: Upload and share files with other users in the application
Message Persistence: Store and retrieve messages as they get sent over the network.
Online/Offline Presence Indicators: Track the online and offline status of users and devices in real time and store custom state information
Unread Message Count: Obtain the count of messages in channels that were published after a specific timestamp.
What Else Can I Do With PubNub?
PubNub maintains 15+ synchronized global points of presence that can deliver messages to any device in under 100 milliseconds. PubNub has features like Functions and Mobile Push Notifications that you can take advantage of in your product.
Using PubNub SDKs, developers can quickly build chat and other real-time features without sacrificing a significant amount of time learning, creating, and managing the mechanics behind sending chat messages or other data in real time. All of the scaling and infrastructure are handled for you. With PubNub, you can focus on the front end of your game without worrying about the infrastructure behind it.
Check out some more chat resources to get you started today:
How to guides in implementing specific use cases for your chat application.
Develop an in-app chat application using the PubNub JavaScript SDK.
Learn how to set up and use PubNub's Chat SDK to build a flexible chat application.
Have any questions or concerns? Feel free to reach out to our team
