Вступление

В современной веб-разработке существует множество способов обновления данных в реальном времени. Среди наиболее распространённых методов выделяются Polling и WebSockets. Оба подхода имеют свои уникальные особенности и применения, что делает их подходящими для различных сценариев. В этой статье мы рассмотрим основные различия между Polling и WebSockets, их преимущества и недостатки, а также приведем примеры использования каждого из них в React приложениях на хуках.

Polling

Polling – это метод, при котором клиент периодически отправляет запросы на сервер для получения обновленных данных. Этот подход прост в реализации, но может быть неэффективен при частых запросах, так как он увеличивает нагрузку на сервер и сеть.

Рефетч может происходить при нажатии кнопки, по истечению определенного количества времени, или при любом другом событии.

WebSockets

WebSockets – это протокол, который позволяет устанавливать постоянное соединение между клиентом и сервером. Благодаря этому соединению данные могут передаваться в обоих направлениях в реальном времени, что делает WebSockets более эффективным для приложений, требующих мгновенного обновления данных.

Клиент отправляет запрос, а сервер возвращает ему handshake, после чего устанавливается websocket соединение, в котором данные моментально приходят от клиента до сервера, и наоборот.

Рассмотрим примеры реализации обоих подходов

Создадим 2 приложения: в первом реализуем чат на основе поллинга, добавим пользователю кнопку “обновить”, на которую будет происходить рефетч; во втором же сделаем чат и установим web socket соединение, для моментального обновления данных.

Зависимости

Для реализации задумки мне пригодится всего 2 библиотеки:

• shadcn/ui - для красивых ui компонентов

• reactuse - лучшая утилитарная библиотека с огромным количеством переиспользуемых react хуков (мы возьмем оттуда useQuery и useWebsocket)

Установим зависимости и нужные нам компоненты из ui библиотеки (это начало будет одинаковым для обоих приложений)

$yarn add @siberiacancode/reactuse
$yarn add tailwindcss
$npx tailwindcss init
$npx shadcn-ui@latest init
$npx shadcn-ui@latest add button card input

Для обоих приложений создадим одинаковый компонент чата. Начнем с обычной верстки. Для этого импортируем из shadcn/ui следующие компоненты: button, input, scroll-area, separator. (см. документацию, чтобы посмотреть как добавлять компоненты)

Создадим развертку компонента Chat:

import { Button } from "./ui/button";
import { Card, CardContent, CardTitle } from "./ui/card";
import { Input } from "./ui/input";
import { ScrollArea } from "./ui/scroll-area";
import { Separator } from "./ui/separator";
const Chat = () => {
return (
<Card className=" w-80 h-96">
<CardTitle>
<div className="p-2">Chat</div>
<Separator />
</CardTitle>
<CardContent className="p-0 flex flex-col">
<ScrollArea className=" w-full h-72">
<div className=" p-2">
<div className="flex">
<div className=" bg-slate-300 text-background rounded-md p-1.5 max-w-64 shadow-slate-300 shadow-md">
Message to you
</div>
</div>
<div className="flex justify-end">
<div className=" bg-slate-800 text-foreground rounded-md p-1.5 max-w-64 shadow-slate-800 shadow-md">
Message from you
</div>
</div>
</div>
</ScrollArea>
<div className=" flex ">
<Input placeholder="Your message..." className="" />
<Button className="">Send</Button>
</div>
</CardContent>
</Card>
);
};
export default Chat;

Получим следующий ui:

Добавим type Message:

type Message = {
  text: string;
  type: "client" | "server";
};

Создадим состояние messages, в котором будем хранить все сообщения:

import { useState } from "react";

const messages = useState<Message[]>([])

Немного поменяем верстку, чтобы в чате отоброжались только сообщения из стэйта messages и на них применялись определенные стили, в соответствии с тем, является ли тип сообщения “server” или “client”

<ScrollArea className=" w-full h-72">
  <div className="p-2">
    {messages.map((message, index) => {
      if (message.type === "client")
        return (
          <div className="flex justify-end" key={index}>
            <div className=" bg-slate-800 text-foreground rounded-md p-1.5 max-w-64 shadow-slate-800 shadow-md">
              {message.text}
            </div>
          </div>
        );
      else
        return (
          <div className="flex">
            <div className=" bg-slate-300 text-background rounded-md p-1.5 max-w-64 shadow-slate-300 shadow-md">
              {message.text}
            </div>
          </div>
        );
    })}
  </div>
