[SOLVED] How to show the meteor status?

help
1

Hello meteor community, my question for this topic is the following:
How can I display a reconnection message when the meteor server does not respond?
Try using the way the reconnection notification was used in the “all” example in the guide but it doesn’t work for me
I have this:

const CONNECTION_ISSUE_TIMEOUT = 5000;
const showConnectionIssue = new ReactiveVar(false);

Meteor.startup(() => {
  setTimeout(() => {
    showConnectionIssue.set(true);
  }, CONNECTION_ISSUE_TIMEOUT);
});

Template.cuerpo.onCreated(function appBodyOnCreated() {
  this.subscribe("cuerpo");
});

Template.cuerpo.helpers({
	connected() {
    if (showConnectionIssue.get()) {
      return Meteor.status().connected;
    }

    return true;
  },
});

in my html have this:

{{#unless connected}}
        <div class="notifications">
          <div class="notification">
            <span class="icon-sync"></span>
            <div class="meta">
              <div class="title-notification">
                {{_ 'layouts.appBody.tryingToConnect'}}
              </div>
              <div class="description">
                {{_ 'layouts.appBody.connectionIssue'}}
              </div>
            </div>
          </div>
        </div>
      {{/unless}}

I can’t see the message as in the example “all”, but it still doesn’t work for me
thanks for your help.!

1 Like
2

Can you link to the example, please?

What I see there is that even though you are trying to simulate bad connection, Meteor.status().connected is still going to return true unless it actually isn’t connected to the Meteor server, so your entire if statement there is pointless. Instead just return Meteor.status().connected and you’ll get the correct behavior.
The best way to test this is to start Meteor up, navigate to the place where this is and then turn off Meteor. The client should still keep going and this time display what ever you want to display when not connected to Meteor server.

API docs for status

This is my React Component for this functionality (I’ll have to update it functional component soon):

/* Throws a notice when you are offline
 * Adapted from: https://github.com/ReactTraining/react-network
 */
import React from 'react'
import * as PropTypes from 'prop-types'
import styled from 'styled-components'
import { FormattedMessage } from 'react-intl'
import { compose } from 'recompose'
import { withTracker } from 'meteor/react-meteor-data'
import { Meteor } from 'meteor/meteor'

export class Network extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      online: window.navigator.onLine
    }
  }

  componentDidMount () {
    window.addEventListener('offline', this.handleChange)
    window.addEventListener('online', this.handleChange)
  }

  componentWillUnmount () {
    window.removeEventListener('offline', this.handleChange)
    window.removeEventListener('online', this.handleChange)
  }

  handleChange = () => {
    const online = window.navigator.onLine
    this.setState({ online })
  };

  render () {
    const { className, status } = this.props
    const { online } = this.state
    const offline = (
      <div className={className}>
        <FormattedMessage id='common.offlineStatus' defaultMessage='You are offline.' />
      </div>
    )
    if (!online) return offline

    // account for Meteor status
    if (!status.connected) {
      switch (status.status) {
        case 'waiting':
        case 'connecting':
          return (
            <div className={className}>
              <FormattedMessage
                id='common.statusConnecting'
                defaultMessage='Attempting to connect to the server...'
                values={{ count: status.retryCount }}
              />
            </div>
          )
        case 'failed':
          return (
            <div className={className}>
              <FormattedMessage id='common.statusFailed' defaultMessage='Failed to connect to the server.' />
            </div>
          )
        case 'offline':
          return offline
        default:
          // online
          return ''
      }
    }
    return ''
  }
}

Network.propTypes = {
  status: PropTypes.shape({
    connected: PropTypes.bool,
    status: PropTypes.oneOf(['connected', 'connecting', 'failed', 'waiting', 'offline']),
    retryCount: PropTypes.number,
    retryTime: PropTypes.number,
    reason: PropTypes.string
  }),
  className: PropTypes.string
}

const NetworkStatus = styled(Network)`
  background-color: #b71c1c;
  color: #ffffff;
  position: fixed;
  bottom: 0;
  text-align: center;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  width: 100%;
  z-index: 9999;
`

export default compose(
  withTracker(() => {
    return { status: Meteor.status() }
  })
)(NetworkStatus)
2 Likes
3

Also, you can manually disconnect/reconnect by issuing the following in the browser console

Meteor.disconnect()
Meteor.reconnect()
2 Likes
4

@jamgold with this I saved a lot of testing time, thanks

5

I found a simpler way to use Meteor.status in my project, I couldn’t get the “example all meteor guide” code to work, but it still served as my guide,
i’m use:
path: /imports/startup/client/index.js

const CONNECTION_ISSUE_TIMEOUT = 5000;
const showConnectionIssue = new ReactiveVar(false);
Meteor.startup(() => {
  setTimeout(() => {
    showConnectionIssue.set(true);
  }, CONNECTION_ISSUE_TIMEOUT);
});
Template.registerHelper('desconectado',function(){
    if (showConnectionIssue.get()) {
      return Meteor.status().connected;
    }
    return true;
});

html body:

{{#unless desconectado}}
  {{> notify}}
{{/unless}}

It may not be the most professional but it works for me :laughing: and as always I hope this works for other people :+1:.