Solution Engineer, PubNub
IN THIS ARTICLE

    Subscribe to Our Newsletter

    Stay updated with the latest on web, mobile, and IoT, delivered weekly.
    Thanks for subscribing!

    Thanks for subscribing!

    Get ready for some great content.

    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:

    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