</ScrollArea>;

Добавим хук работы с полями ввода

useField - этот хук из пакета reactuse вы можете использовать для удобного взаимодествия с полями ввода.

const messageInput = useField({initialValue: ''})

Здесь мы задали initialValue, равное пустой строке. Далее мы будем обращаться к messageInput, для взаимодействия с полем ввода.

Добавим к нашему инпуту следующее:

<Input placeholder="Your message..." {...messageInput.register()} />

Таким образом мы регистрируем и привязываем хук к этому полю ввода

1 - Метод Polling

Для каждого из способов нам понадобиться создать свой моковый сервер. В случае с polling воспользуюсь библиотекой от создатиля reactuse - ? Mock Config Server

Установим пакет:

$yarn add mock-config-server --dev

Теперь надо настроить конфигурацию пакета. Создадим файл mock-server.config.js:

/** @type {import('mock-config-server').MockServerConfig} */

let messages = [];

const mockServerConfig = {
  rest: {
    baseUrl: "/api",
    configs: [
      {
        path: "/messages",
        method: "get",
        routes: [{ data: messages }],
      },
      {
        path: "/messages/new",
        method: "post",
        routes: [{ data: { success: "true" } }],
        interceptors: {
          response: (data, { request }) => {
            messages.push({
              text: request.body.text,
              type: "client",
            });
            messages.push({
              text: request.body.text,
              type: "server",
            });

            return data;
          },
        },
      },
    ],
  },
};

export default mockServerConfig;

Здесь мы создаем переменную messages. В ней будем хранить все сообщения. Создадим маршрут /messages и запрос GET. Этот запрос будет просто отдавать переменную messages, равную всем полученным и отправленым сообщениям в массиве. Далее POST запрос /messages/new. Через interceptors создаем функцию, которая будет обрабатываться когда придет этот запрос. В этой функции мы просто перехватываем текст из сообщения и добавляем в переменную messages 2 сообщения с одинаковым текстом: от сервера и от клиента.

Конфигурация мокового эхо-чат апи готова! Запустим сервер:

 npx mock-config-server

Теперь все запросы доступны по http://localhost:31299/api

Вернемся к базовой верстке:

Создадим запрос за получением сообщений с помощью хука useQuery:

import { useField, useQuery, useMutation } from "@siberiacancode/reactuse";

const { data, refetch, isRefetching, isLoading, isError, error } = useQuery(
  () => fetch("<http://localhost:31299/api/messages>").then((res) => res.json()),
  {
    refetchInterval: 1200000,
    keys: ["messages"],
    onSuccess: (data) => setMessages(data),
  }
);

В параметры функции передаем callback функцию запроса и объект options. В нем указываем ключ, refetchInterval, чтобы запрос отправлялся заново автоматически через 120000 милисекунд (20 минут) и onSuccess - в случае успеха **присвоим результат запроса (data) стэйту messages. Получаем ряд стэйтов и функций, которые мы заюзаем позже.

Немного поменяем развертку контента карточки:

<ScrollArea className=" w-full h-72">
  <div className="p-2">
    {isLoading || isRefetching ? (
      <p className="text-center">Wait...</p>
    ) : isError ? (
      <p className="text-center">Error {error?.message}</p>
    ) : (
      messages.map((message, index) => {
        if (message.type === "client")
          return (
            <div className="flex justify-end" key={index}>
              <div className=" bg-slate-800 text-foreground rounded-md p-1.5 max-w-64 shadow-slate-800 shadow-md">
                {message.text}
              </div>
            </div>
          );
        else
          return (
            <div className="flex" key={index}>
              <div className=" bg-slate-300 text-background rounded-md p-1.5 max-w-64 shadow-slate-300 shadow-md">
                {message.text}
              </div>
            </div>
          );
      })
    )}
  </div>
</ScrollArea>;

В случае ошибки отобразим ошибку, в случае загрузки или рефетча данных отображаем Wait… Иначе - отображаем ui

Теперь займемся рефетчем по кнопке. Просто добавим к кнопке Refetch следующее:

<Button onClick={()=>refetch()}>Refetch</Button>

