sc-sse.html

<link rel="import" href="../polymer/polymer.html">


<!--
sc-sse is webcomponent to Server Side Events of HTML5.

##### Example

    <sc-sse stream="/stream/" channel="message" alias="updates"></sc-sse>

@element sc-sse
@blurb Element providing an interface to consume updates by Server Side Events
@status beta
@homepage http://github.com/siscomando/sc-sse
-->
<polymer-element name="sc-sse" hidden attributes="notitle author stream channel alias">
  <script>
    Polymer('sc-sse', { 
       /**
       * Fired when a reply is returned by Server Side Event.
       *
       *
       * @event sc-sse-response
       */        
      /**
       * The `author` attribute sets an initial author
       *
       * @attribute author
       * @type String
       * @default 'Horacio Ibrahim'
       */ 
      author: 'Horacio Ibrahim', 
      /**
       * The `alias` is name for recognize one of multiple sc-sse element fired.
       *
       * @attribute alias
       * @type String
       * @default default
       */       
      /**
       * The `stream` attribute sets an url to get updates
       *
       * @attribute stream
       * @type String
       * @default ''
       */                   
      publish: {
        stream: '',
        channel: 'message',
        alias: 'default'
      },
      ready: function() {
        var stream = this.stream;
        var callback = this.fire; //this.fire;
        var channel = this.channel;
        var el = this;

        try {
          var source = new EventSource(stream);  
          this.makeRead(source, channel, callback, el);
        } catch (x) {
          console.warn('sc-sse caught an exception trying create new EventSource.');
          console.warn(x);
        }
      },
      /**
       * The `makeRead` make connection with Server Side Event stream.
       *
       * 
       * @method makeRead
       * @param source an instance of EventSource
       * @param channel a type of event 
       * @param callback a callback for to work with polymer objects
       * @param onNode this current polymer element
       */       
      makeRead: function(source, channel, callback, onNode) {
        source.addEventListener(channel, function(e) {
          callback('sc-sse-response', {response: e.data, alias: onNode.alias}, onNode);
        });
      },
    });
  </script>

</polymer-element>