Real-time Chat Blog

Build a Chat Application in JavaScript in 10 Lines of Code

2 min readChandler Mayo on May 8, 2020
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

Learn the basics of building chat with this simple JavaScript developer tutorial.

PubNub Chat offers a powerful real-time network and APIs to send and receive data in any application. Take advantage of our services to easily 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 create a simple in-app chat with only 10 lines of code using the PubNub JavaScript SDK.

Try the Chat Demo

Enter Chat Message:

Chat Output:

Open the demo in multiple windows to simulate multiple users sending and receiving messages in real time.

How to Build Your Own Chat App

1. Start by copy and paste the code into your favorite text editor and save as a .html.

Enter Chat and press enter
<div><input id=input placeholder="message" /></div>

Chat Output
<div id=box></div>

<script src=https://cdn.pubnub.com/sdk/javascript/pubnub.4.28.2.min.js></script>
<script> (function() {
        var pubnub = new PubNub({
            publishKey: 'demo',
            subscribeKey: 'demo'
        });
        function $(id) {
            return document.getElementById(id);
        }
        var box = $('box'),
            input = $('input'),
            channel = '10chat-demo';
        pubnub.addListener({
            message: function(obj) {
                box.innerHTML = ('' + obj.message).replace(/[<>]/g, '') + '<br>' + box.innerHTML
            }
        });
        pubnub.subscribe({
            channels: [channel]
        });
        input.addEventListener('keyup', function(e) {
            if ((e.keyCode || e.charCode) === 13) {
                pubnub.publish({
                    channel: channel,
                    message: input.value,
                    x: (input.value = '')
                });
            }
        });
    })();
</script>

2. Create an account from the PubNub Dashboard and replace the publish and subscribe keys in the code above with keys from your account. You can create an account for free.

3. Open the .html file in a web browser. You have now successfully sent your first PubNub message!

More Chat Features

Once you’re sending and receiving messages, you can use PubNub Chat to build features into your chat like:

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 supports over 70 SDKs and has features like Functions and Push Notifications and that you can take advantage of in your product.

More from PubNub

Can Empathy Exist in the Metaverse
News May 16, 20221 min read

Can Empathy Exist in the Metaverse

A roundtable discussion led by PubNub’s COO, Casey Clegg, exploring the topics of what it means to be human in a virtual world.

PubNub Staff

PubNub Staff

How to Advance Telehealth and Virtual Care Technologies
News May 2, 20221 min read

How to Advance Telehealth and Virtual Care Technologies

Dr. Joe Kvedar, Chair of the Board for the American Telemedicine Association, joins our COO, Casey Clegg, to discuss why...

PubNub Staff

PubNub Staff

Another Step Towards Data Security: ISO-27001 Implementation
BuildMay 2, 20221 min read

Another Step Towards Data Security: ISO-27001 Implementation

Today, we are glad to announce that we are currently in the process of implementing ISO-27001 security standards.

PubNub Staff

PubNub Staff