Realtime Live Chat Application in JavaScript in Only 10 Lines of Code

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!).

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: