DEV Community: Andrey Smirnov

Используем Throttle и Debounce в React

Andrey Smirnov — Sat, 28 May 2022 12:00:34 +0000

Обзор

Throttle и Debounce решают задачи оптимизации.

Throttle - пропускает вызовы функции с определённой периодичностью.
Debounce - откладывает вызов функции до того момента, когда с последнего вызова пройдёт определённое количество времени.

Throttle & Debounce схема:

Примеры использования Throttle:

1) Если пользователь изменяет размер окна браузера и нам необходимо изменять содержимое сайта.
Без оптимизации происходит следующее. При каждом событии изменения размера окна вызывается обработчик события изменения размера окна. Таким образом, если пользователь, например, изменяет размер окна в течение 10 секунд, то может произойти 100, 200 и т.д. событий, которые нам нужно обработать.
Throttle позволяет нам задать временной интервал, чаще которого обработчик события вызываться не будет. Если мы, используя Throttle, укажем интервал в 1 секунду, то кол-во выполнения обработчиков события изменения размера окна будет равно 10.

2) Показ пользователю количества процентов прокрутки страницы. При прокрутке страницы пользователем возникают события scroll, которые нам необходимо обработать. С помощью throttle мы можем уменьшать кол-во обрабатываемых событий прокрутки пользователем страницы, задав временной интервал.

Примеры использования Debounce:

1) Обработка данных поискового запроса пользователя.
При введении пользователем поискового запроса, ему предлагаются варианты поиска. Это происходит следующим образом.
При изменении вводимого пользователем текста, на сервер передаётся запрос, в котором мы передаем уже напечатанные символы. Затем получаем ответ от сервера с возможными вариантами поискового запроса и показываем их пользователю.
При каждом изменении текста пользователем, вызывается обработчик события, в котором делается запрос на сервер.
Для оптимизации количества отправляемых запросов на сервер используем Debounce.
При изменении текста пользователем, применение Debounce позволяет нам создать таймер, например на 1 секунду. Если 1 секунда проходит, и пользователь не изменил текст второй раз, то вызывается обработчик события и выполняется запрос к серверу. Если пользователь изменяет текст второй раз за 1 секунду, то 1-й таймер сбрасывается и создаётся новый таймер опять на 1 секунду.
Таким образом, если пользователь редактирует поисковый текст быстро (быстрее 1 секунды), то запрос отправится на сервер только один раз, после того, как пользователь прекратит печатать.

2) Отправка данных аналитики на сервер. Например, пользователь водит мышкой по сайту, мы записываем координаты мышки в массив, после чего Debounce позволяет отправить информацию о перемещении мышки клиента на сервер только после того, как клиент перестаёт двигать мышкой.

Итак, в этой статье я покажу, как использовать Throttle и Debounce в React приложении.

Шаг 1 - Шаблон приложения

Создадим шаблон приложения с помощью create-react-app и запустим его:

npx create-react-app throttle-debounce
cd throttle-debounce
npm start

Заменяем содержимое файла App.css своими стилями:

body {
  display: flex;
  justify-content: center;
  width: 100%;
}
h1 {
  text-align: center;
  margin: 0.5rem 0;
}
.l-scroll {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 380px;
  height: 200px;
  margin-top: 0.5rem;
}
.scroll-content {
  width: 100%;
  background-color: bisque;
  padding: 0 1rem;
}
.l-scroll::-webkit-scrollbar {
  width: 10px;
  height: 8px;
  background-color: darkturquoise;
}
.l-scroll::-webkit-scrollbar-thumb {
  background-color: blueviolet;
}

Заменим содержимое файла App.js на шаблон нашего приложения:

import './App.css';
import { useMemo } from 'react';

// Прокручиваемый контент большой высоты
const TallContent = () => {
  const dataElements = useMemo(() =>
    Array.from(
      {length: 200},
      (_, i) => <div key={i}>Line: {i+1}</div>
  ), []);

  return <>{dataElements}</>;
};

const App = () => {
  return (
    <>
      <h1>Throttle & Debounce</h1>
      <div className="l-scroll">
        <div className="scroll-content">
          <TallContent />
        </div>
      </div>
    </>
  );
};

export default App;

Шаблон приложения готов, приступим ко второму шагу - обычный обработчик событий прокрутки.

Шаг 2 - Обычный обработчик событий

Здесь мы добавим обычный обработчик для scroll событий и посчитаем количество вызовов этого обработчика при прокрутке пользователем элемента страницы.

Добавим состояние количества вывозов обработчика событий в App компонент:

// В начале файла
import { useState, useMemo } from 'react';
// Внутри компонента App
const [scrollHandleCount, setScrollHandleCount] = useState(0);

Затем добавим обработчик события прокрутки, для этого добавим аттрибут onScroll на элемент под h1 заголовком:

// Было
<div className="l-scroll">
  ...
</div>

// Стало
<div className="l-scroll" onScroll={handleScroll}>
  ...
</div>

Также добавим функцию обработки события handleScroll в компонент App:

const handleScroll = () => {
  handleUsualScroll();
};

Внутри функции handleScroll мы поместили функцию в которой будет происходить обработка обычного события. Добавим эту функцию в наш App компонент:

const handleUsualScroll = () => {
  setScrollHandleCount(prevState => ++prevState);
};

Осталось только показать состояние счётчика пользователю, для этого добавим строку кода под h1 заголовком:

