x-websocket.html

<link rel="import" href="../polymer/polymer.html">
<!--
A Polymer/WebComponent wrapper of WebSocket client.

Example:

     <x-websocket url="ws://echo.websocket.org"></x-websocket>

@group Web Socket Component
@element x-websocket
@demo demo/index.html
-->
<dom-module id="x-websocket">
    <style>
       
    </style>
    <template>

    </template>
</dom-module>
<script type="text/javascript">
    (function() {
        XWebsocket = Polymer({

            is: 'x-websocket',

            properties: {
                url: {
                    type: String,
                    notify: true,
                    observer: 'urlChanged'
                },

                /**
                 * Automatically connect when the URL is changed ? Defaults to false.
                 * @property auto
                 * @public
                 * @type {Boolean}
                 * @default false
                 */
                auto: {
                    type: Boolean,
                    notify: true,
                    value: false
                },

                /**
                 * Should both sent and received data be interpreted as json and encoded/decoded ? Defaults to false.
                 * @public
                 * @type {Boolean}
                 */
                json: {
                    type: Boolean,
                    notify: true,
                    value: false
                },

                /**
                 * Should sent data be json-encoded, even if {{json}} is falsy ? Defaults to false.
                 * @public
                 * @type {Boolean}
                 */
                jsonSend: {
                    type: Boolean,
                    notify: true,
                    value: false
                },

                /**
                 * Should received data be json-decoded, even if {{json}} is falsy ? Defaults to false.
                 * @type {Boolean}
                 */
                jsonReceive: {
                    type: Boolean,
                    notify: true,
                    value: false
                }
            },

            /**
             * WebSocket object.
             * @private
             * @type {WebSocket}
             */
            _ws: null,
            /**
             * Send data through the WebSocket connection. Will optionally be json-encoded if {{json}} or {{jsonSend}} is truthy.
             * @public
             * @param  {*} data The data to send.
             */
            send: function(data) {
                if (!this._ws) {
                    throw new Error("x-websocket.send(...): not connected.");
                }
                if (this.json || this.jsonSend) {
                    data = JSON.stringify(data);
                }
                this._ws.send(data);
            },

            /**
             * Open the connection if previously closed, or if {{auto}} is false.
             * @public
             */
            open: function() {
                this._connect();
            },

            /**
             * Close the current connection. Optionally provide with a reason.
             * @public
             * @param {[String]} Optional closing reason to provide the server with.
             */
            close: function(reason) {
                if (this._ws) {
                    this._ws.close(reason);
                    this._ws = null;
                }
            },

            /**
             * Underlying connection readyState getter.
             * @see {@link http://www.w3.org/TR/websockets/#dom-websocket-readystate}
             * @public
             * @type {Number}
             */
            get readyState() {
                if (this._ws) {
                    return this._ws.readyState;
                } else {
                    return -1;
                }
            },

            /**
             * {{url}} change handler.
             * @private
             */
            urlChanged: function() {
                if (this.auto) {
                    this.open();
                }
            },

            /**
             * Create a connection to the remote server identified by {{url}}.
             * @private
             */
            _connect: function() {
                if (!this.url) {
                    throw new Error("x-websocket.connect(...): no url.");
                }
                if (this._ws) {
                    throw new Error("x-websocket.connect(...): already connected.");
                }
                this._ws = new WebSocket(this.url);
                this._ws.onopen = this._onwsopen.bind(this);
                this._ws.onerror = this._onwserror.bind(this);
                this._ws.onmessage = this._onwsmessage.bind(this);
                this._ws.onclose = this._onwsclose.bind(this);
            },
            /**
             * WebSocket open event handler. Re-fires to the x-websocket element.
             * @private
             * @method _onwsopen
             */
            _onwsopen: function() {
                this.fire("open");
            },
            /**
             * WebSocket error event handler. Re-fires to the x-websocket element.
             * @private
             * @method _onwserror
             */
            _onwserror: function() {
                this.fire("error");
            },
            /**
             * WebSocket message event handler. Re-fires to the x-websocket element, after optionally json-parsing the payload if {{json}} or {{jsonReceive}} is truthy.
             * @private
             * @method _onwsmessage
             * @param {Object} Event
             */
            _onwsmessage: function(event) {
                var data = event.data;
                if (this.json || this.jsonReceive) {
                    data = JSON.parse(data);
                }
                this.fire("message", {
                    data: data
                });
            },
            /**
             * WebSocket close event handler.
             * @private
             * @method releaseCustomerInQueueClickHandler
             * @param {Object} Event
             */
            _onwsclose: function(event) {
                this.fire("error", {
                    code: event.code,
                    reason: event.reason
                });
            },
        });
    })();
</script>