Chandler Mayo
Developer Relations Engineer, PubNub
IN THIS ARTICLE

    You can create a chat app in only 10 lines of code using PubNub’s JavaScript SDK.Chat Icon

    PubNub SDKs make it easy to send and receive data in any realtime application. You can rely on the PubNub Data Stream Network for your chat application and take advantage powerful chat APIs, enterprise-grade security, scalability, and reliability. PubNub eliminates the time you’d spend setting up and managing your infrastructure so you can focus on building your app.

    Try the Chat Demo

    Open this demo in multiple browsers to send and receive messages in realtime.

    Enter your chat message and press enter:

    Chat Output:


    How to Build Your Own Chat App

    Sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys from the PubNub Admin Dashboard. PubNub is always free, up to 1 million realtime transactions per month (more than enough for your prototyping needs!).

    Sign up using the form below:

    A basic chat app in JavaScript is only 10 lines of code:

    <!-- 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.23.0.min.js"></script>
    <script>(function(){
      var pubnub = new PubNub({publishKey : 'YOUR_PUBLISH_KEY_HERE', subscribeKey : 'YOUR_SUBSCRIBE_KEY_HERE'}); // Your PubNub keys here. Get them from https://dashboard.pubnub.com.
      var box = document.getElementById("box"), input = document.getElementById("input"), channel = 'chat';
      pubnub.subscribe({channels: [channel]}); // Subscribe to a channel.
      pubnub.addListener({message: function(m) {
           box.innerHTML = (''+m.message).replace( /[<>]/g, '' ) + '<br>' + box.innerHTML; // Add message to page.
        }});
      input.addEventListener('keypress', function (e) {
          (e.keyCode || e.charCode) === 13 && pubnub.publish({ // Publish new message when enter is pressed. 
              channel : channel, message : input.value, x : (input.value='')
          });
      });
    })();</script>

    Replace “YOUR_PUBLISH_KEY_HERE” and “YOUR_SUBSCRIBE_KEY_HERE” with your keys from the PubNub Admin Dashboard.

    A single function call is needed to send or receive data using PubNub. Use a publish() call to send data:

    pubnub.publish({ channel : "chat", message : "Hello World!" });

    Receive data for a channel with a subscribe() call:

    pubnub.subscribe({channels: [channel]});
    pubnub.addListener({message: function(msg) { console.log(msg.message); }});
    

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

    Why Use PubNub for Building Realtime Chat

    PubNub maintains synchronized global Points of Presence that can deliver messages to every device in under 0.25 seconds. PubNub supports over 70 SDKs and has features like push notifications and Functions that you can take advantage of in your product.

    With PubNub you can build chat for applications like:

    Chat APIs for Healthcare

    Healthcare

    HIPAA-compliant chat for doctors, patients and administrators.

    How to build a chat platform for Support

    Customer Support

    Agent-based, scalable support and customer service chat.

    How to build a chat platform for Productivity

    Chatbots / Productivity

    Chatbots and automated responders

    What Else Can I Do With PubNub?

    Some other applications for PubNub include:

    Have suggestions or questions about the content of this post? Reach out at devrel@pubnub.com.

    Try PubNub today!

    Build realtime applications that perform reliably and securely, at global scale.
    Try Our APIs
    Try PubNub today!
    More From PubNub

    Footer Html for Blog Page