<span>
  Usual scroll handle count: {scrollHandleCount}
</span>
<br />

Теперь, при прокрутке элемента на странице, мы должны увидеть кол-во вызовов функции handleUsualScroll().

Полный код компонента App на данный момент:

const App = () => {
  const [scrollHandleCount, setScrollHandleCount] = useState(0);

  const handleUsualScroll = () => {
    setScrollHandleCount(prevState => ++prevState);
  };
  const handleScroll = () => {
    handleUsualScroll();
  };

  return (
    <>
      <h1>Throttle & Debounce</h1>
      <span>
        Usual scroll handle count: {scrollHandleCount}
      </span>
      <br />
      <div className="l-scroll" onScroll={handleScroll}>
        <div className="scroll-content">
          <TallContent />
        </div>
      </div>
    </>
  );
};

export default App;

Шаг 3 - Обработчик событий с Throttle

Throttle обработчик событий в нашем случае должен вызывать увеличение счётчика scrollThrottleHandleCount, при этом пропускать вызовы увеличения счётчика с определённой периодичностью.
Для реализации задуманного нам потребуется таймер при запуске которого состояние Throlle переходит в In progress. При этом если состояние In Progerss, то обработка событий пользователя (прокрутка элемента страницы) пропускается.
Как только таймер срабатывает, состояние Throttle переходив в Not in progress, а значит наш обработчик будет снова обрабатывать события пользователя. Таким образом происходит пропуск событий пользователя с заданным интервалом времени.
Реализуем вышеописанное:

// Добавим useRef для хранения состояния inProgress
import { useState, useRef, useMemo, useEffect } from 'react';

Далее в компоненте App добавим состояние счётчика вызовов обработчика событий с Throttle и ref для хранения состояния inProgress:

// Кол-во вызовов обработчика событий с Throttle
const [
  scrollThrottleHandleCount,
  setScrollThrottleHandleCount
] = useState(0);
// Храним состояние in progress
const throttleInProgress = useRef();
// Храним id таймера для его удаления
// после размонтирования компонента
const throttleTimerId = useRef();

Здесь важно отменить, что throttleInProgress - часть сайд эффекта связанного с таймером, а значит, состояние мы будем хранить в ref объекте, так как useRef возвращает объект существующий на протяжении всего жизненного цикла компонента, при этом не происходит лишнего рендеринга компонента при изменении свойства current объекта возвращаемого useRef, в отличии от useState.
Теперь добавим сам обработчик события с Throttle в App component:

const handleThrottleScroll = () => {
  // Если состояние inProgress - выходим из функции,
  // пропускаем обработку события 
  if(throttleInProgress.current) return;
  // Устанавливаем inProgress в true и запускаем таймер
  throttleInProgress.current = true;
  throttleTimerId.current = setTimeout(() => {
    // Увеличиваем состояние throttleHandleCount
    // на единицу
    setScrollThrottleHandleCount(prevState => ++prevState);
    // inProgress устанавливаем в false,
    // значит при следующем запуске
    // setTimeout снова сработает
    throttleInProgress.current = false;
  }, 500);
};

Осталось 2 простых действия: добавить отображение состояния счётчика с Throttle пользователю и добавить handleThrottleScroll() в handleScroll():

// После заголовка h1
<span>
  Throttle scroll handle count: {scrollThrottleHandleCount}
</span>

// В функцию handleScroll() после handleUsualScroll();
handleThrottleScroll();

В результате мы получим:

Обычный обработчик событий вызвал бизнес логику приложения 181 раз, а с Throttle всего 9.
Полный код компонента App с Throttle:

const App = () => {
  const [scrollHandleCount, setScrollHandleCount] = useState(0);
  const [
    scrollThrottleHandleCount,
    setScrollThrottleHandleCount
  ] = useState(0);
  const throttleInProgress = useRef(false);
  const throttleTimerId = useRef();

  useEffect(() => {
    // Отчистка таймера при размонтировании компонента
    return () => {
      if (throttleTimerId.current) {
        clearTimeout(throttleTimerId.current);
      }
    };
  }, []);

  const handleUsualScroll = () => {
    setScrollHandleCount(prevState => ++prevState);
  };
  const handleThrottleScroll = () => {
    if(throttleInProgress.current) return;
    throttleInProgress.current = true;
    throttleTimerId.current = setTimeout(() => {
      setScrollThrottleHandleCount(prevState => ++prevState);
      throttleInProgress.current = false;
    }, 500);
  };
  const handleScroll = () => {
    handleUsualScroll();
    handleThrottleScroll();
  };

  return (
    <>
      <h1>Throttle & Debounce</h1>
      <span>
        Usual scroll handle count: {scrollHandleCount}
      </span>
      <br />
      <span>
        Throttle scroll handle count: {scrollThrottleHandleCount}
      </span>
      <br />
      <div className="l-scroll" onScroll={handleScroll}>
        <div className="scroll-content">
          <TallContent />
        </div>
      </div>
    </>
  );
};

export default App;

Перейдём к заключительному шагу - реализуем Debounce обработчик событий.

Шаг 4 - Обработчик событий с Debounce

Debounce в нашем примере откладывает увеличение счётчика scrollDebounceHandleCount до того момента, когда с последнего вызова обработчика события пройдёт определённое количество времени.
Добавим состояние количества вызовов обработчика событий с Debounce, ref для хранения идентификатора таймера в App компонент:

