JSFiddle - React, Tailwind, and code Playground

by leggetter

HTML

<script src="https://rawgithub.com/polymer/cdn/master/polymer.min.js"></script>
<script src="https://d3dy5gmtp8yhk7.cloudfront.net/2.1/pusher.min.js"></script>

  <element name="simple-pusher-element" attributes="appkey channel event data">
    <template>
      <div id="el">No updates</div>
    </template>
    <script>
      Pusher.log = function( msg ) {
        console.log( msg );
      };
        
      var pusher; 
      var channel;
        
      Polymer.register(this, {
        appkey: "",
        channel: "test_channel",
        event: "my_event",
        data: "message",
        
        ready: function() {
            if( !this.appkey ) {
                throw new Error( 'appkey attribute must be set' );
            }
            pusher = new Pusher( this.appkey );
            channel = pusher.subscribe( this.channel );
            channel.bind( this.event, this.handleUpdate.bind( this ) );
        },
        
        handleUpdate: function( data ) {
            this.$.el.innerHTML = data[ this.data ];
        }
        
      });
    </script>
  </element>

<simple-pusher-element appkey="23ba7f92f3acb2cf179b" />