Теперь при нажатии будет происходить ревалидация данных.

Теперь будем отправлять сообщения.

const { mutateAsync } = useMutation(async (text) => {
    await fetch("<http://localhost:31299/api/messages/new>", {
      method: "POST",
      body: JSON.stringify({ text: text }),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    });
  });

получаем функцию mutateAsync инициализируя хук useMutation. В callback функцию указываем POST запрос с body и загаловками.

Теперь мы можем вызвать функцию mutateAsync чтобы совершить мутацию данных (отправить на сервер сообщение). Вызывем ее как только пользователь нажмет Send. После отправки ресетнем форму

<Button
  onClick={async () => {
    await mutateAsync(messageInput.getValue());
    messageInput.reset();
  }}
>
  Send
</Button>;

Готово!

Весь код:

import { useState } from "react";
import { Button } from "./ui/button";
import { Card, CardContent, CardTitle } from "./ui/card";
import { Input } from "./ui/input";
import { ScrollArea } from "./ui/scroll-area";
import { Separator } from "./ui/separator";
import { useField, useQuery, useMutation } from "@siberiacancode/reactuse";

type Message = {
  text: string;
  type: "client" | "server";
};

const Chat = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const messageInput = useField({ initialValue: "" });
  const { data, refetch, isRefetching, isLoading, isError, error } = useQuery(
    () =>
      fetch("http://localhost:31299/api/messages").then((res) => res.json()),
    {
      refetchInterval: 1200000,
      keys: ["messages"],
      onSuccess: (data) => setMessages(data),
    }
  );
  const { mutateAsync } = useMutation(async (text) => {
    await fetch("http://localhost:31299/api/messages/new", {
      method: "POST",
      body: JSON.stringify({ text: text }),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    });
  });

  return (
    <Card className=" w-80 h-96">
      <CardTitle>
        <div className="p-2 flex justify-between items-center">
          <p>Pokemon Chat</p>
          <Button onClick={() => refetch()}>Refetch</Button>
        </div>
        <Separator />
      </CardTitle>
      <CardContent className="p-0 flex flex-col">
        <ScrollArea className=" w-full h-72">
          <div className="p-2">
            {isLoading || isRefetching ? (
              <p className="text-center">Wait...</p>
            ) : isError ? (
              <p className="text-center">Error {error?.message}</p>
            ) : (
              messages.map((message, index) => {
                if (message.type === "client")
                  return (
                    <div className="flex justify-end" key={index}>
                      <div className=" bg-slate-800 text-foreground rounded-md p-1.5 max-w-64 shadow-slate-800 shadow-md">
                        {message.text}
                      </div>
                    </div>
                  );
                else
                  return (
                    <div className="flex" key={index}>
                      <div className=" bg-slate-300 text-background rounded-md p-1.5 max-w-64 shadow-slate-300 shadow-md">
                        {message.text}
                      </div>
                    </div>
                  );
              })
            )}
          </div>
        </ScrollArea>
        <div className=" flex ">
          <Input placeholder="Your message..." {...messageInput.register()} />
          <Button
            onClick={async () => {
              await mutateAsync(messageInput.getValue());
              messageInput.reset();
            }}
          >
            Send
          </Button>
        </div>
      </CardContent>
    </Card>
  );
};

export default Chat;

Метод с использованием WebSockets

Как и в случае с методом поллинга нам нужно будет использовать моковый сервер, чтобы имитировать реальный бэкенд. Если в случае с поллингом мы использовали mock-config-server, и задавали ему конфигурацию, чтобы получить функционал эхо чата, то в случае с вебсокетами все попроще, так как один из основных сценариев использования вебсокетов - это чаты, то существуют готовые решения специально для этого.

wss://echo.websocket.org - мы будем обращаться по этому запросу, чтобы подключиться к weboscket соединению.

Вернемся к нашей базовой развертке компонента Chat. Добавим подключение к вебсокет серверу:

import { useField, useWebSocket, useMount } from "@siberiacancode/reactuse";

const { send, status, close, open } = useWebSocket(
    "wss://echo.websocket.org",
    {
      onConnected: (webSocket) => console.log(`Connected to ${webSocket.url}`),
    }
  );
useMount(() => console.log("Connecting to websocket server..."));