const [
  scrollDebounceHandleCount,
  setScrollDebounceHandleCount
] = useState(0);
const debounceTimerIdRef = useRef();

Затем покажем количество scrollDebounceHandleCount пользователю и добавим наш метод handleDebounceScroll() в handleScroll():

// После h1
<span>
  Debound scroll handle count: {scrollDebounceHandleCount}
</span>
// В функцию handleScroll()
handleDebounceScroll();

Осталось написать саму функцию handleDebounceScroll:

const handleDebounceScroll = () => {
  // Если ID таймена установлено - сбрасываем таймер
  if(debounceTimerIdRef.current) {
    clearTimeout(debounceTimerIdRef.current);
  }
  // Запускаем таймер, возвращаемое ID таймера
  // записываем в debounceTimerIdRef
  debounceTimerIdRef.current = setTimeout(() => {
    // Вызываем увеличение счётчика кол-ва
    // выполнения бизнес логики приложения с Debounce
    setScrollDebounceHandleCount(prevState => ++prevState);
  }, 500);
};

В результате увеличение счётчика с Debounce происходит только тогда, когда пользователь перестаёт прокручивать элемент страницы больше или равным 500 миллисекунд:

Полный текст App компонента:

const App = () => {
  const [scrollHandleCount, setScrollHandleCount] = useState(0);
  const [
    scrollThrottleHandleCount,
    setScrollThrottleHandleCount
  ] = useState(0);
  const [
    scrollDebounceHandleCount,
    setScrollDebounceHandleCount
  ] = useState(0);

  const throttleInProgress = useRef();
  const throttleTimerId = useRef();
  const debounceTimerIdRef = useRef();

  useEffect(() => {
    // Отчистка таймера при размонтировании компонента
    return () => {
      if (throttleTimerId.current) {
        clearTimeout(throttleTimerId.current);
      }
      if (debounceTimerIdRef.current) {
        clearTimeout(debounceTimerIdRef.current)
      }
    };
  }, []);

  const handleUsualScroll = () => {
    setScrollHandleCount(prevState => ++prevState);
  };
  const handleThrottleScroll = () => {
    if(throttleInProgress.current){ return; }
    throttleInProgress.current = true;
    throttleTimerId.current = setTimeout(() => {
      setScrollThrottleHandleCount(prevState => ++prevState);
      throttleInProgress.current = false;
    }, 500);
  };
  const handleDebounceScroll = () => {
    if(debounceTimerIdRef.current){
      clearTimeout(debounceTimerIdRef.current);
    }
    debounceTimerIdRef.current = setTimeout(() => {
      setScrollDebounceHandleCount(prevState => ++prevState);
    }, 500);
  };
  const handleScroll = () => {
    handleUsualScroll();
    handleThrottleScroll();
    handleDebounceScroll();
  };

  return (
    <>
      <h1>Throttle & Debounce</h1>
      <span>
        Usual scroll handle count: {scrollHandleCount}
      </span>
      <br />
      <span>
        Throttle scroll handle count: {scrollThrottleHandleCount}
      </span>
      <br />
      <span>
        Debound scroll handle count: {scrollDebounceHandleCount}
      </span>
      <div className="l-scroll" onScroll={handleScroll}>
        <div className="scroll-content">
          <TallContent />
        </div>
      </div>
    </>
  );
};

export default App;

Подписывайтесь на блог, ставьте лайки, добавляйте в закладки.
Не забываем про единорогов.

Спасибо за внимание.

Делаем свой Font Awesome шрифт

Andrey Smirnov — Sat, 21 May 2022 14:48:55 +0000

Обзор

Font Awesome - отличная вещь, это шрифт, символами которого являются изображения. Например, мы хотим разместить у себя на странице сайта такую картинку:

Нам достаточно написать небольшой HTML код, и картинка будет у нас на сайте:

<i class="fa-solid fa-thumbs-up"></i>

Но почему просто нельзя разместить картинку с помощью тега img?

<img src="/thumbs-up.svg" />

При таком размещении мы не сможем изменять цвет картинки, например, при наведении указателя мышки над картинкой, а так же применять css transitions к цвету. Конечно, есть решения на основе css filters https://stackoverflow.com/a/50942954, но это усложняет читаемость и поддержку кода.
Есть ещё один метод изменять цвет картинки - добавлять inline svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path fill="#0000ff" d="M128 447.1V223.1c0-17.67-14.33-31.1-32-31.1H32c-17.67 0-32 14.33-32 31.1v223.1c0 17.67 14.33 31.1 32 31.1h64C113.7 479.1 128 465.6 128 447.1zM512 224.1c0-26.5-21.48-47.98-48-47.98h-146.5c22.77-37.91 34.52-80.88 34.52-96.02C352 56.52 333.5 32 302.5 32c-63.13 0-26.36 76.15-108.2 141.6L178 186.6C166.2 196.1 160.2 210 160.1 224c-.0234 .0234 0 0 0 0L160 384c0 15.1 7.113 29.33 19.2 38.39l34.14 25.59C241 468.8 274.7 480 309.3 480H368c26.52 0 48-21.47 48-47.98c0-3.635-.4805-7.143-1.246-10.55C434 415.2 448 397.4 448 376c0-9.148-2.697-17.61-7.139-24.88C463.1 347 480 327.5 480 304.1c0-12.5-4.893-23.78-12.72-32.32C492.2 270.1 512 249.5 512 224.1z"/>
</svg>

