Merge pull request #4 from owlran/master

Add WebSocket sub-protocol support

README.md

@@ -19,6 +19,11 @@ Automatic socket connection from an URL string
 import VueNativeSock from 'vue-native-websocket'
 Vue.use(VueNativeSock, 'ws://localhost:9090')
 ```
+Set sub-protocol, this is optional option and default is empty string.
+``` js
+import VueNativeSock from 'vue-native-websocket'
+Vue.use(VueNativeSock, 'ws://localhost:9090', 'my-protocol')
+```
 
 Enable Vuex integration, where `'./store'` is your local apps store:
 ``` js

dist/build.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueNativeSock=t():e.VueNativeSock=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=3)}([function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=function(){function e(){o(this,e),this.listeners=new Map}return r(e,[{key:"addListener",value:function(e,t,n){return"function"==typeof t&&(this.listeners.has(e)||this.listeners.set(e,[]),this.listeners.get(e).push({callback:t,vm:n}),!0)}},{key:"removeListener",value:function(e,t,n){var o=this.listeners.get(e),r=void 0;return!!(o&&o.length&&(r=o.reduce(function(e,o,r){return"function"==typeof o.callback&&o.callback===t&&o.vm===n&&(e=r),e},-1))>-1)&&(o.splice(r,1),this.listeners.set(e,o),!0)}},{key:"emit",value:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];var r=this.listeners.get(e);return!(!r||!r.length)&&(r.forEach(function(e){var t;(t=e.callback).call.apply(t,[e.vm].concat(n))}),!0)}}]),e}();t.default=new i},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(2),i=o(r),s=n(0),c=o(s);t.default={install:function(e,t,n){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};if(!t)throw new Error("[vue-native-socket] cannot locate connection");var r=new i.default(t,n,o);e.prototype.$socket=r.WebSocket,e.mixin({created:function(){var e=this,t=this.$options.sockets;this.$options.sockets=new Proxy({},{set:function(e,t,n){return c.default.addListener(t,n,this),e[t]=n,!0},deleteProperty:function(e,t){return c.default.removeListener(t,this.$options.sockets[t],this),delete e.key,!0}}),t&&Object.keys(t).forEach(function(n){e.$options.sockets[n]=t[n]})},beforeDestroy:function(){var e=this,t=this.$options.sockets;t&&Object.keys(t).forEach(function(t){delete e.$options.sockets[t]})}})}}},function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=n(0),s=function(e){return e&&e.__esModule?e:{default:e}}(i),c=function(){function e(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};o(this,e),this.format=r.format&&r.format.toLowerCase(),this.connect(t),n&&(this.store=n),this.onEvent()}return r(e,[{key:"connect",value:function(e){var t=this;this.WebSocket=new WebSocket(e),"json"===this.format&&("sendObj"in this.WebSocket||(this.WebSocket.sendObj=function(e){return t.WebSocket.send(JSON.stringify(e))}))}},{key:"onEvent",value:function(){var e=this;["onmessage","onclose","onerror","onopen"].forEach(function(t){e.WebSocket[t]=function(n){s.default.emit(t,n),e.store&&e.passToStore("SOCKET_"+t,n)}})}},{key:"passToStore",value:function(e,t){if(e.startsWith("SOCKET_"))if("json"===this.format&&t.data){var n=JSON.parse(t.data),o=n.namespace||"";n.mutation&&this.store.commit([o,n.mutation].join("/"),n),n.action&&this.store.dispatch([o,n.action].join("/"),n)}else this.store.commit(e.toUpperCase(),t)}}]),e}();t.default=c},function(e,t,n){e.exports=n(1)}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueNativeSock=t():e.VueNativeSock=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=3)}([function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=function(){function e(){o(this,e),this.listeners=new Map}return r(e,[{key:"addListener",value:function(e,t,n){return"function"==typeof t&&(this.listeners.has(e)||this.listeners.set(e,[]),this.listeners.get(e).push({callback:t,vm:n}),!0)}},{key:"removeListener",value:function(e,t,n){var o=this.listeners.get(e),r=void 0;return!!(o&&o.length&&(r=o.reduce(function(e,o,r){return"function"==typeof o.callback&&o.callback===t&&o.vm===n&&(e=r),e},-1))>-1)&&(o.splice(r,1),this.listeners.set(e,o),!0)}},{key:"emit",value:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];var r=this.listeners.get(e);return!(!r||!r.length)&&(r.forEach(function(e){var t;(t=e.callback).call.apply(t,[e.vm].concat(n))}),!0)}}]),e}();t.default=new i},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(2),i=o(r),s=n(0),c=o(s);t.default={install:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",o=arguments[3],r=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};if(!t)throw new Error("[vue-native-socket] cannot locate connection");var s=new i.default(t,o,n,r);e.prototype.$socket=s.WebSocket,e.mixin({created:function(){var e=this,t=this.$options.sockets;this.$options.sockets=new Proxy({},{set:function(e,t,n){return c.default.addListener(t,n,this),e[t]=n,!0},deleteProperty:function(e,t){return c.default.removeListener(t,this.$options.sockets[t],this),delete e.key,!0}}),t&&Object.keys(t).forEach(function(n){e.$options.sockets[n]=t[n]})},beforeDestroy:function(){var e=this,t=this.$options.sockets;t&&Object.keys(t).forEach(function(t){delete e.$options.sockets[t]})}})}}},function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=n(0),s=function(e){return e&&e.__esModule?e:{default:e}}(i),c=function(){function e(t,n,r){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};o(this,e),this.format=i.format&&i.format.toLowerCase(),this.connect(t,n),r&&(this.store=r),this.onEvent()}return r(e,[{key:"connect",value:function(e,t){var n=this;this.WebSocket=new WebSocket(e,t),"json"===this.format&&("sendObj"in this.WebSocket||(this.WebSocket.sendObj=function(e){return n.WebSocket.send(JSON.stringify(e))}))}},{key:"onEvent",value:function(){var e=this;["onmessage","onclose","onerror","onopen"].forEach(function(t){e.WebSocket[t]=function(n){s.default.emit(t,n),e.store&&e.passToStore("SOCKET_"+t,n)}})}},{key:"passToStore",value:function(e,t){if(e.startsWith("SOCKET_"))if("json"===this.format&&t.data){var n=JSON.parse(t.data),o=n.namespace||"";n.mutation&&this.store.commit([o,n.mutation].join("/"),n),n.action&&this.store.dispatch([o,n.action].join("/"),n)}else this.store.commit(e.toUpperCase(),t)}}]),e}();t.default=c},function(e,t,n){e.exports=n(1)}])});

src/Main.js

@@ -3,10 +3,10 @@ import Emitter from './Emitter'
 
 export default {
 
-  install (Vue, connection, store, opts = {}) {
+  install (Vue, connection, protocol = '', store, opts = {}) {
     if (!connection) { throw new Error('[vue-native-socket] cannot locate connection') }
 
-    let observer = new Observer(connection, store, opts)
+    let observer = new Observer(connection, protocol, store, opts)
 
     Vue.prototype.$socket = observer.WebSocket
 

src/Observer.js

@@ -1,15 +1,15 @@
 import Emitter from './Emitter'
 
 export default class {
-  constructor (connectionUrl, store, opts = {}) {
+  constructor (connectionUrl, protocol, store, opts = {}) {
     this.format = opts.format && opts.format.toLowerCase()
-    this.connect(connectionUrl)
+    this.connect(connectionUrl, protocol)
     if (store) { this.store = store }
     this.onEvent()
   }
 
-  connect (connectionUrl) {
-    this.WebSocket = new WebSocket(connectionUrl)
+  connect (connectionUrl, protocol) {
+    this.WebSocket = new WebSocket(connectionUrl, protocol)
     if (this.format === 'json') {
       if (!('sendObj' in this.WebSocket)) {
         this.WebSocket.sendObj = (obj) => this.WebSocket.send(JSON.stringify(obj))