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 app with enterprise-grade security, scalability, and reliability. PubNub eliminates the time it takes to set up and manage your software 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 JS code using the PubNub JavaScript SDK, without worrying about the low level details.
Build Chat application in 10 Lines of Code
There are two methods available for you to try out this software demo:
Our interactive 10-chat demo will take you through this mini-chat room 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 communication application works behind the scenes and build your own chatting features.
Open the demo in two tabs to chat between windows!
How to Build Your Own HTML Real-Time Chat App in 10 Lines of Code
To start your real-time messaging 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 app 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 (CDN).
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 app 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.
Demo: Chat in More than 10 Lines of Code
OK, the title of this blog is a bit gimmicky... clearly you would not release a chat application that has just 10 lines of source code.
PubNub offers many SDKs, including a dedicated Chat SDK tailored specifically to the chat rooms by offering easy-to-use methods that let you build exactly what you need, with features including:
Group channel creation including 1:1 conversations and threads
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 media files with other users in the app
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
To learn more, we have a dedicated Chat SDK Demo app with source code.
We also have a dedicated Chat SDK tutorial that will get you up and running with the basics and explore more advanced features of the software development kit.
What Tools Can Help Me Build Chat?
PubNub SDKs make it simple to add chat plugin to your applications. You can focus on creating the best client-side user experience while PubNub takes care of the application's backend (server side).
Here are a few example use cases:
Virtual Events: streaming chat in live events
Telemedicine: private messaging between doctors and patients
Gaming: live chat for online game players
Support: chat between agents and customers
Marketplaces: Communication between buyers and sellers
Collaboration: team communication at the workplace
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 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 walking through specific use cases
The Chat SDK tutorial will walk you through the basic and more advanced features of our SDK.
See our full range of Chat Demos.
Have any questions or concerns? Feel free to reach out to our team at devrel@pubnub.com