Атрибут fill отвечает за цвет.
Но проще всего изменять цвет css стилями:

.icon {
  color: red;
}

Так же можно упаковывать svg картинки в реакт компоненты, делать image sprites и т.д., пишите в комментариях если хотите статью на эти темы.

Итак, в этой статье мы:

Создадим свой шрифт, который будет состоять из трёх векторных изображений;
Конвертируем наш шрифт в woff и woff2 форматы для оптимизации размера;
Напишем css стили для удобного добавления символов шрифта на страницы сайта.

1. Создаём шрифт

Для создания шрифта нам понадобятся две open source программы:

FontForge - редактор шрифтов;
Inkscape - редактор векторной графики.

Загружаем и устанавливаем эти программы, а так же загружаем три изображения в формате svg, из которых мы будем делать шрифт:

Обратите внимание на то, что большой палец и лицо с улыбкой имеют разрешение: 512x512, а чашка: 640x512. Для того чтобы символы шрифта были центрированы, нам необходимо привести их к единому разрешению. В этом примере мы выберем разрешение 512x512. Значит, разрешение чашки придётся изменить, а изображение вписать и центрировать в новое разрешение. Для этого нам понадобится Inkscape.

Открываем нашу чашку в Inkscape;
Заходим в меню File -> Document Properties...;
Во вкладке Page в разделе Custom size выбираем Units: px - размер в пикселях. И там же устанавливаем разрешение Width и Height в 512; В результате мы получим блюдце и ручку чашки, выступающие за поля изображения:

Нажимаем на изображение чашки;
В меню выбираем Object -> Transform -> Scale, устанавливаем единицы измерения в px, устанавливаем галочку Scale proportionally, Width устанавливаем в 512 и нажимаем Enter, после чего величина Height должна пропорционально измениться. Результат:

Теперь нам нужно расположить изображение по центру, для этого:

В меню выбираем Object -> Align and Distribute...;
Relative to выбираем Page, и нажимаем на значки выравнивания по центру, по горизонтали и вертикали.

В результате получаем картинку по центру холста:

Осталось только сохранить результат в svg файле:

Меню File -> Save As...;
Выбираем формат Plain SVG (*.svg) и нажимаем кнопку Save.

В итоге у нас получилось изображение в svg формате с разрешением 512x512 пикселей. Все три картинки с одинаковым разрешением.

Теперь можно приступить к работе с FontForge:

Открываем программу;
Нажимаем на кнопку New для создания нового проекта;
Выбираем, например, букву s от слова smile и дважды кликаем мышкой на пустую клетку под буквой s. Должен открыться редактор символа.
Открываем меню File -> Import..., Format -> SVG, выбираем файл лицо с улыбкой и нажимаем OK.
Закрываем редактор символа, после чего под буквой s мы увидим наше изображение с улыбкой.
Повторяем действия для двух оставшихся картинок, для чашки я выбрал букву c, для пальца вверх букву t. В результате у нас под буквами s, c и t должны появиться изображения:

Осталось только сохранить результат в файл шрифта:

Меню File -> Generate Fonts...
Выбираем название icons.ttf и нажимаем кнопку Generate, затем Yes.

Поздравляю, наш шрифт готов!

2. Конвертируем наш шрифт в `woff` и `woff2` форматы

Для конвертации шрифта из формата ttf в woff и woff2 я написал небольшую консольную утилиту, которую вы можете скачать с https://github.com/druxax/font-conv.
Для установки необходимо скачать и в консоли перейти в каталог утилиты font-conv, затем выполнить команды:

npm pack
sudo npm install -g font-conv-cli-1.0.0.tgz

После установки в консоли заходим в каталог со шрифтом и запускаем утилиту конвертации:

font-conv-cli

После завершения работы утилита создаст каталог в той же папке с названием font-conv-res - в нём будут находиться два файла сконвертированных шрифтов с расширениями woff и woff2.
Переместите все 3 файла шрифта в одну папку fonts и мы приступим к последнему пункту - добавим шрифт на страницу сайта.

3. Добавляем шрифт на сайт

Подготовим html шаблон нашего сайта, создадим файл index.html.

<!DOCTYPE html>
<html>
  <head>
    <title>Font Excellent</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Font Excellent</h1>
    <!-- TODO -->
  </body>
</html>

Создадим файл styles.css и подключим в нём наш шрифт.

