Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feature] Automatically reconnect to HMR with exponential backoff #785

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[feature] Automatically reconnect to HMR with exponential backoff #785

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cb3c5c3
[feature] Automatically reconnect to HMR with exponential backoff
developit Jul 28, 2021
5e7e4c1
(wmr/hmr) - implement focus-based reconnect (#786)
JoviDeCroock Aug 9, 2021
96db4d5
Update client.js
developit Jan 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/brown-gorillas-notice.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"wmr": patch
---

when the hmr client disconnects attempt to reconnect with exponential backoff and a visibilityChange event-listener
31 changes: 27 additions & 4 deletions packages/wmr/src/plugins/wmr/client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ function log(...args) {

const strip = url => url.replace(/[?&]t=\d+/g, '');
const addTimestamp = (url, time) => url + (/\?/.test(url) ? '&' : '?') + 't=' + time;

const resolve = url => new URL(url, location.origin).href;
let ws;

let ws,
connectTimer,
connectDelay = 0;

/**
* @param {boolean} [needsReload] Force page to reload once it's connected
Expand All @@ -19,10 +21,15 @@ function connect(needsReload) {
ws.send(JSON.stringify(msg));
}

clearTimeout(connectTimer);
ws.addEventListener('open', () => {
log(`Connected to server.`);
connectDelay = 0;
clearTimeout(connectTimer);
connectTimer = undefined;
removeEventListener('visibilitychange', connectIfVisible);
if (needsReload) {
window.location.reload();
location.reload();
} else {
queue.forEach(sendSocketMessage);
queue = [];
Expand All @@ -31,6 +38,22 @@ function connect(needsReload) {

ws.addEventListener('message', handleMessage);
ws.addEventListener('error', handleError);
ws.addEventListener('close', reconnect);
Copy link
Member

@JoviDeCroock JoviDeCroock Jul 28, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could also listen for something like focussing (or visibilitychange) the browser again. This removes the need for exponential backoff, ...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that's a great idea. Thtat's what I'm using to run my code for waking up ios wrapper app

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since the exponential dropoff with 30s limit will not solve the case for a sleep longer than 30s, but visibilitychange certainly would.

Thanks guys!

}

function reconnect() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently reconnect only gets called once, should this be called again if establishing connection in connect(false) fails?

connectDelay = Math.min(connectDelay * 2, 30000) || 500;
connectTimer = setTimeout(() => {
if (ws) ws.close();
connect(false);
}, connectDelay);
addEventListener('visibilitychange', connectIfVisible);
}

function connectIfVisible() {
if (document.visibilityState === 'visible') {
connect(false);
}
}

connect();
Expand All @@ -44,7 +67,7 @@ function handleMessage(e) {
const data = JSON.parse(e.data);
switch (data.type) {
case 'reload':
window.location.reload();
location.reload();
break;
case 'update':
if (errorOverlay) {
Expand Down