From 55aa4a75aa4ada9f46275918175cd3288622fd08 Mon Sep 17 00:00:00 2001 From: Mark Macneil Date: Mon, 10 Jul 2017 13:09:10 -0300 Subject: [PATCH] Fixes for empty sub-protocol and missing action names (#8) * 1. Fixed DOMException: Failed to construct 'WebSocket': The subprotocol '' is invalid. in Chrome when empty protocol arg passed in WS ctor. 2. Action name was never being set/executed on incoming messages. * upated docs --- README.md | 10 +++++++++- dist/build.js | 2 +- src/Observer.js | 3 ++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 5c29afb..1c4ee17 100755 --- a/README.md +++ b/README.md @@ -145,7 +145,15 @@ If there is a `.namespace` on the data, the message is sent to this `namespaced: If there is a `.mutation` value in the response data, the corresponding mutation is called with the name `SOCKET_[mutation value]` -If there is an `.action` value in the response data, the corresponding action is called with the name `SOCKET_[action value]` +If there is an `.action` value in the response data ie. `action: 'customerAdded'`, the corresponding action is called by name: + +``` js +actions: { + customerAdded (context) { + console.log('action received: customerAdded') + } + } +``` Use the `.sendObj({some: data})` method on the `$socket` object to send stringified json messages. diff --git a/dist/build.js b/dist/build.js index 3e64e8d..96a6812 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.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=1)}([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]:{};if(!t)throw new Error("[vue-native-socket] cannot locate connection");var o=new i.default(t,n);e.prototype.$socket=o.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;n1&&void 0!==arguments[1]?arguments[1]:{};o(this,e),this.format=n.format&&n.format.toLowerCase(),this.connect(t,n),n.store&&(this.store=n.store),this.onEvent()}return r(e,[{key:"connect",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=n.protocol||"";this.WebSocket=n.WebSocket||new WebSocket(e,o),"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_")){var n="commit",o=e.toUpperCase(),r=t;"json"===this.format&&t.data&&(r=JSON.parse(t.data),o=[r.namespace||"",r.mutation].filter(function(e){return!!e}).join("/"),r.action&&(n="dispatch")),this.store[n](o,r)}}}]),e}();t.default=c}])}); \ 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.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=1)}([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]:{};if(!t)throw new Error("[vue-native-socket] cannot locate connection");var o=new i.default(t,n);e.prototype.$socket=o.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;n1&&void 0!==arguments[1]?arguments[1]:{};o(this,e),this.format=n.format&&n.format.toLowerCase(),this.connect(t,n),n.store&&(this.store=n.store),this.onEvent()}return r(e,[{key:"connect",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=n.protocol||"";this.WebSocket=n.WebSocket||(""===o?new WebSocket(e):new WebSocket(e,o)),"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_")){var n="commit",o=e.toUpperCase(),r=t;"json"===this.format&&t.data&&(r=JSON.parse(t.data),o=[r.namespace||"",r.mutation].filter(function(e){return!!e}).join("/"),r.action&&(n="dispatch",o=r.action)),this.store[n](o,r)}}}]),e}();t.default=c}])}); \ No newline at end of file diff --git a/src/Observer.js b/src/Observer.js index 7a530a1..38038b8 100755 --- a/src/Observer.js +++ b/src/Observer.js @@ -10,7 +10,7 @@ export default class { connect (connectionUrl, opts = {}) { let protocol = opts.protocol || '' - this.WebSocket = opts.WebSocket || new WebSocket(connectionUrl, protocol) + this.WebSocket = opts.WebSocket || (protocol === '' ? new WebSocket(connectionUrl) : new WebSocket(connectionUrl, protocol)) if (this.format === 'json') { if (!('sendObj' in this.WebSocket)) { this.WebSocket.sendObj = (obj) => this.WebSocket.send(JSON.stringify(obj)) @@ -37,6 +37,7 @@ export default class { target = [msg.namespace || '', msg.mutation].filter((e) => !!e).join('/') if (msg.action) { method = 'dispatch' + target = msg.action } } this.store[method](target, msg)