javascript - 根据外部互联网连接动态更改状态 - React(离线/在线)

Question

我有一个 React 组件，其中包括互联网连接的可用性标志。 UI 元素必须根据状态实时动态更改。此外，随着标志的变化，函数的行为也会有所不同。

我当前的实现使用 Axios 每隔一秒使用间隔轮询远程 API，并相应地更新状态。我正在寻找一种更细粒度和更有效的方法来完成此任务，以最小的计算成本消除 1 秒的状态错误。 当且仅当设备具有外部互联网连接

时才被视为在线

当前实现:

class Container extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isOnline: false
    };
    this.webAPI = new WebAPI(); //Axios wrapper
  }

  componentDidMount() {
    setInterval(() => {
      this.webAPI.poll(success => this.setState({ isOnline: success });
    }, 1000);
  }

  render() {
    return <ChildComponent isOnline={this.state.isOnline} />;
  }
}

已编辑:

正在寻找能够检测外部互联网连接的解决方案。该设备可以连接到没有外部连接的 LAN。因此，它被认为是离线的。 当且仅当设备可以访问外部互联网资源时才考虑在线。

Answer 1

您可以使用https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event

window.addEventListener('offline', (event) => {
    console.log("The network connection has been lost.");
});

和https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event用于检查您何时恢复在线

window.addEventListener('online', (event) => {
    console.log("You are now connected to the network.");
});