1.html

Enter Chat and press enter
<div><input id=input placeholder=you-chat-here /></div>

Chat Output
<div id=box></div>

<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.17.0.js"></script>

<script>(function(){
var pubnub = new PubNub({
    subscribeKey: "demo",
    publishKey: "demo",
    ssl: true
});        
        
var box = PUBNUB.$('box'), input = PUBNUB.$('input'), channel = 'chat';
pubnub.addListener({
    status: function(statusEvent) {       
    },
    message: function(message) {
        box.innerHTML = (''+text).replace( /[<>]/g, '' ) + '<br>' + box.innerHTML;
    },
    presence: function(presenceEvent) {
        // handle presence
    }
})   
        
pubnub.subscribe({
    channels: ['channel']
});        
        
PUBNUB.bind( 'keyup', input, function(e) {
    (e.keyCode || e.charCode) === 13 && pubnub.publish({
        channel : channel, message : input.value, x : (input.value='')
    })
} )
})()</script>

2.js

// Send a message
pubnub.publish(
    {
        message: {
            such: 'hello!'
        },
        channel: 'chat',
        sendByPost: false, // true to send via post
        storeInHistory: false, //override default storage options
        meta: {
            "cool": "meta"
        } // publish extra meta with the request
    },
    function (status, response) {
        // handle status, response
    }
);

3.js

pubnub.addListener({
    status: function(statusEvent) {       
    },
    message: function(message) {
        box.innerHTML = (''+text).replace( /[<>]/g, '' ) + '<br>' + box.innerHTML;
    },
    presence: function(presenceEvent) {
        // handle presence
    }
})   

pubnub.subscribe({
    channels: ['channel']
});