बाहरी इंटरनेट कनेक्टिविटी के आधार पर गतिशील रूप से स्थिति बदलें - प्रतिक्रिया (ऑफ़लाइन / ऑनलाइन)

Question

मेरे पास एक प्रतिक्रिया घटक है, जिसमें इंटरनेट कनेक्टिविटी की उपलब्धता ध्वज शामिल है। यूआई तत्वों को राज्य वास्तविक समय के अनुसार गतिशील रूप से बदलना होगा। इसके अलावा, फ़ंक्शन ध्वज के परिवर्तनों के साथ अलग तरह से व्यवहार करते हैं।

मेरा वर्तमान कार्यान्वयन प्रत्येक सेकंड के अंतराल और अद्यतन स्थिति के अनुसार एक्सियो का उपयोग करके दूरस्थ एपीआई का चुनाव करता है। मैं न्यूनतम कम्प्यूटेशनल लागत के साथ राज्य की 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 से कनेक्ट हो सकता है जिसमें बाहरी कनेक्शन नहीं है। तो, यह ऑफ़लाइन माना जाता है। यदि ऑनलाइन और केवल तभी डिवाइस का उपयोग बाहरी इंटरनेट संसाधनों तक किया जाता है, तो कंसीडर ऑनलाइन हैं ।

Comments

क्या आपको यह जानना होगा कि आप ऑफ़लाइन हैं या ऑनलाइन? या क्या इंटरनेट कनेक्टिविटी?

— tudor.gerprise

हाँ। मूल रूप से ऑनलाइन या ऑफलाइन।

— निलंका मनोज

क्या आप API को बदल सकते हैं ताकि यह एक वेबसोकेट कनेक्शन को उजागर करे?

— येडजो

Answer 1

विधि एक: विरासत ब्राउज़र API का उपयोग करना - Navigator.onLine

ब्राउज़र की ऑनलाइन स्थिति लौटाता है। संपत्ति एक बूलियन मान लौटाती है, जिसमें सही अर्थ ऑनलाइन और गलत अर्थ ऑफ़लाइन होता है। जब भी नेटवर्क से कनेक्ट करने की ब्राउज़र की क्षमता में बदलाव होता है, तो संपत्ति अपडेट भेजती है। अद्यतन तब होता है जब उपयोगकर्ता लिंक का अनुसरण करता है या जब कोई स्क्रिप्ट दूरस्थ पृष्ठ का अनुरोध करती है। उदाहरण के लिए, उपयोगकर्ता द्वारा इंटरनेट कनेक्शन खोने के तुरंत बाद उपयोगकर्ता द्वारा लिंक क्लिक करने पर संपत्ति झूठी वापस आनी चाहिए।

आप इसे अपने घटक जीवनचक्र में जोड़ सकते हैं:

Chrome देव टूल का उपयोग करके नीचे दिए गए कोड के साथ खेलें - नेटवर्क टैब के तहत "ऑनलाइन" को "ऑफ़लाइन" पर स्विच करें।

class App extends React.PureComponent {
  state = { online: window.navigator.onLine }
  
  componentDidMount() {
    window.addEventListener('offline', this.handleNetworkChange);
    window.addEventListener('online', this.handleNetworkChange);
  }
  
  componentWillUnmount() {
    window.removeEventListener('offline', this.handleNetworkChange);
    window.removeEventListener('online', this.handleNetworkChange);
  }
  
  handleNetworkChange = () => {
    this.setState({ online: window.navigator.onLine });
  }
  
  render() {
    return (
      <div>
       { this.state.online ? 'you\'re online' : 'you\'re offline' }
      </div>
    );
  }
}