@font-face {
  font-family: "Font Excellent";
  src: url("fonts/icons.woff2") format('woff2'),
       url("fonts/icons.woff") format('woff'),
       url("fonts/icons.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
}

Добавим в styles.css стили для символов шрифта.

/* Общие настройки для всех символов шрифта */
.icon::before {
  display: inline-block;
  font-family: "Font Excellent";
  font-size: 8rem;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Для лица с улыбкой */
.icon-smile::before {
  content: "\0073";
}
/* Для пальца вверх */
.icon-thumbs-up::before {
  content: "\0074";
}
/* Для чашки */
.icon-cup::before {
  content: "\0063";
}

/* Анимация цвета и другие стили */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon {
  margin: 0 1rem;
  animation: color-animation 4s linear infinite;
}
.icon-cup {
  --color-1: #df8453;
  --color-2: #4195b8;
  --color-3: #e4a3a2;
}
.icon-smile {
  --color-1: #dfaf48;
  --color-2: #aed4d0;
  --color-3: #bff2a7;
}
.icon-thumbs-up {
  --color-1: #aed4d0;
  --color-2: #e19c9b;
  --color-3: #a9cfcb;
}
@keyframes color-animation {
  0%    {color: var(--color-1)}
  32%   {color: var(--color-1)}
  33%   {color: var(--color-2)}
  65%   {color: var(--color-2)}
  66%   {color: var(--color-3)}
  99%   {color: var(--color-3)}
  100%  {color: var(--color-1)}
}

Здесь мы выбрали общие настройки для icon класса и указали содержимое - кодировку символа для каждого класса наших картинок content: "\XXXX", где XXXX - CSS Entity значение. При создании шрифта, его символами мы выбрали буквы c, s и t, например, у знака s CSS Entity - 0073. Если в FontForge кликнуть на символ, то под строкой меню можно увидеть кодировку символов. Например, кликнув на t его код будет указан в виде U+0074, значит, в css мы запишем: content: "\0074";.

С css мы закончили, осталось только добавить в наш html шаблон наши картинки.

<!DOCTYPE html>
<html>
<head>
  <title>Font Excellent</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Font Excellent</h1>
  <div>
    <i class="icon icon-cup"></i>
    <i class="icon icon-smile"></i>
    <i class="icon icon-thumbs-up"></i>
  </div>
</body>
</html>

Теперь, открыв файл index.html в браузере, мы должны увидеть следующее:

Ставьте лайки, подписывайтесь на блог.
Спасибо за внимание.

Отправка сообщений клиенту в реальном времени с помощью NodeJS и Server-Sent Events

Andrey Smirnov — Thu, 19 May 2022 20:08:21 +0000

Обзор

Технология Server-Sent Events(SSE) позволяющая отправлять информацию с сервера клиенту в реальном времени, основана на HTTP протоколе.

На клиентской стороне server-sent events API предоставляет EventSource интерфейс (часть HTML5 стандарта), посредством которого открывается постоянное соединение с HTTP сервером.

HTTP сервер отправляет события в text/event-stream формате. Соединение остаётся открытым до тех пор пока не будет вызван метод EventSource.close().

Ограничения:

Возможен только приём данных с сервера (однонаправленный поток данных, в отличии от WebSockets);
Данные могут передаваться только в UTF-8 формате (небинарные данные).

Возможные преимущества:

Работает через HTTP, а значит у клиентов не возникнет проблем с подключением в случае, когда они подключены через прокси, не поддерживающие другие соединения (такие как WebSockets);
Если соединение устанавливается через HTTPS, то трафик SSE защищён шифрованием.

Поддержка браузерами: https://caniuse.com/eventsource.

В этой статье мы разработаем приложение Todo List, которое позволяет пользователям добавлять, удалять, помечать как выполенные задания в списке.

Обратите внимание, состояние списка с помощью Server-sent Events будет общим для всех пользователей:

Шаг 1 - Разработка Express Backend



# Создаём и заходим в каталог проекта
mkdir sse
cd sse

# Создаём и заходим в подкаталог для для backend части проекта
mkdir server
cd server

# Инициализируем проект и устанавливаем необходимые пакеты
npm init -y
npm install express@^4.18.1 body-parser@^1.20.0 compression@^1.7.4 cors@^2.8.5 --save

После установки пакетов в файл package.json необходимо добавить строку "type": "module" для того чтобы NodeJS мог работать с модулями.



{
  "name": "server",
  "type": "module"
  ...
}

Создаём файл server.js и добавляем каркас приложения:



import express from 'express';
import compression from 'compression';
import bodyParser from 'body-parser';
import cors from 'cors';

const app = express();
app.use(compression());
app.use(cors());
app.use(bodyParser.json());

let clients = [];
let todoState = [];

app.get('/state', (req, res) => {
    res.json(todoState);
});

const PORT = process.env.PORT || 3005;
app.listen(PORT, () => {
    console.log(`Shared todo list server listening at http://localhost:${PORT}`);
});

Запускаем сервер командой npm start. Если всё сделано правильно, то, сделав запрос curl http://localhost:3005/state вы увидете [] - пустой список todo листа.
Далее перед декларацией порта const PORT = process.env.PORT || 3005; добавляем код для подключения клиента через SSE:



app.get('/events', (req, res) => {
    const headers = {
        // Тип соединения 'text/event-stream' необходим для SSE
        'Content-Type': 'text/event-stream',
        'Access-Control-Allow-Origin': '*',
        // Отставляем соединение открытым 'keep-alive'
        'Connection': 'keep-alive',
        'Cache-Control': 'no-cache'
    };
    // Записываем в заголовок статус успешного ответа 200
    res.writeHead(200, headers);

    /*
    Формирование данных:
    Когда EventSource получает множество последовательных
    строк, начинающихся с data: они объединяются, вставляя
    символ новой строки между ними. Завершающие символы
    новой строки удаляются.
    Двойные символы конца строки \n\n обозначают конец
    события.
    */
    const sendData = `data: ${JSON.stringify(todoState)}\n\n`;

    res.write(sendData);
    // Если используется compression middleware, то необходимо
    // добавить res.flush() для отправки данных пользователю
    res.flush();

    // Создаём уникальный идентификатор клиента
    const clientId = genUniqId();
    const newClient = {
        id: clientId,
        res,
    };

    clients.push(newClient);

    console.log(`${clientId} - Connection opened`);

    req.on('close', () => {
        console.log(`${clientId} - Connection closed`);
        clients = clients.filter(client => client.id !== clientId);
    });
});

function genUniqId(){
    return Date.now() + '-' + Math.floor(Math.random() * 1000000000);
}

Итак, мы написали код, позволяющий клиенту подключиться, установив постоянное соединение, а так же сохранили id и res в массиве клиентов, чтобы в дальнейшем мы могли отправлять данные подключенным клиентам.

Чтобы проверить, что всё работает, добавим код для передачи уникальных id подключенных пользователей.



app.get('/clients', (req, res) => {
    res.json(clients.map((client) => client.id));
});

Запускаем сервер npm start.
Подключаемся в новом терминале к серверу:



curl -H Accept:text/event-stream http://localhost:3005/events

В разных терминалах можно несколько раз повторить команду, чтобы сымитировать подключение нескольких клиентов.
Проверяем список подключившихся:



curl http://localhost:3005/clients

В терминале вы должны увидеть массив id подключенных клиентов:



["1652948725022-121572961","1652948939397-946425533"]

Теперь приступим к написанию бизнес логики приложения Todo List, нам нужно:
a) Добавлять задачу в todo список;
b) Удалять задачу из todo списка;
c) Устанавливать/снимать галочку выполнения задачи;
d) После каждого действия отправлять состояние всем подключенным клиентам.

