Build a Chat Application in JavaScript in 10 Lines of Code

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:

• Direct & Group Channels

• Message History

• Online/Offline Presence Indicators

• Unread Message Count

• Push Notifications

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.