socket-io.html

<link rel="import" href="../polymer/polymer.html">
<!--
`socket-io`
Polymer 1.0 element for socket.io apis

@demo demo/index.html
-->

<dom-module id="socket-io">
  <template>
  </template>

  <script>
    Polymer({

      is: 'socket-io',

      properties: {
        endpoint: {
          type: String,
          value: 'http://localhost:8080'
        },
        isConnected: {
          type: Boolean,
          value: null
        }
      },
      ready: function(){
        console.log("Connection In Progress");
        var head = document.getElementsByTagName("head")[0] || document.documentElement;
        var script = document.createElement("script");
        script.src = this._getClientUrl(this.endpoint);

        // Handle Script loading
        var done = false;

        // Attach handlers for all browsers
        var _this = this;
        script.onload = script.onreadystatechange = function() {
          if ( !done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") ) {
            done = true;

            _this.scriptLoaded = true;
            console.log('Finished Loading Socket-IO Script');
            if (_this.awaitingConnect) {
              console.log("Connecting Socket");
              _this.connect();
            }
            // Handle memory leak in IE
            script.onload = script.onreadystatechange = null;
            if ( head && script.parentNode ) {
              head.removeChild( script );
            }
          }
        };

        // Use insertBefore instead of appendChild  to circumvent an IE6 bug.
        // This arises when a base node is used (#2709 and #4378).
        head.insertBefore( script, head.firstChild );
      },
      _getClientUrl: function (endpoint) {
        if (endpoint.slice(-1) === '/') {
          return endpoint + 'socket.io/socket.io.js';
        }
        return endpoint + '/socket.io/socket.io.js';
      },

      /**
       * The emit method sends an event with 'payload' as content
       *
       * @method emit
       * @param {String} event event to send
       * @param {Object} payload the json data to send
       */
      emit: function(event, data)
      {
        try
        {
          if(this.socket) this.socket.emit(event, data);
        }catch(error)
        {
          console.log("Failed to send message: "+error);
        }
      },
      /**
       * Update the message within state
       *
       * @method message
       */
      _updateMessage: function(message){
        if(typeof message !== "object"){
          this.outMessage = {message: message};
        } else{
          this.outMessage = message;
        }
      },
      /**
       * The connect method triggers connection to the socket.io server
       *
       * @method connect
       */
      connect: function()
      {
        var _this = this;
        console.log('Connection in progress');
        if (this.scriptLoaded) {
          this.disconnect();
          this.socket = io.connect(this.endpoint);
          this.isConnected = true;
          this.events.forEach(function(event){
            _this.socket.on(event.event, event.onEvent);
          });
          this.fire('connected');
        } else {
          console.log('Loading ClientSideScript');
          this.awaitingConnect = true;
        }
      },
      /**
       * The disconnect method triggers disconnection from the socket.io server
       *
       * @method disconnect
       */
      disconnect: function ()
      {
        if (this.socket != undefined && !this.isConnected)
        {
          try{
            this.socket.disconnect();
            this.isConnected = false;
          }
          catch(error){
            this.onError(error);
          }
        }
      },

    });
  </script>
</dom-module>