Build a Chat Application in JavaScript in 10 Lines of Code

PubNub offers a powerful realtime 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 realtime.

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.

<!-- Chat in 10 lines of JavaScript code using PubNub JavaScript V4 SDK-->
<p> Enter Chat and press enter. </p>
	<input id = "input" placeholder = "Your Message Here" />
    <p> Chat Output:</p>
    <div id = "box" > </div>
    <script src = "https://cdn.pubnub.com/sdk/javascript/pubnub.4.28.0.js" > </script> 
    <script> (
        function()
        {
            // Your PubNub keys here
            // Get them from https://dashboard.pubnub.com
            var pubnub = new PubNub({
                publishKey: 'YOUR_PUB_KEY',
                subscribeKey: 'YOUR_SUB_KEY'
            });
            var box = document.getElementById("box");
            var input = document.getElementById("input");
            var channel = 'chat';
            
            // Subscribe to a channel
            pubnub.subscribe({
                channels: [channel]
            });
            
            // Listen to message events
            pubnub.addListener({
                message: function(m)
                {
                	// Add message to page
                    box.innerHTML = ('' + m.message).replace(/[<>]/g, '') + '<br>' + box.innerHTML;
                }
            });
            input.addEventListener('keypress', function(e){
            	// Publish new message when enter is pressed
                (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! Once you’re sending and receiving messages, you can use PubNub to build features into your chat like:

• Encrypted Messaging

• 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.