বাহ্যিক ইন্টারনেট সংযোগের ভিত্তিতে গতিশীলভাবে রাষ্ট্র পরিবর্তন করুন - প্রতিক্রিয়া (অফলাইন / অনলাইন)

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} />;
  }
}

সম্পাদিত:

বাহ্যিক ইন্টারনেট সংযোগ সনাক্তকরণে সক্ষম একটি সন্ধানের জন্য অনুসন্ধান করা। ডিভাইসটি কোনও ল্যানের সাথে সংযোগ স্থাপন করতে পারে যার বাহ্যিক সংযোগ নেই। সুতরাং, এটি অফলাইন হিসাবে বিবেচিত হয়। অনলাইনে বিবেচনা করে কেবল এবং যদি ডিভাইসটির বাহ্যিক ইন্টারনেট সংস্থানগুলিতে অ্যাক্সেস থাকে।

Comments

আপনি অফলাইন বা অনলাইনে আছেন কিনা তা জানা দরকার? বা কোন ইন্টারনেট সংযোগ?

— tudor.gegely

হ্যাঁ। মূলত অনলাইন বা অফলাইন।

— নীলাঙ্কা মনোজ

আপনি কী এপিআই পরিবর্তন করতে পারবেন যাতে এটি একটি ওয়েবসকেট সংযোগটি প্রকাশ করে?

— ইয়াদেজো

Answer 1

পদ্ধতি এক: লিগ্যাসি ব্রাউজার এপিআই ব্যবহার করে - Navigator.onLine

ব্রাউজারের অনলাইন স্থিতি ফেরত দেয়। প্রকৃত অর্থ অনলাইন এবং মিথ্যা অর্থ অফলাইন সহ সম্পত্তিটি একটি বুলিয়ান মান দেয়। ব্রাউজারের নেটওয়ার্কের সাথে সংযোগ স্থাপনের ক্ষমতা পরিবর্তিত হলে সম্পত্তি আপডেটগুলি প্রেরণ করে। আপডেটটি তখন ঘটে যখন ব্যবহারকারী লিঙ্কগুলি অনুসরণ করে বা কোনও স্ক্রিপ্ট কোনও দূরবর্তী পৃষ্ঠার জন্য অনুরোধ করে। উদাহরণস্বরূপ, ব্যবহারকারীরা ইন্টারনেট সংযোগ হারানোর পরে শীঘ্রই লিঙ্কগুলিতে ক্লিক করলে সম্পত্তিটি মিথ্যা প্রত্যাবর্তন করা উচিত।

আপনি এটি আপনার উপাদান লাইফসাইলে যুক্ত করতে পারেন:

ক্রোম দেব সরঞ্জামগুলি ব্যবহার করে নীচের কোডটি খেলুন - নেটওয়ার্ক ট্যাবটির নীচে "অনলাইন "টিকে" অফলাইন "এ স্যুইচ করুন।

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>

---

তবে, আমি মনে করি এটি আপনি যা চান তা নয়, আপনি একটি রিয়েল-টাইম সংযোগ যাচাইকারক চেয়েছিলেন ।

পদ্ধতি দুটি: এটি ব্যবহার করে ইন্টারনেট সংযোগ পরীক্ষা করা হচ্ছে

বাহ্যিক ইন্টারনেট সংযোগ কাজ করছে তা যদি আপনি ব্যবহার করেন তবে একমাত্র দৃ confir় নিশ্চিতকরণ আপনি পেতে পারেন। প্রশ্নটি হ'ল খরচটি হ্রাস করার জন্য আপনাকে কোন সার্ভারে কল করা উচিত?

এটির জন্য ইন্টারনেটে অনেকগুলি সমাধান রয়েছে, দ্রুত কোনও 204 স্থিতির প্রতিক্রিয়া জানানো কোনও শেষ পয়েন্ট সঠিক, যেমন:

• গুগল সার্ভারে কল করা (এটি সবচেয়ে যুদ্ধ-পরীক্ষিত (?))
• এর ক্যাশেড জিকুয়ারি স্ক্রিপ্টের শেষ পয়েন্টকে কল করা হচ্ছে (সুতরাং সার্ভারটি ডাউন থাকলেও, আপনি যতক্ষণ না কোনও সংযোগ থাকবে ততক্ষণ আপনি স্ক্রিপ্টটি পেতে সক্ষম হবেন)
• কোনও স্থিতিশীল সার্ভার থেকে চিত্র আনার চেষ্টা করুন (যেমন: https://ssl.gstatic.com/gb/images/v1_76783e20.png + ক্যাশে প্রতিরোধের জন্য তারিখের টাইমস্ট্যাম্প)

আইএমও, আপনি যদি কোনও সার্ভারে এই প্রতিক্রিয়া অ্যাপটি চালাচ্ছেন তবে এটি আপনার নিজের সার্ভারে কল করার ক্ষেত্রে সবচেয়ে তাত্পর্যপূর্ণ হয়, /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>
    );
  }
}

আমি বিশ্বাস করি আপনার কাছে বর্তমানে যা আছে তা ইতিমধ্যে ঠিক আছে, কেবলমাত্র নিশ্চিত করুন যে এটি ডানটি শেষ পয়েন্টটি কল করছে।

---

অনুরূপ এসও প্রশ্ন:

• ইন্টারনেট সংযোগটি অফলাইন রয়েছে তা সনাক্ত করুন?
• রিডাক্ট রেডাক্স অ্যাপ্লিকেশনটিতে নেটওয়ার্ক সংযোগ সনাক্ত করুন - অফলাইন থাকলে ব্যবহারকারী থেকে উপাদান লুকান
• 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

কাস্টম হুক সেটআপ করুন

অনলাইন, অফলাইন ইভেন্টগুলির সাথে একটি হুক সেটআপ করুন। তারপরে একটি রাষ্ট্র আপডেট করুন এবং এটিকে ফিরিয়ে দিন। এইভাবে আপনি এটিকে আমদানি করে আপনার অ্যাপের যে কোনও জায়গায় ব্যবহার করতে পারেন। আপনি ফিরে ফাংশন দিয়ে পরিষ্কার করেছেন তা নিশ্চিত করুন with আপনি যদি তা না করেন তবে প্রতিবার হুক মাউন্টগুলি ব্যবহার করে একটি উপাদান আরও বেশি সংখ্যক ইভেন্ট শ্রোতাদের যুক্ত করবেন।

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

আপনি ইভেন্ট শ্রোতা অপসারণ করতে ভুলে গেছেন?

— গৌতমিত