Здесь мы задали базовую конфигурацию и инициализацию хука. Передали адрес, по которому нужно законнектиться и в options указали, что когда произойдет событие onConnected, мы выведем в консоль сообщение об успешном присоединении к серверу.

Также ниже вызывем хук useMount, он будет кидать в консоль сообщение Connecting… как только компонент будет впервые рендериться.

(далее мы дополним options у хука useWebsocket)

Поменяем поведение кнопки. На клик она будет обрабатывать следующее:

          <Button
            onClick={() => {
              const message = messageInput.getValue();
              setMessages((prevMessages) => [
                ...prevMessages,
                { text: message, type: "client" },
              ]);
              send(message);
              messageInput.reset();
            }}
          >

Сначала мы оптимистично* обновим ui, закинем в стэйт сообщений наше новое сообщение. Компонент сразу же обновится с новым сообщением. Потом отправим сообщение на сервер через вебсокет, затем ресетним input.

*Оптимистично, потому что такое поведение называется Optimistic update. Когда пользователь совершает действие (например нажатие кнопки лайка) и мы сразу обновляем ui, не дожидаясь, когда запрос на это действие дойдет

Теперь когда мы отправляем сообщения они сразу появляются в чате.

Теперь осталось реализовать ответные сообщение от сервера. И здесь все будет попроще.

onMessage: (event) =>
        setMessages((prevMessages) => [
          ...prevMessages,
          { text: event.data, type: "server" },
        ]),

Возвращаемся в options у хука useWebsocket, добавляем, что на событие onMessage мы добавим в стэйт messages сообщение от сервера.

Теперь все готово!

Весь код:

import { useState } from "react";
import { Button } from "./ui/button";
import { Card, CardContent, CardTitle } from "./ui/card";
import { Input } from "./ui/input";
import { ScrollArea } from "./ui/scroll-area";
import { Separator } from "./ui/separator";
import { useField, useMount, useWebSocket } from "@siberiacancode/reactuse";

type Message = {
  text: string;
  type: "client" | "server";
};

const Chat = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const messageInput = useField({ initialValue: "" });
  const { send, status, close, open } = useWebSocket(
    "wss://echo.websocket.org",
    {
      onConnected: (webSocket) => console.log(`Connected to ${webSocket.url}`),
      onMessage: (event) =>
        setMessages((prevMessages) => [
          ...prevMessages,
          { text: event.data, type: "server" },
        ]),
    }
  );

  useMount(() => console.log("Connecting to websocket server..."));
  return (
    <Card className=" w-80 h-96">
      <CardTitle>
        <div className="p-2">Pokemon Chat</div>
        <Separator />
      </CardTitle>
      <CardContent className="p-0 flex flex-col">
        <ScrollArea className=" w-full h-72">
          <div className="p-2">
            {messages.map((message, index) => {
              if (message.type === "client")
                return (
                  <div className="flex justify-end" key={index}>
                    <div className=" bg-slate-800 text-foreground rounded-md p-1.5 max-w-64 shadow-slate-800 shadow-md">
                      {message.text}
                    </div>
                  </div>
                );
              else
                return (
                  <div className="flex" key={index}>
                    <div className=" bg-slate-300 text-background rounded-md p-1.5 max-w-64 shadow-slate-300 shadow-md">
                      {message.text}
                    </div>
                  </div>
                );
            })}
          </div>
        </ScrollArea>
        <div className=" flex ">
          <Input placeholder="Your message..." {...messageInput.register()} />
          <Button
            onClick={() => {
              const message = messageInput.getValue();
              setMessages((prevMessages) => [
                ...prevMessages,
                { text: message, type: "client" },
              ]);
              send(message);
              messageInput.reset();
            }}
          >
            Send
          </Button>
        </div>
      </CardContent>
    </Card>
  );
};

export default Chat;

Заключение

Как мы смогли увидеть - вебсокеты нужны в ситуациях, когда сообщения должны приходить моментально и моментально обновлять ui, например чаты в мессенджерах. Обычный поллинг мы можем использовать, когда данные не важно получать настолько быстро и их актуальность не столь важна, например, почтовые сервисы.

Эта статья показала вам основные различия и способы применения поллинга и веб сокетов. Лучше всего для этих кейсов использовать хуки и самую огромную коллекцию хуков в react - reactuse.