Автор оригинала: Samson Negedu.
Фото Томаса Дженсена на Unsplash
Вы когда-нибудь пробовали нажать на кнопку или получить доступ к службе в любом приложении много раз, не получив никаких отзывов?
Таким могла оставить вас с некоторыми вопросами без ответов, таких как «моя просьба обрабатывается?», – это сервер приложений вниз? », Иначе и т. Д. И иногда это может быть связано с течением подключения к Интернету. Это может снизить уровень удержания пользователей в вашем приложении, если надлежащее внимание не уделяется интерактивности и как оно влияет на ваших пользователей.
Эта статья предоставит вам средства для обработки изменений в интернет-соединении ваших пользователей в вашем приложении.
Что мы будем построить Веб-страница в реакции, которая отображает список изображений.
Что тебе нужно знать
- Знакомство с реактивными компонентами.
- Знакомство с 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, оформить заказ Узел платформа Для руководства по установке.
Когда это сделано, откройте папку, которую вы только что создали в вашем редакторе выбора. У вас должна быть следующая структура папки.
Image 1: Структура папки После загрузки вашего приложения с приложением Create-raction.
Создайте папку внутри SRC (я позвонил по моему «Helper» ) и добавить файл с именем images.js Отказ Этот файл будет удерживать массив изображений, которые мы хотим рендерировать на веб-странице. Добавьте следующее в файл изображения:
const images = [
{
id: 1,
image: 'https://picsum.photos/200/300/?random',
},
{
id: 2,
image: 'https://picsum.photos/250/300/?random',
},
{
id: 3,
image: 'https://picsum.photos/210/300/?random',
},
{
id: 4,
image: 'https://picsum.photos/240/300/?random',
},
{
id: 5,
image: 'https://picsum.photos/260/300/?random',
},
{
id: 6,
image: 'https://picsum.photos/260/300/?random',
},
{
id: 7,
image: 'https://picsum.photos/250/300/?random',
},
{
id: 8,
image: 'https://picsum.photos/260/300/?random',
},
];
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.
Концепция компонентов высшего порядка дает нам создание абстракций над компонентом, который можно легко использовать на вашей платформе. Ради краткости, я бы предложил проверить эту статью, https://alligator.io/react/higher-ords-components/на HOCS.
Создайте другую папку в папке 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 (
{ isDisconnected && (
Internet connection lost
)
}
Изображение 5: сетевой детектор HOC – https://gist.github.com/9b2b1a4ee0fadea9b37927b68c1d74ce.git
В компоненте выше у нас есть HandleConnectionChange Метод, который обновляет ISDisconned Собственность в нашем местном государстве в результате изменения в JavaScript “Navigator.online” Собственность, которая возвращает логию. Этот логический регион изменен и обновляется соответственно на основе возможности браузера для получения любого ресурса в Интернете. window.online и окно. Offline Слушатель событий замечает это изменение и запускает метод HandleConnectionChange. Navigator.online Собственность не является надежной, и одна проблема заключается в том, что машина может быть подключена к сети или виртуальному и не имеет доступа в Интернет.
Как это было решено? Дополнительная проверка была добавлена в Если (условие) В HandleConnectionChange Способ, который отправляет запрос на Google.com с интервалом двух секунд. Эта проверка помогает убедиться, что браузер не только в Интернете, но имеет доступ в Интернет. Setinterval также очищен с использованием ClearInterval Способ После подтверждения онлайн-статуса, чтобы избежать отправки другого запроса.
Почему выбрать Google.com? Причина отправки запроса на Get 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 (
{images.map(data => 
)}
)
}
render() {
return (
The iDrag Imagery
{this.renderImage()}
);
}
}
export default NetworkDetector(App);
Изображение 6: Содержание компонента App.js, https://gist.github.com/6409fd53f6357a153d8fdbd7d2294cfd.git
Компонент App.js был ограничен и завернутый с NetworkDetector HOC, делая NetworkDetector (приложение) Отказ Если вы не хотите обернуть свой HOC так, вы можете достичь аналогичных результатов, обернув HOC в объявлении вашего маршрута при использовании React-Router-DOM упаковка.
GIF: вывод в браузере, когда онлайн-статус веб-страницы переключен
Быстрое подножение того, что мы сделали
- Мы изменили содержание App.js сделать список изображений.
- Мы создали Networkdetector Hoc Чтобы послушать изменения в подключении к Интернету и отобразить уведомление.
- Мы также сделали модификации App.csss и index.csss Чтобы правильно организовать содержание на нашей веб-странице.
Что можно улучшить? Настройте уведомление, чтобы поплавок на любой странице, а не на пребывании всех ваших веб-страниц, которые были бы невозможны, если вы не в верхней части страницы. Это может быть достигнуто с использованием CSS или любых пакетов оповещений, таких как Sweedalert , Тоадро , так далее.
Мы пришли к концу этой статьи, и я надеюсь, что это помогло пролить свет в обработку и ретрансляцию статуса подключения к Интернету для ваших пользователей. Спасибо за чтение, и, пожалуйста, оставьте комментарий, если вы какой-либо вопрос или отзыв.
Не стесняйтесь пройти через кодовую базу в idrag github И я также открыт для любых рекомендаций, которые вы можете иметь.