Состояние todo списка будет выглядеть следующим образом:



[
   {
      id: "1652980545287-628967479",
      text: "Task 1",
      checked: true
   },
   {
      id: "1652980542043-2529066",
      text: "Task 2",
      checked: false
   },
   ...
]

Где id - уникальный идентификатор, генерируемый сервером, text - текст задачи, checked - состояние галочки задачи.

Начнём с d) - после каждого действия отправлять состояние всем подключенным клиентам:



function sendToAllUsers() {
    for(let i=0; i<clients.length; i++){
        clients[i].res.write(`data: ${JSON.stringify(todoState)}\n\n`);
        clients[i].res.flush();
    }
}

Затем реализуем a) b) и c):



// Добавляем новую задачу в список и отправляем
// состояние всем клиентам
app.post('/add-task', (req, res) => {
    const addedText = req.body.text;
    todoState = [
        { id: genUniqId(), text: addedText, checked: false },
        ...todoState
    ];
    res.json(null);
    sendToAllUsers();
});

// Изменяем состояние выполнения задачи в списке
// и отправляем результат всем клиентам
app.post('/check-task', (req, res) => {
    const id = req.body.id;
    const checked = req.body.checked;
    todoState = todoState.map((item) => {
        if(item.id === id){
            return { ...item, checked };
        }
        else{
            return item;
        }
    });
    res.json(null);
    sendToAllUsers();
});

// Удаляем задачу из списка и отправляем новое
// состояние списка всем клиентам
app.post('/del-task', (req, res) => {
    const id = req.body.id;
    todoState = todoState.filter((item) => {
        return item.id !== id;
    });
    res.json(null);
    sendToAllUsers();
});

Итак, серверная часть готова. Полный код серверной части:



import express from 'express';
import compression from 'compression';
import bodyParser from 'body-parser';
import cors from 'cors';

const app = express();
app.use(compression());
app.use(cors());
app.use(bodyParser.json());

let clients = [];
let todoState = [];

app.get('/state', (req, res) => {
    res.json(todoState);
});

app.get('/events', (req, res) => {
    const headers = {
        'Content-Type': 'text/event-stream',
        'Access-Control-Allow-Origin': '*',
        'Connection': 'keep-alive',
        'Cache-Control': 'no-cache'
    };
    res.writeHead(200, headers);

    const sendData = `data: ${JSON.stringify(todoState)}\n\n`;
    res.write(sendData);
    res.flush();

    const clientId = genUniqId();

    const newClient = {
        id: clientId,
        res,
    };

    clients.push(newClient);

    console.log(`${clientId} - Connection opened`);

    req.on('close', () => {
        console.log(`${clientId} - Connection closed`);
        clients = clients.filter(client => client.id !== clientId);
    });
});

function genUniqId(){
    return Date.now() + '-' + Math.floor(Math.random() * 1000000000);
}

function sendToAllUsers() {
    for(let i=0; i<clients.length; i++){
        clients[i].res.write(`data: ${JSON.stringify(todoState)}\n\n`);
        clients[i].res.flush();
    }
}

app.get('/clients', (req, res) => {
    res.json(clients.map((client) => client.id));
});

app.post('/add-task', (req, res) => {
    const addedText = req.body.text;
    todoState = [
        { id: genUniqId(), text: addedText, checked: false },
        ...todoState
    ];
    res.json(null);
    sendToAllUsers();
});

app.post('/check-task', (req, res) => {
    const id = req.body.id;
    const checked = req.body.checked;

    todoState = todoState.map((item) => {
        if(item.id === id){
            return { ...item, checked };
        }
        else{
            return item;
        }
    });
    res.json(null);
    sendToAllUsers();
});

app.post('/del-task', (req, res) => {
    const id = req.body.id;
    todoState = todoState.filter((item) => {
        return item.id !== id;
    });

    res.json(null);
    sendToAllUsers();
});

