Archives/ohwgiles_laminar
1
0
Fork 0
mirror of https://github.com/ohwgiles/laminar.git synced 2024-10-27 20:34:20 +00:00
Code Issues Projects Releases Wiki Activity

resolves #59: pagination doesn't work after reconnect

Browse Source 
A subtle tweak to the websocket logic needed to handle
this edge case. Better comments added.
This commit is contained in:
Oliver Giles 2018-06-30 20:19:41 +03:00
parent d241d6757f
commit 0b15939f90
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/resources/js/app.js
View File

@ -21,10 +21,15 @@ const WebsocketHandler = function() {
// "status" is the first message the websocket always delivers. // "status" is the first message the websocket always delivers.
// Use this to confirm the navigation. The component is not // Use this to confirm the navigation. The component is not
// created until next() is called, so creating a reference // created until next() is called, so creating a reference
// for other message types must be deferred. Also check that // for other message types must be deferred. There are some extra
// the reference is not already created, this allows a subsequent // subtle checks here. If this websocket already has a component,
// status message to be handled as an update. // then this is not the first time the status message has been
if (msg.type === 'status' && !this.comp) { // received. If the frontend requests an update, the status message
// should not be handled here, but treated the same as any other
// message. An exception is if the connection has been lost - in
// that case we should treat this as a "first-time" status message.
// this.comp.ws is used as a proxy for this.
if (msg.type === 'status' && (!this.comp || !this.comp.ws)) {
next(comp => { next(comp => {
// Set up bidirectional reference // Set up bidirectional reference
// 1. needed to reference the component for other msg types // 1. needed to reference the component for other msg types
@ -44,7 +49,6 @@ const WebsocketHandler = function() {
if (!this.comp) if (!this.comp)
return console.error("Page component was undefined"); return console.error("Page component was undefined");
else { else {
this.comp.$root.connected = true;
this.comp.$root.showNotify(msg.type, msg.data); this.comp.$root.showNotify(msg.type, msg.data);
if(typeof this.comp[msg.type] === 'function') if(typeof this.comp[msg.type] === 'function')
this.comp[msg.type](msg.data); this.comp[msg.type](msg.data);
@ -56,11 +60,17 @@ const WebsocketHandler = function() {
// and a re-connection isn't meaningful // and a re-connection isn't meaningful
if(!ev.wasClean && 'comp' in this) { if(!ev.wasClean && 'comp' in this) {
this.comp.$root.connected = false; this.comp.$root.connected = false;
// remove the reference to the websocket from the component.
// This not only cleans up an unneeded reference but ensures a
// status message on reconnection is treated as "first-time"
delete this.comp.ws;
this.reconnectTimeout = setTimeout(()=>{ this.reconnectTimeout = setTimeout(()=>{
var newWs = setupWebsocket(path, (fn) => { fn(this.comp); }); var newWs = setupWebsocket(path, (fn) => { fn(this.comp); });
// pass on the current component for the cases where the // the next() callback won't happen if the server is still
// connection fails (onclose is called again) before the // unreachable. Save the reference to the last component
// status message can reassign the current component // here so we can recover if/when it does return. This means
// passing this.comp in the next() callback above is redundant
// but necessary to keep the same implementation.
newWs.comp = this.comp; newWs.comp = this.comp;
}, 2000); }, 2000);
} }