diff --git a/README.md b/README.md index 1bf03e3..6d6e063 100755 --- a/README.md +++ b/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 diff --git a/dist/build.js b/dist/build.js index 402c56f..da1fe98 100755 --- a/dist/build.js +++ b/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-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;o3&&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;n2&&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)}])}); \ No newline at end of file +!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-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;o2&&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;n3&&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)}])}); \ No newline at end of file diff --git a/src/Main.js b/src/Main.js index e13fff7..7ed4b0c 100755 --- a/src/Main.js +++ b/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 diff --git a/src/Observer.js b/src/Observer.js index 3e36f0e..e5a005c 100755 --- a/src/Observer.js +++ b/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))