diff --git a/packages/javascript/src/modules/socket.ts b/packages/javascript/src/modules/socket.ts index eb64b59..affbcaa 100644 --- a/packages/javascript/src/modules/socket.ts +++ b/packages/javascript/src/modules/socket.ts @@ -54,6 +54,11 @@ export default class Socket implements Transport { */ private reconnectionAttempts: number; + /** + * Page hide event handler reference (for removal) + */ + private pageHideHandler: () => void; + /** * Creates new Socket instance. Setup initial socket params. * @@ -77,6 +82,11 @@ export default class Socket implements Transport { this.reconnectionTimeout = reconnectionTimeout; this.reconnectionAttempts = reconnectionAttempts; + this.pageHideHandler = () => { + log('Page entering bfcache, closing WebSocket', 'info'); + this.close(); + }; + this.eventsQueue = []; this.ws = null; @@ -120,7 +130,21 @@ export default class Socket implements Transport { } /** - * Create new WebSocket connection and setup event listeners + * Remove window event listeners + */ + public destroyListeners(): void { + window.removeEventListener('pagehide', this.pageHideHandler, { capture: true }); + } + + /** + * Setup window event listeners + */ + private setupListeners(): void { + window.addEventListener('pagehide', this.pageHideHandler, { capture: true }); + } + + /** + * Create new WebSocket connection and setup socket event listeners */ private init(): Promise { return new Promise((resolve, reject) => { @@ -139,6 +163,8 @@ export default class Socket implements Transport { * @param event - websocket event on closing */ this.ws.onclose = (event: CloseEvent): void => { + this.destroyListeners(); + if (typeof this.onClose === 'function') { this.onClose(event); } @@ -154,6 +180,8 @@ export default class Socket implements Transport { }; this.ws.onopen = (event: Event): void => { + this.setupListeners(); + if (typeof this.onOpen === 'function') { this.onOpen(event); } @@ -163,6 +191,16 @@ export default class Socket implements Transport { }); } + /** + * Closes socket, it can be restored with init() later + */ + private close(): void { + if (this.ws) { + this.ws.close(); + this.ws = null; + } + } + /** * Tries to reconnect to the server for specified number of times with the interval *