const PORT = process.env.PORT || 3005;
app.listen(PORT, () => {
    console.log(`Shared todo list server listening at http://localhost:${PORT}`);
});

Приступаем ко второму шагу - клиентской части.

Шаг 2 - Клиентская часть: React приложение

Перейдём в ранее созданную папку проекта sse, затем запустим команду создания шаблона react приложения:



npx create-react-app client

Далее перейдём в папку созданного приложения и запустим его:



cd client
npm start

После чего в браузере должна открыться страница клиентского приложения http://localhost:3000.

Далее переходим к файлу src/index.js и удаляем React.StrictMode из приложения.



// Было
root.render(
   <React.StrictMode>
      <App />
   </React.StrictMode>
);
// Стало
root.render(
   <App />
);

Дело в том что React StrictMode дважды рендерит компоненты в режиме development для обнаружения возможных проблем. Но в нашем случае это не нужно, иначе клиент будет дважды подключаться к серверу и устанавливать постоянное соединение.

Удалим из файла App.css всё содержимое и вставим свои стили:



h1 {
    text-align: center;
}
main {
    display: flex;
    justify-content: center;
}
.l-todo {
    max-width: 31.25rem;
}
form {
    margin-bottom: 1rem;
}
form input[type="submit"] {
    margin-left: 0.5rem;
}
.task-group {
    margin-bottom: 0.125rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.task-group button {
    padding: 0.25rem 0.5rem;
    margin-left: 0.5rem;
    border: none;
    background-color: white;
}

Подготовим каркас приложения, удалим из файла App.js всё содержимое и вставим свой код:



import './App.css';
import { useState, useEffect, useRef } from 'react';

function App(){
   return(
      <main>
      </main>
   );
}

export default App;

Добавим в наш App компонент хук состояния списка:



const [tasks, setTasks] = useState([]);

Теперь добавим хук useEffect в котором мы будем устанавливать постоянное SSE соединение:



useEffect(() => {
        let mount = true;
        let events;
        let timer;
        let createEvents = () => {
            // Закрываем соединение если открыто
            if(events){
                events.close();
            }
            // Устанавливаем SSE соединение
            events = new EventSource(`http://localhost:3005/events`);
            events.onmessage = (event) => {
                // Если компонент смонтирован, устанавливаем
                // полученными данными состояние списка
                if(mount){
                    let parsedData = JSON.parse(event.data);
                    setTasks(parsedData);
                }
            };
            // Если возникает ошибка - ждём секунду и
            // снова вызываем функцию подключения
            events.onerror = (err) => {
                timer = setTimeout(() => {
                    createEvents();
                }, 1000);
            };
        };
        createEvents();

        // Перед размонтированием компонента отчищаем
        // таймер и закрываем соединение
        return () => {
            mount = false;
            clearTimeout(timer);
            events.close();
        }
    }, []);

Теперь при открытии клиентского сайта http://localhost:3000 произойдёт соединение с сервером и сервер отправит состояние todo списка подключившемуся клиенту. Клиент, получив данные установит состояние todo списка.

Разработаем компонент интерфейса для добавления новой задачи в список.

Добавим в проект файл src/AddTask.js



function AddTask(props){
    const { text, onTextChange, onSubmit, textRef } = props;
    return(
        <form onSubmit={onSubmit}>
            <input
                type="text"
                name="add"
                value={text}
                onChange={onTextChange}
                ref={textRef}
            />
            <input
                type="submit"
                value="Добавить"
            />
        </form>
    );
}

export default AddTask;

Создадим элемент списка:

Добавим в проект файл src/Task.js:



function Task(props){
    const { id, text, checked, onCheck, onDel } = props;
    return(
        <div className="task-group">
            <div>
                <input
                    type="checkbox"
                    name={`chk${id}`}
                    id={`chk${id}`}
                    checked={checked}
                    onChange={onCheck}
                />
                <label htmlFor={`chk${id}`}>{text}</label>
            </div>
            <button
                id={`btn${id}`}
                onClick={onDel}>x
            </button>
        </div>
    );
}

export default Task;

Подключим файлы созданные файлы в App.js:



import AddTask from './AddTask';
import Task from './Task';

В нашем приложении мы будем передавать данные на сервер в JSON формате, поэтому прежде чем двигаться дальше мы напишем небольшую обёртку для javascript fetch API для упрощения клиентского кода. Создадим файл /src/jsonFetch.js:



function jsonFetch(url, data){
    return new Promise(function(resolve, reject){
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(function(res){
            if(res.ok){
                const contentType = res.headers.get('content-type');
                if(contentType && contentType.includes('application/json')){
                    return res.json();
                }
                return reject(`Не JSON, content-type: ${contentType}`);
            }
            return reject(`Статус: ${res.status}`);
        })
        .then(function(res){
            resolve(res);
        })
        .catch(function(error){
            reject(error);
        });
    });
}

export default jsonFetch;

Подключим созданный файл в App.js:



import jsonFetch from './jsonFetch';

Теперь добавим наши компоненты AddTask и Task в App компонент:



function App(){
    const [addTaskText, setAddTaskText] = useState('');
    const [tasks, setTasks] = useState([]);
    const addTextRef = useRef(null);

    useEffect(() => {
      // Код SSE
       ...
    },[]);

    const tasksElements = tasks.map((item) => {
        return(
            <Task
                key={item.id}
                id={item.id}
                text={item.text}
                checked={item.checked}
                onCheck={handleTaskCheck}
                onDel={handleTaskDel}
            />
        );
    });

    return (
        <main>
            <div className="l-todo">
                <h1>Todo List</h1>
                <AddTask
                    text={addTaskText}
                    onSubmit={handleAddTaskSubmit}
                    onTextChange={handleAddTaskTextChange}
                    textRef={addTextRef}
                />
                {tasksElements}
            </div>
        </main>
    );
}

Напишем обработчики событий пользователя в App компоненте:



function handleAddTaskTextChange(event){
   setAddTaskText(event.target.value);
}

function handleAddTaskSubmit(event){
   event.preventDefault();
   let addedText = addTaskText.trim();
   if(!addedText){
       return setAddTaskText('');
   }
   jsonFetch('http://localhost:3005/add-task', {text: addedText})
   .then(() => {
       setAddTaskText('');
   })
   .catch((err) => {
       console.log(err);
   })
   .finally(() => {
       addTextRef.current.focus();
   });
}

function handleTaskCheck(event){
   const checked =  event.target.checked;
   const targetId = event.target.id.substring(3);

   jsonFetch('http://localhost:3005/check-task', {id: targetId, checked})
   .catch((err) => {
       console.log(err);
   });
}

function handleTaskDel(event){
   let targetId = event.target.id.substring(3);

   jsonFetch('http://localhost:3005/del-task', {id: targetId})
   .catch((err) => {
       console.log(err);
   });
}

Итак, логика работы приложения: при монтировании компонента создаётся SSE подключение к серверу, который при подключении передаёт состояние списка. После получения состояние списка с сервера оно устанавливается клиенту setTasks(parsedData).
Далее, при добавлении, удалении и установке/снятии галочки задачи - изменения отправляются на сервер, там записываются в todoState и передаются всем подключенным пользователям.

Полный код клиентского приложения:



import './App.css';
import { useState, useEffect, useRef } from 'react';
import AddTask from './AddTask';
import Task from './Task';
import jsonFetch from './jsonFetch';

function App(){
    const [addTaskText, setAddTaskText] = useState('');
    const [tasks, setTasks] = useState([]);
    const addTextRef = useRef(null);

    useEffect(() => {
        let mount = true;
        let events;
        let timer;
        let createEvents = () => {
            if(events){
                events.close();
            }
            events = new EventSource(`http://localhost:3005/events`);
            events.onmessage = (event) => {
                if(mount){
                    let parsedData = JSON.parse(event.data);
                    setTasks(parsedData);
                }
            };
            events.onerror = (err) => {
                timer = setTimeout(() => {
                    createEvents();
                }, 1000);
            };
        };
        createEvents();

        return () => {
            mount = false;
            clearTimeout(timer);
            events.close();
        }
    }, []);

    const tasksElements = tasks.map((item) => {
        return(
            <Task
                key={item.id}
                id={item.id}
                text={item.text}
                checked={item.checked}
                onCheck={handleTaskCheck}
                onDel={handleTaskDel}
            />
        );
    });

    return (
        <main>
            <div className="l-todo">
                <h1>Todo List</h1>
                <AddTask
                    text={addTaskText}
                    onSubmit={handleAddTaskSubmit}
                    onTextChange={handleAddTaskTextChange}
                    textRef={addTextRef}
                />
                {tasksElements}
            </div>
        </main>
    );

    function handleAddTaskTextChange(event){
        setAddTaskText(event.target.value);
    }

    function handleAddTaskSubmit(event){
        event.preventDefault();
        let addedText = addTaskText.trim();
        if(!addedText){
            return setAddTaskText('');
        }
        jsonFetch('http://localhost:3005/add-task', {text: addedText})
        .then(() => {
            setAddTaskText('');
        })
        .catch((err) => {
            console.log(err);
        })
        .finally(() => {
            addTextRef.current.focus();
        });
    }

    function handleTaskCheck(event){
        const checked =  event.target.checked;
        const targetId = event.target.id.substring(3);

        jsonFetch('http://localhost:3005/check-task', {id: targetId, checked})
        .catch((err) => {
            console.log(err);
        });
    }

    function handleTaskDel(event){
        let targetId = event.target.id.substring(3);

        jsonFetch('http://localhost:3005/del-task', {id: targetId})
        .catch((err) => {
            console.log(err);
        });
    }
}

export default App;

Ставьте лайки, пишите комментарии.

DEV Community: Andrey Smirnov

Используем Throttle и Debounce в React

Обзор

Примеры использования Throttle:

Примеры использования Debounce:

Шаг 1 - Шаблон приложения

Шаг 2 - Обычный обработчик событий

Шаг 3 - Обработчик событий с Throttle

Шаг 4 - Обработчик событий с Debounce

Делаем свой Font Awesome шрифт

Обзор

1. Создаём шрифт

2. Конвертируем наш шрифт в woff и woff2 форматы

3. Добавляем шрифт на сайт

Отправка сообщений клиенту в реальном времени с помощью NodeJS и Server-Sent Events

Обзор

Шаг 1 - Разработка Express Backend

Шаг 2 - Клиентская часть: React приложение

2. Конвертируем наш шрифт в `woff` и `woff2` форматы