├── .babelrc ├── .eslintrc.json ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── dist ├── vue-websocket.js └── vue-websocket.js.map ├── package-lock.json ├── package.json ├── src └── index.js ├── webpack.build.config.js └── webpack.dev.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"], 3 | "comments": false 4 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "env": { 4 | "browser": true, 5 | "commonjs": true, 6 | "es6": true, 7 | "jquery": false, 8 | "mocha": true 9 | }, 10 | "extends": "eslint:recommended", 11 | "parserOptions": { 12 | "sourceType": "module" 13 | }, 14 | "plugins": ["html"], 15 | "rules": { 16 | "indent": ["warn", "tab"], 17 | "quotes": ["warn", "double"], 18 | "semi": ["error", "always"], 19 | "no-var": ["error"], 20 | "no-console": ["off"], 21 | "no-unused-vars": ["warn"] 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | coverage/ 4 | docs/_book/ 5 | npm-debug.log 6 | selenium-debug.log 7 | test/unit/coverage 8 | test/e2e/reports 9 | stats.json 10 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | build 2 | docs 3 | bower.json 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | cache: 3 | directories: 4 | - node_modules 5 | node_js: 6 | - "6" 7 | - "5" 8 | - "4" 9 | after_success: 10 | - npm run coverall 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Icebob 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-websocket [![NPM version](https://img.shields.io/npm/v/vue-websocket.svg)](https://www.npmjs.com/package/vue-websocket) 2 | ![VueJS v1.x compatible](https://img.shields.io/badge/vue%201.x-compatible-green.svg) 3 | ![VueJS v2.x compatible](https://img.shields.io/badge/vue%202.x-compatible-green.svg) 4 | 5 | A [socket.io](https://socket.io) plugin for Vue.js. 6 | 7 | > **This package does not support native websockets**. At the time, we recommend using [vue-native-websocket](https://github.com/nathantsoi/vue-native-websocket) or [implementing it yourself](https://alligator.io/vuejs/vue-socketio/). For ongoing discussion on this, please visit [#2](https://github.com/icebob/vue-websocket/issues/2). 8 | 9 | ## Installation 10 | You can either install this package with `npm`, or manually by downloading the primary plugin file. 11 | 12 | ### npm 13 | 14 | ```bash 15 | $ npm install -S vue-websocket 16 | ``` 17 | 18 | ### Manual 19 | Download the production [`vue-websocket.js`](https://raw.githubusercontent.com/icebob/vue-websocket/master/dist/vue-websocket.js) file. This link is a mirror of the same file found in the `dist` directory of this project. 20 | 21 | ## Usage 22 | Register the plugin. By default, it will connect to `/`: 23 | 24 | ```js 25 | import VueWebsocket from "vue-websocket"; 26 | Vue.use(VueWebsocket); 27 | ``` 28 | 29 | Or to connect to another address: 30 | 31 | ```js 32 | Vue.use(VueWebsocket, "ws://otherserver:8080"); 33 | ``` 34 | 35 | You can also pass options: 36 | 37 | ```js 38 | Vue.use(VueWebsocket, "ws://otherserver:8080", { 39 | reconnection: false 40 | }); 41 | ``` 42 | 43 | To use it in your components: 44 | 45 | ```html 46 | 97 | ``` 98 | 99 | ## Develop 100 | 101 | ### Building 102 | This command will build a distributable version in the `dist` directory: 103 | 104 | ```bash 105 | $ npm run build 106 | ``` 107 | 108 | ## Testing 109 | This package uses [`karma`](https://www.npmjs.com/package/karma) for testing. You can run the tests like so: 110 | 111 | ```bash 112 | $ npm test 113 | ``` 114 | 115 | ## Contribution 116 | Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important. 117 | 118 | ## License 119 | `vue-websocket` is available under the [MIT license](https://tldrlegal.com/license/mit-license). 120 | 121 | ## Contact 122 | 123 | Copyright © 2018 Icebob 124 | 125 | [![@icebob](https://img.shields.io/badge/github-icebob-green.svg)](https://github.com/icebob) [![@icebob](https://img.shields.io/badge/twitter-Icebobcsi-blue.svg)](https://twitter.com/Icebobcsi) 126 | -------------------------------------------------------------------------------- /dist/vue-websocket.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-websocket v0.2.3 3 | * https://github.com/icebob/vue-websocket 4 | * Released under the MIT License. 5 | */ 6 | 7 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueWebsocket=e():t.VueWebsocket=e()}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}(function(t){for(var e in t)if(Object.prototype.hasOwnProperty.call(t,e))switch(typeof t[e]){case"function":break;case"object":t[e]=function(e){var n=e.slice(1),r=t[e[0]];return function(t,e,o){r.apply(this,[t,e,o].concat(n))}}(t[e]);break;default:t[e]=t[t[e]]}return t}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function o(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}Object.defineProperty(e,"__esModule",{value:!0});var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},s=n(1),a=r(s);e["default"]={install:function(t,e,n){var r,s=void 0;s=null!=e&&"object"===("undefined"==typeof e?"undefined":i(e))?e:(0,a["default"])(e||"",n),t.prototype.$socket=s;var c=function(){var t=this;if(this.$options.socket){var e=this.$options.socket;if(e.namespace&&(this.$socket=(0,a["default"])(e.namespace,e.options)),e.events){var n=e.prefix||"";Object.keys(e.events).forEach(function(r){var o=e.events[r].bind(t);t.$socket.on(n+r,o),e.events[r].__binded=o})}}},u=function(){var t=this;if(this.$options.socket){var e=this.$options.socket;if(e.namespace&&this.$socket.disconnect(),e.events){var n=e.prefix||"";Object.keys(e.events).forEach(function(r){t.$socket.off(n+r,e.events[r].__binded)})}}};t.mixin((r={},o(r,0===t.version.indexOf("2")?"beforeCreate":"beforeCompile",c),o(r,"beforeDestroy",u),r))}}},function(t,e,n){function r(t,e){"object"==typeof t&&(e=t,t=void 0),e=e||{};var n,r=i(t),s=r.source,p=r.id,h=r.path,f=u[p]&&h in u[p].nsps,l=e.forceNew||e["force new connection"]||!1===e.multiplex||f;return l?(c("ignoring socket cache for %s",s),n=a(s,e)):(u[p]||(c("new io instance for %s",s),u[p]=a(s,e)),n=u[p]),r.query&&!e.query?e.query=r.query:e&&"object"==typeof e.query&&(e.query=o(e.query)),n.socket(r.path,e)}function o(t){var e=[];for(var n in t)t.hasOwnProperty(n)&&e.push(encodeURIComponent(n)+"="+encodeURIComponent(t[n]));return e.join("&")}var i=n(2),s=n(7),a=n(15),c=n(4)("socket.io-client");t.exports=e=r;var u=e.managers={};e.protocol=s.protocol,e.connect=r,e.Manager=n(15),e.Socket=n(42)},function(t,e,n){(function(e){function r(t,n){var r=t;n=n||e.location,null==t&&(t=n.protocol+"//"+n.host),"string"==typeof t&&("/"===t.charAt(0)&&(t="/"===t.charAt(1)?n.protocol+t:n.host+t),/^(https?|wss?):\/\//.test(t)||(i("protocol-less url %s",t),t="undefined"!=typeof n?n.protocol+"//"+t:"https://"+t),i("parse %s",t),r=o(t)),r.port||(/^(http|ws)$/.test(r.protocol)?r.port="80":/^(http|ws)s$/.test(r.protocol)&&(r.port="443")),r.path=r.path||"/";var s=r.host.indexOf(":")!==-1,a=s?"["+r.host+"]":r.host;return r.id=r.protocol+"://"+a+":"+r.port,r.href=r.protocol+"://"+a+(n&&n.port===r.port?"":":"+r.port),r}var o=n(3),i=n(4)("socket.io-client:url");t.exports=r}).call(e,function(){return this}())},function(t,e){var n=/^(?:(?![^:@]+:[^:@\/]*@)(http|https|ws|wss):\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?((?:[a-f0-9]{0,4}:){2,7}[a-f0-9]{0,4}|[^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/,r=["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"];t.exports=function(t){var e=t,o=t.indexOf("["),i=t.indexOf("]");o!=-1&&i!=-1&&(t=t.substring(0,o)+t.substring(o,i).replace(/:/g,";")+t.substring(i,t.length));for(var s=n.exec(t||""),a={},c=14;c--;)a[r[c]]=s[c]||"";return o!=-1&&i!=-1&&(a.source=e,a.host=a.host.substring(1,a.host.length-1).replace(/;/g,":"),a.authority=a.authority.replace("[","").replace("]","").replace(/;/g,":"),a.ipv6uri=!0),a}},function(t,e,n){function r(){return"WebkitAppearance"in document.documentElement.style||window.console&&(console.firebug||console.exception&&console.table)||navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&parseInt(RegExp.$1,10)>=31}function o(){var t=arguments,n=this.useColors;if(t[0]=(n?"%c":"")+this.namespace+(n?" %c":" ")+t[0]+(n?"%c ":" ")+"+"+e.humanize(this.diff),!n)return t;var r="color: "+this.color;t=[t[0],r,"color: inherit"].concat(Array.prototype.slice.call(t,1));var o=0,i=0;return t[0].replace(/%[a-z%]/g,function(t){"%%"!==t&&(o++,"%c"===t&&(i=o))}),t.splice(i,0,r),t}function i(){return"object"==typeof console&&console.log&&Function.prototype.apply.call(console.log,console,arguments)}function s(t){try{null==t?e.storage.removeItem("debug"):e.storage.debug=t}catch(n){}}function a(){var t;try{t=e.storage.debug}catch(n){}return t}function c(){try{return window.localStorage}catch(t){}}e=t.exports=n(5),e.log=i,e.formatArgs=o,e.save=s,e.load=a,e.useColors=r,e.storage="undefined"!=typeof chrome&&"undefined"!=typeof chrome.storage?chrome.storage.local:c(),e.colors=["lightseagreen","forestgreen","goldenrod","dodgerblue","darkorchid","crimson"],e.formatters.j=function(t){return JSON.stringify(t)},e.enable(a())},function(t,e,n){function r(){return e.colors[p++%e.colors.length]}function o(t){function n(){}function o(){var t=o,n=+new Date,i=n-(u||n);t.diff=i,t.prev=u,t.curr=n,u=n,null==t.useColors&&(t.useColors=e.useColors()),null==t.color&&t.useColors&&(t.color=r());var s=Array.prototype.slice.call(arguments);s[0]=e.coerce(s[0]),"string"!=typeof s[0]&&(s=["%o"].concat(s));var a=0;s[0]=s[0].replace(/%([a-z%])/g,function(n,r){if("%%"===n)return n;a++;var o=e.formatters[r];if("function"==typeof o){var i=s[a];n=o.call(t,i),s.splice(a,1),a--}return n}),"function"==typeof e.formatArgs&&(s=e.formatArgs.apply(t,s));var c=o.log||e.log||console.log.bind(console);c.apply(t,s)}n.enabled=!1,o.enabled=!0;var i=e.enabled(t)?o:n;return i.namespace=t,i}function i(t){e.save(t);for(var n=(t||"").split(/[\s,]+/),r=n.length,o=0;o1e4)){var e=/^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(t);if(e){var n=parseFloat(e[1]),r=(e[2]||"ms").toLowerCase();switch(r){case"years":case"year":case"yrs":case"yr":case"y":return n*p;case"days":case"day":case"d":return n*u;case"hours":case"hour":case"hrs":case"hr":case"h":return n*c;case"minutes":case"minute":case"mins":case"min":case"m":return n*a;case"seconds":case"second":case"secs":case"sec":case"s":return n*s;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return n}}}}function r(t){return t>=u?Math.round(t/u)+"d":t>=c?Math.round(t/c)+"h":t>=a?Math.round(t/a)+"m":t>=s?Math.round(t/s)+"s":t+"ms"}function o(t){return i(t,u,"day")||i(t,c,"hour")||i(t,a,"minute")||i(t,s,"second")||t+" ms"}function i(t,e,n){if(!(t1)))/4)-E((t-1901+e)/100)+E((t-1601+e)/400)};if((d=m.hasOwnProperty)||(d=function(t){var e,n={};return(n.__proto__=null,n.__proto__={toString:1},n).toString!=v?d=function(t){var e=this.__proto__,n=t in(this.__proto__=null,this);return this.__proto__=e,n}:(e=n.constructor,d=function(t){var n=(this.constructor||e).prototype;return t in this&&!(t in n&&this[t]===n[t])}),n=null,d.call(this,t)}),y=function(t,e){var n,r,o,i=0;(n=function(){this.valueOf=0}).prototype.valueOf=0,r=new n;for(o in r)d.call(r,o)&&i++;return n=r=null,i?y=2==i?function(t,e){var n,r={},o=v.call(t)==w;for(n in t)o&&"prototype"==n||d.call(r,n)||!(r[n]=1)||!d.call(t,n)||e(n)}:function(t,e){var n,r,o=v.call(t)==w;for(n in t)o&&"prototype"==n||!d.call(t,n)||(r="constructor"===n)||e(n);(r||d.call(t,n="constructor"))&&e(n)}:(r=["valueOf","toString","toLocaleString","propertyIsEnumerable","isPrototypeOf","hasOwnProperty","constructor"],y=function(t,e){var n,o,i=v.call(t)==w,s=!i&&"function"!=typeof t.constructor&&a[typeof t.hasOwnProperty]&&t.hasOwnProperty||d;for(n in t)i&&"prototype"==n||!s.call(t,n)||e(n);for(o=r.length;n=r[--o];s.call(t,n)&&e(n));}),y(t,e)},!n("json-stringify")){var O={92:"\\\\",34:'\\"',8:"\\b",12:"\\f",10:"\\n",13:"\\r",9:"\\t"},P="000000",N=function(t,e){return(P+(e||0)).slice(-t)},R="\\u00",D=function(t){for(var e='"',n=0,r=t.length,o=!_||r>10,i=o&&(_?t.split(""):t);n-1/0&&a<1/0){if(T){for(f=E(a/864e5),u=E(f/365.2425)+1970-1;T(u+1,0)<=f;u++);for(p=E((f-T(u,0))/30.42);T(u,p+1)<=f;p++);f=1+f-T(u,p),l=(a%864e5+864e5)%864e5,m=E(l/36e5)%24,b=E(l/6e4)%60,k=E(l/1e3)%60,w=l%1e3}else u=a.getUTCFullYear(),p=a.getUTCMonth(),f=a.getUTCDate(),m=a.getUTCHours(),b=a.getUTCMinutes(),k=a.getUTCSeconds(),w=a.getUTCMilliseconds();a=(u<=0||u>=1e4?(u<0?"-":"+")+N(6,u<0?-u:u):N(4,u))+"-"+N(2,p+1)+"-"+N(2,f)+"T"+N(2,m)+":"+N(2,b)+":"+N(2,k)+"."+N(3,w)+"Z"}else a=null;if(n&&(a=n.call(e,t,a)),null===a)return"null";if(c=v.call(a),c==S)return""+a;if(c==A)return a>-1/0&&a<1/0?""+a:"null";if(c==B)return D(""+a);if("object"==typeof a){for(P=s.length;P--;)if(s[P]===a)throw h();if(s.push(a),_=[],R=i,i+=o,c==C){for(O=0,P=a.length;O0)for(r="",n>10&&(n=10);r.length=48&&o<=57||o>=97&&o<=102||o>=65&&o<=70||H();t+=I("0x"+i.slice(e,q));break;default:H()}else{if(34==o)break;for(o=i.charCodeAt(q),e=q;o>=32&&92!=o&&34!=o;)o=i.charCodeAt(++q);t+=i.slice(e,q)}if(34==i.charCodeAt(q))return q++,t;H();default:if(e=q,45==o&&(r=!0,o=i.charCodeAt(++q)),o>=48&&o<=57){for(48==o&&(o=i.charCodeAt(q+1),o>=48&&o<=57)&&H(),r=!1;q=48&&o<=57);q++);if(46==i.charCodeAt(q)){for(n=++q;n=48&&o<=57);n++);n==q&&H(),q=n}if(o=i.charCodeAt(q),101==o||69==o){for(o=i.charCodeAt(++q),43!=o&&45!=o||q++,n=q;n=48&&o<=57);n++);n==q&&H(),q=n}return+i.slice(e,q)}if(r&&H(),"true"==i.slice(q,q+4))return q+=4,!0;if("false"==i.slice(q,q+5))return q+=5,!1;if("null"==i.slice(q,q+4))return q+=4,null;H()}return"$"},J=function(t){var e,n;if("$"==t&&H(),"string"==typeof t){if("@"==(_?t.charAt(0):t[0]))return t.slice(1);if("["==t){for(e=[];t=z(),"]"!=t;n||(n=!0))n&&(","==t?(t=z(),"]"==t&&H()):H()),","==t&&H(),e.push(J(t));return e}if("{"==t){for(e={};t=z(),"}"!=t;n||(n=!0))n&&(","==t?(t=z(),"}"==t&&H()):H()),","!=t&&"string"==typeof t&&"@"==(_?t.charAt(0):t[0])&&":"==z()||H(),e[t.slice(1)]=J(z());return e}H()}return t},X=function(t,e,n){var r=$(t,e,n);r===g?delete t[e]:t[e]=r},$=function(t,e,n){var r,o=t[e];if("object"==typeof o&&o)if(v.call(o)==C)for(r=o.length;r--;)X(o,r,n);else y(o,function(t){X(o,t,n)});return n.call(t,e,o)};e.parse=function(t,e){var n,r;return q=0,M=""+t,n=J(z()),"$"!=z()&&H(),q=M=null,e&&v.call(e)==w?$((r={},r[""]=n,r),"",e):n}}}return e.runInContext=i,e}var s=n(10),a={"function":!0,object:!0},c=a[typeof e]&&e&&!e.nodeType&&e,u=a[typeof window]&&window||this,p=c&&a[typeof t]&&t&&!t.nodeType&&"object"==typeof o&&o;if(!p||p.global!==p&&p.window!==p&&p.self!==p||(u=p),c&&!s)i(u,c);else{var h=u.JSON,f=u.JSON3,l=!1,d=i(u,u.JSON3={noConflict:function(){return l||(l=!0,u.JSON=h,u.JSON3=f,h=f=null),d}});u.JSON={parse:d.parse,stringify:d.stringify}}s&&(r=function(){return d}.call(e,n,e,t),!(void 0!==r&&(t.exports=r)))}).call(this)}).call(e,n(9)(t),function(){return this}())},function(t,e){t.exports=function(t){return t.webpackPolyfill||(t.deprecate=function(){},t.paths=[],t.children=[],t.webpackPolyfill=1),t}},function(t,e){(function(e){t.exports=e}).call(e,{})},function(t,e){function n(t){if(t)return r(t)}function r(t){for(var e in n.prototype)t[e]=n.prototype[e];return t}t.exports=n,n.prototype.on=n.prototype.addEventListener=function(t,e){return this._callbacks=this._callbacks||{},(this._callbacks[t]=this._callbacks[t]||[]).push(e),this},n.prototype.once=function(t,e){function n(){r.off(t,n),e.apply(this,arguments)}var r=this;return this._callbacks=this._callbacks||{},n.fn=e,this.on(t,n),this},n.prototype.off=n.prototype.removeListener=n.prototype.removeAllListeners=n.prototype.removeEventListener=function(t,e){if(this._callbacks=this._callbacks||{},0==arguments.length)return this._callbacks={},this;var n=this._callbacks[t];if(!n)return this;if(1==arguments.length)return delete this._callbacks[t],this;for(var r,o=0;o0&&!this.encoding){var t=this.packetBuffer.shift();this.packet(t)}},r.prototype.cleanup=function(){p("cleanup");for(var t=this.subs.length,e=0;e=this._reconnectionAttempts)p("reconnect failed"),this.backoff.reset(),this.emitAll("reconnect_failed"),this.reconnecting=!1;else{var e=this.backoff.duration();p("will wait %dms before reconnect attempt",e),this.reconnecting=!0;var n=setTimeout(function(){t.skipReconnect||(p("attempting reconnect"),t.emitAll("reconnect_attempt",t.backoff.attempts),t.emitAll("reconnecting",t.backoff.attempts),t.skipReconnect||t.open(function(e){e?(p("reconnect attempt error"),t.reconnecting=!1,t.reconnect(),t.emitAll("reconnect_error",e.data)):(p("reconnect success"),t.onreconnect())}))},e);this.subs.push({destroy:function(){clearTimeout(n)}})}},r.prototype.onreconnect=function(){var t=this.backoff.attempts;this.reconnecting=!1,this.backoff.reset(),this.updateSocketIds(),this.emitAll("reconnect",t)}},function(t,e,n){t.exports=n(17)},function(t,e,n){t.exports=n(18),t.exports.parser=n(25)},function(t,e,n){(function(e){function r(t,n){if(!(this instanceof r))return new r(t,n);n=n||{},t&&"object"==typeof t&&(n=t,t=null),t?(t=p(t),n.hostname=t.host,n.secure="https"===t.protocol||"wss"===t.protocol,n.port=t.port,t.query&&(n.query=t.query)):n.host&&(n.hostname=p(n.host).host),this.secure=null!=n.secure?n.secure:e.location&&"https:"===location.protocol,n.hostname&&!n.port&&(n.port=this.secure?"443":"80"),this.agent=n.agent||!1,this.hostname=n.hostname||(e.location?location.hostname:"localhost"),this.port=n.port||(e.location&&location.port?location.port:this.secure?443:80),this.query=n.query||{},"string"==typeof this.query&&(this.query=f.decode(this.query)),this.upgrade=!1!==n.upgrade,this.path=(n.path||"/engine.io").replace(/\/$/,"")+"/",this.forceJSONP=!!n.forceJSONP,this.jsonp=!1!==n.jsonp,this.forceBase64=!!n.forceBase64,this.enablesXDR=!!n.enablesXDR,this.timestampParam=n.timestampParam||"t",this.timestampRequests=n.timestampRequests,this.transports=n.transports||["polling","websocket"],this.readyState="",this.writeBuffer=[],this.prevBufferLen=0,this.policyPort=n.policyPort||843,this.rememberUpgrade=n.rememberUpgrade||!1,this.binaryType=null,this.onlyBinaryUpgrades=n.onlyBinaryUpgrades,this.perMessageDeflate=!1!==n.perMessageDeflate&&(n.perMessageDeflate||{}),!0===this.perMessageDeflate&&(this.perMessageDeflate={}),this.perMessageDeflate&&null==this.perMessageDeflate.threshold&&(this.perMessageDeflate.threshold=1024),this.pfx=n.pfx||null,this.key=n.key||null,this.passphrase=n.passphrase||null,this.cert=n.cert||null,this.ca=n.ca||null,this.ciphers=n.ciphers||null,this.rejectUnauthorized=void 0===n.rejectUnauthorized?null:n.rejectUnauthorized;var o="object"==typeof e&&e;o.global===o&&n.extraHeaders&&Object.keys(n.extraHeaders).length>0&&(this.extraHeaders=n.extraHeaders),this.id=null,this.upgrades=null,this.pingInterval=null,this.pingTimeout=null,this.pingIntervalTimer=null,this.pingTimeoutTimer=null,this.open()}function o(t){var e={};for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e}var i=n(19),s=n(33),a=n(4)("engine.io-client:socket"),c=n(40),u=n(25),p=n(3),h=n(41),f=n(34);t.exports=r,r.priorWebsocketSuccess=!1,s(r.prototype),r.protocol=u.protocol,r.Socket=r,r.Transport=n(24),r.transports=n(19),r.parser=n(25),r.prototype.createTransport=function(t){a('creating transport "%s"',t);var e=o(this.query);e.EIO=u.protocol,e.transport=t,this.id&&(e.sid=this.id);var n=new i[t]({agent:this.agent,hostname:this.hostname,port:this.port,secure:this.secure,path:this.path,query:e,forceJSONP:this.forceJSONP,jsonp:this.jsonp,forceBase64:this.forceBase64,enablesXDR:this.enablesXDR,timestampRequests:this.timestampRequests,timestampParam:this.timestampParam,policyPort:this.policyPort,socket:this,pfx:this.pfx,key:this.key,passphrase:this.passphrase,cert:this.cert,ca:this.ca,ciphers:this.ciphers,rejectUnauthorized:this.rejectUnauthorized,perMessageDeflate:this.perMessageDeflate,extraHeaders:this.extraHeaders});return n},r.prototype.open=function(){var t;if(this.rememberUpgrade&&r.priorWebsocketSuccess&&this.transports.indexOf("websocket")!==-1)t="websocket";else{if(0===this.transports.length){var e=this;return void setTimeout(function(){e.emit("error","No transports available")},0)}t=this.transports[0]}this.readyState="opening";try{t=this.createTransport(t)}catch(n){return this.transports.shift(),void this.open()}t.open(),this.setTransport(t)},r.prototype.setTransport=function(t){a("setting transport %s",t.name);var e=this;this.transport&&(a("clearing existing transport %s",this.transport.name),this.transport.removeAllListeners()),this.transport=t,t.on("drain",function(){e.onDrain()}).on("packet",function(t){e.onPacket(t)}).on("error",function(t){e.onError(t)}).on("close",function(){e.onClose("transport close")})},r.prototype.probe=function(t){function e(){if(f.onlyBinaryUpgrades){var e=!this.supportsBinary&&f.transport.supportsBinary;h=h||e}h||(a('probe transport "%s" opened',t),p.send([{type:"ping",data:"probe"}]),p.once("packet",function(e){if(!h)if("pong"===e.type&&"probe"===e.data){if(a('probe transport "%s" pong',t),f.upgrading=!0,f.emit("upgrading",p),!p)return;r.priorWebsocketSuccess="websocket"===p.name,a('pausing current transport "%s"',f.transport.name),f.transport.pause(function(){h||"closed"!==f.readyState&&(a("changing transport and sending upgrade packet"),u(),f.setTransport(p),p.send([{type:"upgrade"}]),f.emit("upgrade",p),p=null,f.upgrading=!1,f.flush())})}else{a('probe transport "%s" failed',t);var n=new Error("probe error");n.transport=p.name,f.emit("upgradeError",n)}}))}function n(){h||(h=!0,u(),p.close(),p=null)}function o(e){var r=new Error("probe error: "+e);r.transport=p.name,n(),a('probe transport "%s" failed because of error: %s',t,e), 8 | f.emit("upgradeError",r)}function i(){o("transport closed")}function s(){o("socket closed")}function c(t){p&&t.name!==p.name&&(a('"%s" works - aborting "%s"',t.name,p.name),n())}function u(){p.removeListener("open",e),p.removeListener("error",o),p.removeListener("close",i),f.removeListener("close",s),f.removeListener("upgrading",c)}a('probing transport "%s"',t);var p=this.createTransport(t,{probe:1}),h=!1,f=this;r.priorWebsocketSuccess=!1,p.once("open",e),p.once("error",o),p.once("close",i),this.once("close",s),this.once("upgrading",c),p.open()},r.prototype.onOpen=function(){if(a("socket open"),this.readyState="open",r.priorWebsocketSuccess="websocket"===this.transport.name,this.emit("open"),this.flush(),"open"===this.readyState&&this.upgrade&&this.transport.pause){a("starting upgrade probes");for(var t=0,e=this.upgrades.length;t1?{type:b[o],data:t.substring(1)}:{type:b[o]}:k}var i=new Uint8Array(t),o=i[0],s=f(t,1);return w&&"blob"===n&&(s=new w([s])),{type:b[o],data:s}},e.decodeBase64Packet=function(t,e){var n=b[t.charAt(0)];if(!u)return{type:n,data:{base64:!0,data:t.substr(1)}};var r=u.decode(t.substr(1));return"blob"===e&&w&&(r=new w([r])),{type:n,data:r}},e.encodePayload=function(t,n,r){function o(t){return t.length+":"+t}function i(t,r){e.encodePacket(t,!!s&&n,!0,function(t){r(null,o(t))})}"function"==typeof n&&(r=n,n=null);var s=h(t);return n&&s?w&&!m?e.encodePayloadAsBlob(t,r):e.encodePayloadAsArrayBuffer(t,r):t.length?void c(t,i,function(t,e){return r(e.join(""))}):r("0:")},e.decodePayload=function(t,n,r){if("string"!=typeof t)return e.decodePayloadAsBinary(t,n,r);"function"==typeof n&&(r=n,n=null);var o;if(""==t)return r(k,0,1);for(var i,s,a="",c=0,u=t.length;c0;){for(var a=new Uint8Array(o),c=0===a[0],u="",p=1;255!=a[p];p++){if(u.length>310){s=!0;break}u+=a[p]}if(s)return r(k,0,1);o=f(o,2+u.length),u=parseInt(u);var h=f(o,0,u);if(c)try{h=String.fromCharCode.apply(null,new Uint8Array(h))}catch(l){var d=new Uint8Array(h);h="";for(var p=0;pr&&(n=r),e>=r||e>=n||0===r)return new ArrayBuffer(0);for(var o=new Uint8Array(t),i=new Uint8Array(n-e),s=e,a=0;s=55296&&e<=56319&&o65535&&(e-=65536,o+=b(e>>>10&1023|55296),e=56320|1023&e),o+=b(e);return o}function c(t,e){return b(t>>e&63|128)}function u(t){if(0==(4294967168&t))return b(t);var e="";return 0==(4294965248&t)?e=b(t>>6&31|192):0==(4294901760&t)?(e=b(t>>12&15|224),e+=c(t,6)):0==(4292870144&t)&&(e=b(t>>18&7|240),e+=c(t,12),e+=c(t,6)),e+=b(63&t|128)}function p(t){for(var e,n=s(t),r=n.length,o=-1,i="";++o=m)throw Error("Invalid byte index");var t=255&g[v];if(v++,128==(192&t))return 63&t;throw Error("Invalid continuation byte")}function f(){var t,e,n,r,o;if(v>m)throw Error("Invalid byte index");if(v==m)return!1;if(t=255&g[v],v++,0==(128&t))return t;if(192==(224&t)){var e=h();if(o=(31&t)<<6|e,o>=128)return o;throw Error("Invalid continuation byte")}if(224==(240&t)){if(e=h(),n=h(),o=(15&t)<<12|e<<6|n,o>=2048)return o;throw Error("Invalid continuation byte")}if(240==(248&t)&&(e=h(),n=h(),r=h(),o=(15&t)<<18|e<<12|n<<6|r,o>=65536&&o<=1114111))return o;throw Error("Invalid WTF-8 detected")}function l(t){g=s(t),m=g.length,v=0;for(var e,n=[];(e=f())!==!1;)n.push(e);return a(n)}var d="object"==typeof e&&e,y=("object"==typeof t&&t&&t.exports==d&&t,"object"==typeof o&&o);y.global!==y&&y.window!==y||(i=y);var g,m,v,b=String.fromCharCode,k={version:"1.0.0",encode:p,decode:l};r=function(){return k}.call(e,n,e,t),!(void 0!==r&&(t.exports=r))}(this)}).call(e,n(9)(t),function(){return this}())},function(t,e){!function(){"use strict";for(var t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",n=new Uint8Array(256),r=0;r>2],i+=t[(3&r[n])<<4|r[n+1]>>4],i+=t[(15&r[n+1])<<2|r[n+2]>>6],i+=t[63&r[n+2]];return o%3===2?i=i.substring(0,i.length-1)+"=":o%3===1&&(i=i.substring(0,i.length-2)+"=="),i},e.decode=function(t){var e,r,o,i,s,a=.75*t.length,c=t.length,u=0;"="===t[t.length-1]&&(a--,"="===t[t.length-2]&&a--);var p=new ArrayBuffer(a),h=new Uint8Array(p);for(e=0;e>4,h[u++]=(15&o)<<4|i>>2,h[u++]=(3&i)<<6|63&s;return p}}()},function(t,e){(function(e){function n(t){for(var e=0;e0);return e}function r(t){var e=0;for(p=0;p';i=document.createElement(e)}catch(t){i=document.createElement("iframe"),i.name=o.iframeId,i.src="javascript:0"}i.id=o.iframeId,o.form.appendChild(i),o.iframe=i}var o=this;if(!this.form){var i,s=document.createElement("form"),a=document.createElement("textarea"),p=this.iframeId="eio_iframe_"+this.index;s.className="socketio",s.style.position="absolute",s.style.top="-1000px",s.style.left="-1000px",s.target=p,s.method="POST",s.setAttribute("accept-charset","utf-8"),a.name="d",s.appendChild(a),document.body.appendChild(s),this.form=s,this.area=a}this.form.action=this.uri(),r(),t=t.replace(u,"\\\n"),this.area.value=t.replace(c,"\\n");try{this.form.submit()}catch(h){}this.iframe.attachEvent?this.iframe.onreadystatechange=function(){"complete"===o.iframe.readyState&&n()}:this.iframe.onload=n}}).call(e,function(){return this}())},function(t,e,n){(function(e){function r(t){var e=t&&t.forceBase64;e&&(this.supportsBinary=!1),this.perMessageDeflate=t.perMessageDeflate,o.call(this,t)}var o=n(24),i=n(25),s=n(34),a=n(35),c=n(36),u=n(4)("engine.io-client:websocket"),p=e.WebSocket||e.MozWebSocket,h=p;if(!h&&"undefined"==typeof window)try{h=n(39)}catch(f){}t.exports=r,a(r,o),r.prototype.name="websocket",r.prototype.supportsBinary=!0,r.prototype.doOpen=function(){if(this.check()){var t=this.uri(),e=void 0,n={agent:this.agent,perMessageDeflate:this.perMessageDeflate};n.pfx=this.pfx,n.key=this.key,n.passphrase=this.passphrase,n.cert=this.cert,n.ca=this.ca,n.ciphers=this.ciphers,n.rejectUnauthorized=this.rejectUnauthorized,this.extraHeaders&&(n.headers=this.extraHeaders);try{this.ws=p?new h(t):new h(t,e,n)}catch(r){return this.emit("error",r)}void 0===this.ws.binaryType&&(this.supportsBinary=!1),this.ws.supports&&this.ws.supports.binary?(this.supportsBinary=!0,this.ws.binaryType="nodebuffer"):this.ws.binaryType="arraybuffer",this.addEventListeners()}},r.prototype.addEventListeners=function(){var t=this;this.ws.onopen=function(){t.onOpen()},this.ws.onclose=function(){t.onClose()},this.ws.onmessage=function(e){t.onData(e.data)},this.ws.onerror=function(e){t.onError("websocket error",e)}},r.prototype.write=function(t){function n(){r.emit("flush"),setTimeout(function(){r.writable=!0,r.emit("drain")},0)}var r=this;this.writable=!1;for(var o=t.length,s=0,a=o;s0&&t.jitter<=1?t.jitter:0,this.attempts=0}t.exports=n,n.prototype.duration=function(){var t=this.ms*Math.pow(this.factor,this.attempts++);if(this.jitter){var e=Math.random(),n=Math.floor(e*this.jitter*t);t=0==(1&Math.floor(10*e))?t-n:t+n}return 0|Math.min(t,this.max)},n.prototype.reset=function(){this.attempts=0},n.prototype.setMin=function(t){this.ms=t},n.prototype.setMax=function(t){this.max=t},n.prototype.setJitter=function(t){this.jitter=t}}]))}); 10 | //# sourceMappingURL=vue-websocket.js.map -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-websocket", 3 | "version": "0.2.3", 4 | "description": "Websocket handler for Vue.js", 5 | "homepage": "https://github.com/icebob/vue-websocket", 6 | "main": "dist/vue-websocket.js", 7 | "scripts": { 8 | "_prebuild": "npm run test", 9 | "build": "webpack --progress --config webpack.build.config.js", 10 | "lint": "eslint --ext=.js,.vue src test/unit/specs", 11 | "coverall": "cat ./test/unit/coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js", 12 | "coverage": "npm run test && npm run coverall", 13 | "changelog": "conventional-changelog -i CHANGELOG.md -s", 14 | "unit": "karma start test/unit/karma.conf.js", 15 | "pretest": "npm run lint", 16 | "test": "npm run unit", 17 | "ci": "karma start test/unit/karma.conf.js --auto-watch --no-single-run --reporters=dots --port=9877" 18 | }, 19 | "keywords": [ 20 | "vue", 21 | "websocket", 22 | "socket", 23 | "socket.io" 24 | ], 25 | "repository": { 26 | "type": "git", 27 | "url": "https://github.com/icebob/vue-websocket.git" 28 | }, 29 | "files": [ 30 | "dist", 31 | "src" 32 | ], 33 | "author": "Icebob", 34 | "license": "MIT", 35 | "devDependencies": { 36 | "babel-core": "6.14.0", 37 | "babel-loader": "6.2.5", 38 | "babel-plugin-transform-runtime": "6.15.0", 39 | "babel-preset-es2015": "6.14.0", 40 | "babel-preset-stage-2": "6.5.0", 41 | "chai": "3.5.0", 42 | "conventional-changelog-cli": "1.2.0", 43 | "coveralls": "2.11.14", 44 | "eslint": "^5.5.0", 45 | "eslint-friendly-formatter": "2.0.6", 46 | "eslint-loader": "^1.5.0", 47 | "eslint-plugin-html": "^4.0.5", 48 | "eslint-plugin-vue": "0.1.1", 49 | "isparta-loader": "2.0.0", 50 | "karma": "1.3.0", 51 | "karma-chai": "0.1.0", 52 | "karma-chrome-launcher": "1.0.1", 53 | "karma-coverage": "1.1.1", 54 | "karma-coveralls": "1.1.2", 55 | "karma-mocha": "1.2.0", 56 | "karma-phantomjs-launcher": "1.0.2", 57 | "karma-sinon-chai": "1.2.4", 58 | "karma-sourcemap-loader": "0.3.7", 59 | "karma-spec-reporter": "0.0.26", 60 | "karma-webpack": "1.8.0", 61 | "lodash": "4.16.2", 62 | "lolex": "1.5.1", 63 | "mocha": "2.5.3", 64 | "mocha-generators": "1.2.0", 65 | "mocha-loader": "0.7.1", 66 | "phantomjs-prebuilt": "2.1.12", 67 | "sinon": "1.17.6", 68 | "sinon-chai": "2.8.0", 69 | "vue": "1.0.27", 70 | "vue-hot-reload-api": "1.3.2", 71 | "vue-html-loader": "^1.2.4", 72 | "vue-loader": "8.5.4", 73 | "vue-style-loader": "^4.1.2", 74 | "webpack": "1.13.2", 75 | "webpack-dev-middleware": "1.8.3", 76 | "webpack-dev-server": "1.16.1", 77 | "webpack-merge": "0.14.1" 78 | }, 79 | "dependencies": { 80 | "socket.io-client": "1.5.1" 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import IO from "socket.io-client"; 2 | 3 | export default { 4 | 5 | install(Vue, connection, opts) { 6 | 7 | let socket; 8 | 9 | if (connection != null && typeof connection === "object") 10 | socket = connection; 11 | else 12 | socket = IO(connection || "", opts); 13 | 14 | Vue.prototype.$socket = socket; 15 | 16 | let addListeners = function() { 17 | if (this.$options["socket"]) { 18 | let conf = this.$options.socket; 19 | if (conf.namespace) { 20 | this.$socket = IO(conf.namespace, conf.options); 21 | } 22 | 23 | if (conf.events) { 24 | let prefix = conf.prefix || ""; 25 | Object.keys(conf.events).forEach((key) => { 26 | let func = conf.events[key].bind(this); 27 | this.$socket.on(prefix + key, func); 28 | conf.events[key].__binded = func; 29 | }); 30 | } 31 | } 32 | }; 33 | 34 | let removeListeners = function() { 35 | if (this.$options["socket"]) { 36 | let conf = this.$options.socket; 37 | 38 | if (conf.namespace) { 39 | this.$socket.disconnect(); 40 | } 41 | 42 | if (conf.events) { 43 | let prefix = conf.prefix || ""; 44 | Object.keys(conf.events).forEach((key) => { 45 | this.$socket.off(prefix + key, conf.events[key].__binded); 46 | }); 47 | } 48 | } 49 | }; 50 | 51 | Vue.mixin({ 52 | [Vue.version.indexOf("2") === 0 ? "beforeCreate" : "beforeCompile"]: addListeners, 53 | beforeDestroy: removeListeners 54 | }); 55 | 56 | } 57 | 58 | }; 59 | -------------------------------------------------------------------------------- /webpack.build.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require("webpack"); 2 | var version = require("./package.json").version; 3 | var banner = "/**\n" + " * vue-websocket v" + version + "\n" + " * https://github.com/icebob/vue-websocket\n" + " * Released under the MIT License.\n" + " */\n"; 4 | 5 | module.exports = [ 6 | { 7 | devtool: "source-map", 8 | entry: "./src/index", 9 | output: { 10 | path: "./dist", 11 | filename: "vue-websocket.js", 12 | library: "VueWebsocket", 13 | libraryTarget: "umd" 14 | }, 15 | 16 | plugins: [ 17 | new webpack.DefinePlugin({ 18 | "process.env" : { 19 | NODE_ENV : JSON.stringify("production") 20 | } 21 | }), 22 | new webpack.optimize.UglifyJsPlugin({ 23 | compress: { 24 | warnings: false 25 | } 26 | }), 27 | new webpack.optimize.DedupePlugin(), 28 | new webpack.BannerPlugin(banner, { 29 | raw: true 30 | }) 31 | ], 32 | 33 | module: { 34 | loaders: [ 35 | { 36 | "test": /\.js?$/, 37 | "exclude": /node_modules/, 38 | "loader": "babel" 39 | }, 40 | { 41 | "test": /\.vue$/, 42 | "loader": "vue" 43 | } 44 | ] 45 | } 46 | } 47 | 48 | ]; -------------------------------------------------------------------------------- /webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | var path = require("path"); 2 | var webpack = require("webpack"); 3 | 4 | module.exports = { 5 | devtool: "eval-source-map", 6 | 7 | entry: { 8 | app: path.resolve("dev", "main.js") 9 | }, 10 | 11 | output: { 12 | path: path.resolve("dev"), 13 | filename: "[name].js", 14 | publicPath: "/" 15 | }, 16 | 17 | plugins: [ 18 | ], 19 | 20 | module: { 21 | loaders: [ 22 | { 23 | "test": /\.js?$/, 24 | "exclude": /node_modules/, 25 | "loader": "babel" 26 | }, 27 | { 28 | "test": /\.vue?$/, 29 | "loader": "vue" 30 | } 31 | ] 32 | } 33 | }; 34 | --------------------------------------------------------------------------------