Руководство по обработке отключения Интернета в приложениях React.
Фото Томаса Дженсена на Unsplash
Вы когда-нибудь пытались нажать кнопку или получить доступ к службе в любом приложении много раз, не получая никакой обратной связи?
Это может оставить вас без ответа на такие вопросы, как «обрабатывается ли мой запрос?», «сервер приложений не работает?» и т. д., а иногда это может быть связано с потерей подключения к Интернету. Это может снизить уровень удержания пользователей в вашем приложении, если не уделять должного внимания интерактивности и тому, как она влияет на ваших пользователей.
Эта статья предоставит вам средства для обработки изменений интернет-соединения ваших пользователей в вашем приложении.
Что мы будем строить
Веб-страница в React, на которой отображается список изображений.
Что тебе нужно знать
- Знание компонентов React.
- Знакомство с ES6.
Давайте погрузимся прямо в.
Мы будем использовать пакет create-react-app для начальной загрузки нашего приложения.
Откройте терминал и запустите:
Bootstrap your application using:
$ npx create-react-app name-of-your-application (Do this if you have Node.js installed).
Если у вас не установлен Node.js, ознакомьтесь с Платформа узла для руководства по установке.
Когда это будет сделано, откройте только что созданную папку в выбранном вами редакторе. У вас должна получиться следующая структура папок.
Изображение 1: Структура папок после начальной загрузки вашего приложения с помощью create-react-app.
Создайте папку внутри src (я назвал свою «помощник») и добавьте файл с именем изображения.js. Этот файл будет содержать массив изображений, которые мы хотим отобразить на веб-странице.
Добавьте в созданный файл образа следующее:
const images = [
{
id: 1,
image: '
},
{
id: 2,
image: '
},
{
id: 3,
image: '
},
{
id: 4,
image: '
},
{
id: 5,
image: '
},
{
id: 6,
image: '
},
{
id: 7,
image: '
},
{
id: 8,
image: '
},
];
export default images;
Изображение 2: Массив изображений для отображения.
Замените содержимое App.css следующими стилями:
.app {
text-align: center;
}
.app p {
font-size: 30px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.app .page-title {
font-size: 30px;
}
.internet-error {
height: 60px;
background: #ff8100;
margin-top: 0;
font-size: 20px;
}
.internet-error p {
font-size: 25px;
line-height: 60px;
color: #fff;
margin: 0;
}
.image-list {
display: grid;
grid-gap: 40px;
grid-template-columns: repeat(4, 1fr);
width: 1150px;
margin: 100px auto;
}
.image:hover {
animation: animate-image 0.5s;
animation-iteration-count: infinite;
}
@keyframes animate-image {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-1px, -2px) rotate(0deg); }
}
Изображение 3: стили CSS для App.css.
Сделайте то же самое с файлом index.css:
body {
margin: 0;
padding: 0;
font-family: Georgia, 'Times New Roman', Times, serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
Изображение 4: стили CSS для index.css.
Концепция компонентов более высокого порядка позволяет нам создавать абстракции над компонентом, который можно легко повторно использовать на вашей платформе. Для краткости я бы посоветовал вам ознакомиться с этой статьей о HOC.
Создайте еще одну папку в папке src с именем Hoc и файл с именем NetworkDetector.jsx внутри нее.
Вставьте в файл следующее содержимое:
import React, { Component } from 'react';
export default function (ComposedComponent) {
class NetworkDetector extends Component {
state = {
isDisconnected: false
}
componentDidMount() {
this.handleConnectionChange();
window.addEventListener('online', this.handleConnectionChange);
window.addEventListener('offline', this.handleConnectionChange);
}
componentWillUnmount() {
window.removeEventListener('online', this.handleConnectionChange);
window.removeEventListener('offline', this.handleConnectionChange);
}
handleConnectionChange = () => {
const condition = navigator.onLine ? 'online' : 'offline';
if (condition === 'online') {
const webPing = setInterval(
() => {
fetch('//google.com', {
mode: 'no-cors',
})
.then(() => {
this.setState({ isDisconnected: false }, () => {
return clearInterval(webPing)
});
}).catch(() => this.setState({ isDisconnected: true }) )
}, 2000);
return;
}
return this.setState({ isDisconnected: true });
}
render() {
const { isDisconnected } = this.state;
return (
<div>
{ isDisconnected && (<div className="internet-error">
<p>Internet connection lost</p>
</div>)
}
<ComposedComponent {...this.props} />
</div>
);
}
}
return NetworkDetector;
}
Изображение 5: Сетевой детектор Hoc —
В компоненте выше у нас есть дескрипторConnectionChange метод, который обновляет isDisconnected свойство в нашем локальном состоянии в результате изменения в Javascript «navigator.onLine» свойство, которое возвращает логическое значение. Это логическое значение изменяется и обновляется соответственно в зависимости от способности браузера получать любой ресурс в Интернете. окно.онлайн а также окно.офлайн прослушиватель событий замечает это изменение и запускает метод handleConnectionChange.
навигатор.онлайн свойство не является надежным, и одна проблема заключается в том, что машина может быть подключена к сети или виртуальной сети и не иметь доступа в Интернет.
Как это было решено?
Добавлена дополнительная проверка если (условие === ‘онлайн’) в дескрипторConnectionChange метод, который отправляет запрос на google.com с интервалом в две секунды. Эта проверка помогает убедиться, что браузер не только находится в сети, но и имеет доступ в Интернет. setInterval также очищается с помощью ClearInterval метод после подтверждения онлайн-статуса, чтобы избежать отправки другого запроса.
Почему стоит выбрать google.com?
Причина отправки запроса на получение на google.com вместо любой случайной платформы заключается в том, что у нее большое время безотказной работы. Идея заключается в том, чтобы всегда отправлять запрос в службу, которая всегда онлайн. Если у вас есть сервер, вы можете создать выделенный маршрут, который может заменить домен google.com, но вы должны быть уверены, что у него будет потрясающее время безотказной работы.
Замените содержимое App.js следующим:
import React, { Component } from 'react';
import './App.css';
import images from './helper/images'
import NetworkDetector from './Hoc/NetworkDetector';
class App extends Component {
renderImage() {
return (
<div className="image-list">
{images.map(data => <img src={data.image} alt="random" key={data.id} className="image" />)}
</div>
)
}
render() {
return (
<div className="App">
<p className="page-title">The iDrag Imagery</p>
{this.renderImage()}
</div>
);
}
}
export default NetworkDetector(App);
Изображение 6: Содержимое компонента App.js,
Компонент App.js был ограничен и заключен в Сетевойдетектор HOC, делая NetworkDetector (приложение). Если вы не хотите оборачивать свои HOC таким образом, вы можете добиться аналогичных результатов, обернув HOC в объявление маршрута при использовании реакция-маршрутизатор-дом упаковка.
Gif: вывод в браузере при переключении онлайн-статуса веб-страницы
Краткий обзор того, что мы сделали
- Мы изменили содержимое App.js для отображения списка изображений.
- Мы создали NetworkDetector HOC для прослушивания изменений в подключении к Интернету и отображения уведомлений.
- Мы также внесли изменения в App.cssа также index.css для правильного размещения контента на нашей веб-странице.
Что можно улучшить?
Настройте уведомление так, чтобы оно отображалось на любой странице, а не оставалось поверх всех ваших веб-страниц, которые было бы невозможно увидеть, если бы вы не были в верхней части страницы. Этого можно добиться с помощью CSS или любых пакетов предупреждений, таких как милая тревога, тосттак далее.
Мы подошли к концу этой статьи, и я надеюсь, что она помогла пролить свет на обработку и передачу состояния интернет-соединения вашим пользователям. Спасибо за чтение, и, пожалуйста, оставьте комментарий, если у вас есть какие-либо вопросы или отзывы.
Не стесняйтесь просматривать кодовую базу на iDrag гитхаби я также открыт для любых ваших рекомендаций.