ReactDOM.render(
  <App />
, document.querySelector('#app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

---

हालाँकि, मुझे लगता है कि यह वह नहीं है जो आप चाहते हैं, आप एक वास्तविक समय कनेक्शन सत्यापनकर्ता चाहते थे ।

विधि दो: इसका उपयोग करके इंटरनेट कनेक्शन की जाँच करना

यदि केवल बाहरी इंटरनेट कनेक्टिविटी काम कर रही है, तो आप केवल ठोस पुष्टि प्राप्त कर सकते हैं। सवाल यह है कि लागत कम करने के लिए आपको किस सर्वर पर कॉल करना चाहिए?

इसके लिए इंटरनेट पर कई समाधान हैं, जो किसी भी समापन बिंदु पर त्वरित 204 स्थिति के साथ प्रतिक्रिया करता है, जैसे कि:

• Google सर्वर पर कॉल करना (इसके लिए सबसे अधिक युद्ध-परीक्षण किया जा रहा है?)
• इसकी कैश्ड JQuery स्क्रिप्ट एंडपॉइंट को कॉल करना (भले ही सर्वर डाउन हो, तब भी आपको तब तक स्क्रिप्ट प्राप्त करने में सक्षम होना चाहिए जब तक आपके पास कनेक्शन है)
• स्थिर सर्वर से एक चित्र लाने का प्रयास करें (उदाहरण: https://ssl.gstatic.com/gb/images/v1_76783e20.png + date टाइमस्टैम्प कैशिंग रोकने के लिए)

IMO, यदि आप एक सर्वर पर इस रिएक्ट ऐप को चला रहे हैं, तो यह आपके अपने सर्वर पर कॉल करने के लिए सबसे अधिक समझ में आता है, आप /favicon.icoकनेक्शन की जांच करने के लिए अपने लोड करने के लिए अनुरोध कर सकते हैं ।

(अपने सर्वर को बुलाने की) यह विचार इस तरह के रूप में कई पुस्तकालयों, द्वारा लागू किया गया है Offline, is-reachableऔर व्यापक रूप से समुदाय भर में प्रयोग किया जाता है। यदि आप सब कुछ अपने आप से लिखना नहीं चाहते हैं तो आप उनका उपयोग कर सकते हैं। (व्यक्तिगत रूप से मुझे is-reachableसरल होने के लिए एनपीएम पैकेज पसंद है ।)

उदाहरण:

import React from 'react';
import isReachable from 'is-reachable';

const URL = 'google.com:443';
const EVERY_SECOND = 1000;

export default class App extends React.PureComponent {
  _isMounted = true;

  state = { online: false }

  componentDidMount() {
    setInterval(async () => {
      const online = await isReachable(URL);

      if (this._isMounted) {
        this.setState({ online });
      }
    }, EVERY_SECOND);
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    return (
      <div>
       { this.state.online ? 'you\'re online' : 'you\'re offline' }
      </div>
    );
  }
}

मेरा मानना ​​है कि आपके पास जो वर्तमान में है वह पहले से ही ठीक है, बस सुनिश्चित करें कि यह सही समापन बिंदु कह रहा है।

---

इसी तरह के सवाल:

• इंटरनेट कनेक्शन का पता लगाना ऑफ़लाइन है?
• React Redux ऐप में नेटवर्क कनेक्शन का पता लगाएं - यदि ऑफ़लाइन है, तो उपयोगकर्ता से घटक छुपाएं
• https://stackoverflow.com/Questions/3181080/How-To-Detect-Online-Offline-Event-Cross-Browser

Answer 2

आप 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.");
});

Comments

लैन को मेरी स्थिति में बाहरी रूप से काट दिया जा सकता है :(

— नीलंका मनोज

Answer 3

एक कस्टम हुक सेट करें

ऑनलाइन, ऑफ़लाइन घटनाओं के साथ एक हुक सेट करें। फिर एक स्थिति को अपडेट करें और उसे वापस लौटाएं। इस तरह से आप आयात के साथ इसे अपने ऐप में कहीं भी उपयोग कर सकते हैं। सुनिश्चित करें कि आप वापसी फ़ंक्शन के साथ सफाई करते हैं। यदि आप नहीं करते हैं, तो आप हर बार हुक माउंट का उपयोग करते हुए अधिक से अधिक इवेंट श्रोताओं को जोड़ेंगे।

const onlineHook = () => {
  const {isOnline, setOnline} = React.useState();

  React.useEffect(() => {
    const goOnline = function(event){
      setOnline(true);
    });
    const goOffline = function(event){
      setOnline(false);
    });

    window.addEventListener('offline', goOffline);
    window.addEventListener('online', goOnline);

    return () => {
      window.removeEventListener('offline', goOffline);
      window.removeEventListener('online', goOnline);      
    }
  }, [])

  return isOnline
}

इसका उपयोग करने के लिए बस उपरोक्त हुक को आयात करें और इसे इस तरह से कॉल करें।

const isOnline = onlineHook(); // true if online, false if not

Comments

लैन को मेरी स्थिति में बाहरी रूप से काट दिया जा सकता है :(

— नीलंका मनोज

यदि आप फायरबेस जैसी सॉकेटेड सेवा का उपयोग करते हैं, तो आप एक अंतर्निहित घटना का उपयोग कर सकते हैं जो इंटरनेट कनेक्टिविटी को कैप्चर करता है।

— जो लॉयड

क्या आप सुझाए गए दृष्टिकोण के लिए कोड का एक बुनियादी कंकाल प्रदान कर सकते हैं।

— निलंका मनोज

Answer 4

आप सभी सबकुछ के बीच साझा करने के लिए एक घटक बना सकते हैं

उपयोग किया गया:

import React, { useState, useEffect } from "react";

export default function NetworkChecker() {

  const [networkStatus, setNetworkStatus] = useState(true)

  useEffect(() => {
    window.addEventListener('offline', (event) => {
      setNetworkStatus(false)
    });

    window.addEventListener('online', (event) => {
      setNetworkStatus(true)
    });

    return function cleanupListener() {
       window.removeEventListener('online',  setNetworkStatus(true))
       window.removeEventListener('offline', setNetworkStatus(false))
     }

  },[])

  if (networkStatus) {
    return <div className={"alert-success"}>Online</div>
  } else {
    return <div className={"alert-danger"}>Offline</div>
  }

}

Comments

आप ईवेंट श्रोता को निकालना भूल गए?

— गौतमीत