পদ্ধতি এক: লিগ্যাসি ব্রাউজার এপিআই ব্যবহার করে - 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>
);
}
}
আমি বিশ্বাস করি আপনার কাছে বর্তমানে যা আছে তা ইতিমধ্যে ঠিক আছে, কেবলমাত্র নিশ্চিত করুন যে এটি ডানটি শেষ পয়েন্টটি কল করছে।
অনুরূপ এসও প্রশ্ন: