JSFiddle - React, Tailwind, and code Playground

by yassinezerguine

HTML

<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.4.4.js"></script>
Enter Chat and press enter
<div><input id=input placeholder=you-chat-here /></div>

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

<script>(function(){
      var pubnub = new PubNub({ publishKey : 'demo', subscribeKey : 'demo' });
      function $(id) { return document.getElementById(id); }
      var box = $('box'), input = $('input'), channel = '10chat-demo';
      pubnub.addListener({
          message: function(obj) {
              box.innerHTML = (''+obj.message).replace( /[<>]/g, '' ) + '<br>' + box.innerHTML
          }});
      pubnub.subscribe({channels:[channel]});
      input.addEventListener('keyup', function(e) {
          if ((e.keyCode || e.charCode) === 13) {
            pubnub.publish({channel : channel,message : input.value,x : (input.value='')});
        }
      });
})();</script>

JavaScript

/*var pubnub = new PubNub({
    subscribeKey: 'sub-c-432706e2-f830-11e6-b0ac-0619f8945a4f', // always required
    publishKey: 'pub-c-07663a0e-b4a5-4bd1-af00-8ba97ee2b9a1' // only required if publishing
});*/