spine-high-templar - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

dist/spine-high-templar.es.js

@@ -144,9 +144,7 @@ import mitt from 'mitt';
 
-            var _arr = ['pingInterval', 'reconnectInterval'];
-            for (var _i = 0; _i < _arr.length; _i++) {
-                var propName = _arr[_i];
+            ['pingInterval', 'reconnectInterval'].forEach(function (propName) {
                 if (props[propName] !== undefined) {
-                    this[propName] = props[propName];
+                    _this[propName] = props[propName];
                 }
-            }
+            });
 
@@ -232,29 +230,10 @@ this.instance.onopen = function () {
         value: function _reconnectSubscriptions() {
-            var _iteratorNormalCompletion = true;
-            var _didIteratorError = false;
-            var _iteratorError = undefined;
+            var _this2 = this;
 
-            try {
-                for (var _iterator = this.subscriptions[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-                    var sub = _step.value;
-
-                    if (sub.messageCached) {
-                        return;
-                    }
-                    this.notifySocketOfSubscription(sub);
+            this.subscriptions.forEach(function (sub) {
+                if (sub.messageCached) {
+                    return;
                 }
-            } catch (err) {
-                _didIteratorError = true;
-                _iteratorError = err;
-            } finally {
-                try {
-                    if (!_iteratorNormalCompletion && _iterator.return) {
-                        _iterator.return();
-                    }
-                } finally {
-                    if (_didIteratorError) {
-                        throw _iteratorError;
-                    }
-                }
-            }
+                _this2.notifySocketOfSubscription(sub);
+            });
         }
@@ -285,28 +264,8 @@ }, {
         value: function _sendPendingMessages() {
-            var _iteratorNormalCompletion2 = true;
-            var _didIteratorError2 = false;
-            var _iteratorError2 = undefined;
+            var _this3 = this;
 
-            try {
-                for (var _iterator2 = this.pendingSendActions[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-                    var action = _step2.value;
-
-                    this._sendDirectly(action.message);
-                    action.resolve();
-                }
-            } catch (err) {
-                _didIteratorError2 = true;
-                _iteratorError2 = err;
-            } finally {
-                try {
-                    if (!_iteratorNormalCompletion2 && _iterator2.return) {
-                        _iterator2.return();
-                    }
-                } finally {
-                    if (_didIteratorError2) {
-                        throw _iteratorError2;
-                    }
-                }
-            }
-
+            this.pendingSendActions.forEach(function (action) {
+                _this3._sendDirectly(action.message);
+                action.resolve();
+            });
             this.pendingSendActions = [];
@@ -322,6 +281,6 @@ }
         value: function _initiatePingInterval() {
-            var _this2 = this;
+            var _this4 = this;
 
             this.pingIntervalHandle = setInterval(function () {
-                _this2.instance.send('ping');
+                _this4.instance.send('ping');
             }, this.pingInterval);
@@ -328,0 +287,0 @@ }

dist/spine-high-templar.umd.js

@@ -150,9 +150,7 @@ (function (global, factory) {
 
-            var _arr = ['pingInterval', 'reconnectInterval'];
-            for (var _i = 0; _i < _arr.length; _i++) {
-                var propName = _arr[_i];
+            ['pingInterval', 'reconnectInterval'].forEach(function (propName) {
                 if (props[propName] !== undefined) {
-                    this[propName] = props[propName];
+                    _this[propName] = props[propName];
                 }
-            }
+            });
 
@@ -238,29 +236,10 @@ this.instance.onopen = function () {
         value: function _reconnectSubscriptions() {
-            var _iteratorNormalCompletion = true;
-            var _didIteratorError = false;
-            var _iteratorError = undefined;
+            var _this2 = this;
 
-            try {
-                for (var _iterator = this.subscriptions[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-                    var sub = _step.value;
-
-                    if (sub.messageCached) {
-                        return;
-                    }
-                    this.notifySocketOfSubscription(sub);
+            this.subscriptions.forEach(function (sub) {
+                if (sub.messageCached) {
+                    return;
                 }
-            } catch (err) {
-                _didIteratorError = true;
-                _iteratorError = err;
-            } finally {
-                try {
-                    if (!_iteratorNormalCompletion && _iterator.return) {
-                        _iterator.return();
-                    }
-                } finally {
-                    if (_didIteratorError) {
-                        throw _iteratorError;
-                    }
-                }
-            }
+                _this2.notifySocketOfSubscription(sub);
+            });
         }
@@ -291,28 +270,8 @@ }, {
         value: function _sendPendingMessages() {
-            var _iteratorNormalCompletion2 = true;
-            var _didIteratorError2 = false;
-            var _iteratorError2 = undefined;
+            var _this3 = this;
 
-            try {
-                for (var _iterator2 = this.pendingSendActions[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-                    var action = _step2.value;
-
-                    this._sendDirectly(action.message);
-                    action.resolve();
-                }
-            } catch (err) {
-                _didIteratorError2 = true;
-                _iteratorError2 = err;
-            } finally {
-                try {
-                    if (!_iteratorNormalCompletion2 && _iterator2.return) {
-                        _iterator2.return();
-                    }
-                } finally {
-                    if (_didIteratorError2) {
-                        throw _iteratorError2;
-                    }
-                }
-            }
-
+            this.pendingSendActions.forEach(function (action) {
+                _this3._sendDirectly(action.message);
+                action.resolve();
+            });
             this.pendingSendActions = [];
@@ -328,6 +287,6 @@ }
         value: function _initiatePingInterval() {
-            var _this2 = this;
+            var _this4 = this;
 
             this.pingIntervalHandle = setInterval(function () {
-                _this2.instance.send('ping');
+                _this4.instance.send('ping');
             }, this.pingInterval);
@@ -334,0 +293,0 @@ }

package.json

 {
   "name": "spine-high-templar",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Jasper Stam <[e-mail]>",

README.md

@@ -63,4 +63,35 @@ # spine-high-templar
 
-## Authorization: Token
+### Reconnect
 
+The websocket may disconnect. This can be a client side reason (loss of internet) or a server side reason (deployment). When the websocket has been disconnected, the frontend might be outdated, as publishes may have been missed.
+
+For this reason the subscribe action has a onReconnect callback, where the frontend can refetch/do whatever to make sure it's up to date.
+
+```js
+componentDidMount() {
+    this.subscription = this.props.store.api.socket.subscribe({
+        onPublish: this.handlePublish.bind(this),
+        onReconnect: this.handleReconnect.bind(this),
+        room: {
+            tenant: 16,
+            driver: this.props.screenProps.viewStore.currentUser.id,
+        },
+    });
+}
+
+handlePublish(msg) {
+    this.props.store.add(msg.data);
+}
+
+handleReconnect() {
+    this.props.store.fetch();
+}
+
+componentWillUnmount() {
+    this.props.store.api.socket.unsubscribe(this.subscription);
+}
+```
+
+### Authorization: Token
+
 If the app doesn't use session auth but an Authorization token, one can pass the token under the `token` key in the Socket constructor options. Due to a limitation of the WebSocket available in browsers, it's not possible to add custom headers to a websocket open request, so we handle this in high-templar.
@@ -67,0 +98,0 @@

No alert changes

Improved metrics

Number of lines in readme file

106

increased by41.33%

Worsened metrics

Total package byte prevSize

25374

decreased by-8.51%

Lines of code

544

decreased by-12.26%

No dependency changes