Connected Disconnected Browser Notification

help
1

We’re adding “Disconnected From Server” and “Reconnected To Server” notifications in our Meteor app. I love the built-in server connection API that Meteor has but I’m a bit puzzled by the way the Meteor.status() is working with autorun and the browser.

We have the following simple code that works pretty much as expected. The notification functions are our own. They all work as expected:

instance.autorun(function() {
    const meteorStatus = Meteor.status();
    const connected = meteorStatus.connected;
    const status = meteorStatus.status;

    //  If the connection is lost and Meteor isn't trying to connect, whether on the initial load or after disconnecting,
    //  show the notification.
    if(!connected && status != "connecting") {
      //  If disconnectedNotification hasn't been assigned yet, create a permanent notification and assign a reference to
      //  it. We need this because Meteor will attempt to reconnect several times if the connection is lost due to the 
      //  server going down, losing an internet connection, etc, and we don't want to duplicate the notification.
      if(!instance.disconnectedNotification)
        instance.disconnectedNotification = createPermanentNotification("info", "Browser Disconnected", "You're currently offline. Try refreshing the page or checking your Internet connection.");        

      //  Create a session variable so when the user refreshes, they'll see the reconnected notification. Use a persistent
      //  var so that it isn't wiped away by the refresh.
      Session.setPersistent("showReconnectNotification", true);
    }
    //  Once the browser connects to the server, check if the disconnectedNotification var or showReconnectNotification 
    //  Session var have been assigned.
    else if(connected && (instance.disconnectedNotification || Session.get("showReconnectNotification"))) {
      //  If the notification has been created, call .remove() on the notification to hide it. Use an optional chain here
      //  because the notification won't exist if this is firing after a refresh.
      instance.disconnectedNotification?.remove();
      //  Remove disconnectedNotification to prevent this from firing again.
      delete instance.disconnectedNotification;

      //  Display a temporary reconnected notification. No need to assign it because it's a temporary one.
      createNotification("success", "Connection Restored", "Your browser has reconnected to the application.");

      //  Clear out the showReconnectNotification Session variable. 
      Session.clear("showReconnectNotification");
    }
  });

When I refresh the browser while a connection is working, no notifications are shown. Which is working as expected. We don’t want any notifications about connection if the user willingly refreshes their browser while their connection is good.

However, the problem, is if I close the browser and then re-open it, the Connected Restored notification always displays on reopening the browser window. After much debugging, this is because as the window closes, the first block of the autorun where Session.setPersistent("showReconnectNotification", true) is called always runs. showReconnectNotification is always set to true when closing. However, when refreshing, it doesn’t get set to true as that block never gets called.

I find this kind of strange because when testing and trying to figure this out, there’s pretty much no way to detect the difference between a browser refresh and a browser close. And there’s a lot of hacky things people try to figure this out.

I’m not sure how Meteor is detecting the difference when I do a refresh and/or doing two different things. Unless it’s as simple as the Meteor.status().connected never going to false on a refresh. But it seems like this should happen, for however briefly, the same way it does on a close.

Anyone have any experience with this? For now, I’ve added a Date() call in the mix to not show the Connected Restored notification after a certain length of time. Because as is, they’ll always see this notification upon re-opening a browser to the app after closing down.

2

One big usability issue here is when the connection is unstable (e.g., slow mobile internet), the notification will be displayed at a very annoying frequency even if the app is usable. As a solution, we added a timer that displays the disconnected notice only after 5 seconds from being disconnected. This removes the annoying display of the notice.

That can also help solve the issue of displaying the connection restored at the beginning.

Another thing about usability is that the user expects the app to be connected to the client by default. What the user needs to know is when the app is disconnected. There is no need to inform the user about being connected or reconnected, as that is expected when the disconnected notice is not displayed

1 Like
3

I write it for React. In the highest view component (e.g App.js)

// ........
const CONNECTION_ISSUE_TIMEOUT = 10000 // ms
// local state
const [showNote, setShowNote] = useState(false) // initial value

useEffect(() => {  // component has loaded
   setTimeout(() => {
      setShowNote(true)
    }, CONNECTION_ISSUE_TIMEOUT) // start counting
}, [])

const { connected } = Meteor.status() || {}

// in render:

 {showNote && !connected &&
          <div>connecting ...</div>}
4

Good tips.

This line takes care of that:

if(!connected && status != "connecting")

It prevents the Disconnected notification from constantly popping up on every drop out of the Internet.

In our testing when we disconnect the browser using Chrome’s Developer Tools, it takes about thirty seconds for the notification to pop up. As as I believe the status stays on connecting or waiting for some time until connected ultimatley goes false.

I like this idea but sometimes when you refresh or close/re-open the browser you are trying to reconnect and you would want to see the Reconnected notification immediately. Is that necessary after a refresh if the app obviously loads?.. maybe not. But sometimes things are cached and it can be hard to tell if the app is actually connected or not. We have a mission critical app and the user needs to have a confirmation that it is indeed Reconnected.

5

What is the use of the “disconnected” notice if it will not serve its purpose. If you cannot tell if the app is connected or not, then the disconnected notice is not doing its job.

6

@rjdavid You were right. We needed to add a small timeout to not show the Disconnected notification right away. We had users report it constantly flashing between Disconnected/Reconnected in some cases.

We now add five seconds before displaying the notification. So this wasn’t working exactly how I thought it was:

1 Like
7

if you use React, you can check my package: minhna:connection-status-react at The trusted source for JavaScript packages, Meteor.js resources and tools | Atmosphere