redrockjs/frontend-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update state, api, arch

Browse Source
This commit is contained in:
Valery Grunenko
2025-03-07 14:17:37 +03:00
parent 7484909864
commit 8263e7507a
40 changed files with 1774 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
docs/api/01-http.md Normal file
View File

@@ -0,0 +1,88 @@
---
sidebar_position: 1
---
# Протокол HTTP
**HTTP (HyperText Transfer Protocol)** — это протокол прикладного уровня, используемый для передачи данных в сети Интернет. Он является основой для обмена информацией между клиентом (например, веб-браузером) и сервером (например, веб-сайтом). HTTP работает по модели "запрос-ответ": клиент отправляет запрос, а сервер возвращает ответ.
## Основные характеристики HTTP:
1. **Текстовый протокол:**
- HTTP использует текстовый формат для передачи данных, что делает его легко читаемым и отлаживаемым.
2. **Работает поверх TCP/IP:**
- HTTP использует TCP (Transmission Control Protocol) как транспортный протокол для установления соединения между клиентом и сервером.
3. **Статус ответа:**
- Сервер возвращает HTTP-коды состояния, которые указывают на результат выполнения запроса:
- `1xx` — информационные коды (например, `100 Continue`).
- `2xx` — успешные коды (например, `200 OK`, `201 Created`).
- `3xx` — коды перенаправления (например, `301 Moved Permanently`, `302 Found`).
- `4xx` — ошибки клиента (например, `400 Bad Request`, `404 Not Found`).
- `5xx` — ошибки сервера (например, `500 Internal Server Error`, `503 Service Unavailable`).
4. **Методы HTTP:**
- HTTP определяет набор методов (или "глаголов"), которые указывают, какое действие нужно выполнить:
- `GET` — запрос данных от сервера.
- `POST` — отправка данных на сервер для создания ресурса.
- `PUT` — обновление существующего ресурса.
- `DELETE` — удаление ресурса.
- `PATCH` — частичное обновление ресурса.
- `HEAD` — запрос заголовков ответа без тела.
- `OPTIONS` — запрос информации о поддерживаемых методах.
5. **Заголовки (Headers):**
- HTTP-заголовки содержат метаданные о запросе или ответе. Они могут включать информацию о типе содержимого, кэшировании, авторизации и т.д.
- Примеры заголовков:
- `Content-Type` — тип данных (например, `application/json`).
- `Authorization` — данные для аутентификации.
- `User-Agent` — информация о клиенте (например, браузере).
6. **Тело запроса/ответа (Body):**
- Тело содержит данные, которые передаются между клиентом и сервером. Например, в запросе `POST` тело может содержать данные для создания ресурса, а в ответе — данные запрошенного ресурса.
7. **Без состояния (Stateless):**
- Каждый HTTP-запрос обрабатывается независимо от других. Сервер не хранит информацию о предыдущих запросах от клиента.
## Пример HTTP-запроса и ответа:
**Запрос:**
```
GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
```
**Ответ:**
```
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
```
## Версии HTTP:
1. **HTTP/1.0:**
- Первая версия, поддерживающая базовые функции.
2. **HTTP/1.1:**
- Наиболее распространенная версия, поддерживающая соединения `keep-alive`, который позволил загружать множество ресурсов в рамках одного соединения, кэширование и другие улучшения.
3. **HTTP/2:**
- Вторая версия, которая добавляет мультиплексирование, сжатие заголовков и другие оптимизации для повышения производительности.
4. **HTTP/3:**
- Новая версия, основанная на протоколе QUIC, которая улучшает скорость и безопасность.
## Где используется HTTP:
- Веб-сайты и веб-приложения.
- RESTful API.
- Мобильные приложения.
- Микросервисы.
## Безопасность:
- **HTTPS (HTTP Secure)** — это защищенная версия HTTP, которая использует шифрование TLS/SSL для защиты данных от перехвата и подделки.
HTTP является фундаментальным протоколом для работы в Интернете и используется практически во всех веб-технологиях.

5
docs/api/01-rest-api.md
View File

@@ -1,5 +0,0 @@
---
sidebar_position: 1
---
# REST API

5
docs/api/02-http.md
View File

@@ -1,5 +0,0 @@
---
sidebar_position: 2
---
# Протокол HTTP

39
docs/api/02-https.md Normal file
View File

@@ -0,0 +1,39 @@
---
sidebar_position: 2
---
# Протокол HTTPS
**HTTPS (HyperText Transfer Protocol Secure)** — это защищенная версия протокола HTTP, которая использует шифрование для безопасной передачи данных между клиентом и сервером. HTTPS обеспечивает конфиденциальность, целостность и аутентификацию данных.
## Основные особенности HTTPS:
1. **Шифрование:**
- Данные передаются в зашифрованном виде с использованием протоколов TLS (Transport Layer Security) или его предшественника SSL (Secure Sockets Layer).
- Это защищает информацию от перехвата и чтения третьими лицами.
2. **Аутентификация:**
- HTTPS использует SSL/TLS-сертификаты для подтверждения подлинности сервера. Это помогает клиенту убедиться, что он взаимодействует с настоящим сервером, а не с поддельным.
3. **Целостность данных:**
- HTTPS гарантирует, что данные не были изменены во время передачи.
4. **Порт по умолчанию:**
- HTTPS использует порт **443** (в отличие от HTTP, который использует порт 80).
5. **Использование:**
- HTTPS применяется для защиты конфиденциальных данных, таких как пароли, платежные реквизиты, персональная информация.
## Как работает HTTPS:
1. Клиент (например, браузер) запрашивает соединение с сервером.
2. Сервер отправляет свой SSL/TLS-сертификат, который содержит публичный ключ.
3. Клиент проверяет сертификат и использует публичный ключ для шифрования данных.
4. Устанавливается безопасное соединение, и данные передаются в зашифрованном виде.
## Преимущества HTTPS:
- **Безопасность:** Защита от перехвата данных.
- **Доверие:** Пользователи видят значок замка в адресной строке, что повышает доверие к сайту.
- **SEO:** Поисковые системы (например, Google) отдают предпочтение сайтам с HTTPS.
- **Соответствие стандартам:** HTTPS необходим для соблюдения современных требований безопасности (например, GDPR).
## Пример использования:
- Интернет-магазины (защита платежей).
- Банковские приложения.
- Социальные сети и почтовые сервисы.
HTTPS стал стандартом для современных веб-сайтов, обеспечивая безопасность и конфиденциальность пользователей.

5
docs/api/03-http-status.md
View File

@@ -1,5 +0,0 @@
---
sidebar_position: 3
---
# Статус ответа HTTP

53
docs/api/03-rest-api.md Normal file
View File

@@ -0,0 +1,53 @@
---
sidebar_position: 3
---
# REST API
**REST API** (Representational State Transfer Application Programming Interface) — это архитектурный стиль для создания веб-сервисов, который основывается на стандартных протоколах и методах HTTP. REST API используется для взаимодействия между клиентом и сервером, где клиент отправляет запросы, а сервер возвращает ответы в формате, обычно JSON или XML.
## Основные принципы REST API:
1. **Ресурсы (Resources):**
- Все данные рассматриваются как ресурсы, которые идентифицируются с помощью URL (например, `/users`, `/products`).
- Каждый ресурс имеет уникальный идентификатор (URI).
2. **HTTP-методы:**
- Используются стандартные HTTP-методы для выполнения операций:
- `GET` — получение данных.
- `POST` — создание нового ресурса.
- `PUT` — обновление существующего ресурса.
- `DELETE` — удаление ресурса.
- `PATCH` — частичное обновление ресурса.
3. **Статус ответа:**
- Сервер возвращает HTTP-коды состояния, которые указывают на результат выполнения запроса:
- `200 OK` — успешный запрос.
- `201 Created` — ресурс успешно создан.
- `400 Bad Request` — неверный запрос.
- `404 Not Found` — ресурс не найден.
- `500 Internal Server Error` — ошибка на сервере.
4. **Без состояния (Stateless):**
- Каждый запрос от клиента к серверу должен содержать всю необходимую информацию для его обработки. Сервер не хранит состояние клиента между запросами.
5. **Кэширование:**
- Ответы сервера могут быть кэшированы для повышения производительности.
6. **Единообразие интерфейса:**
- API должен быть простым и понятным, с использованием стандартных подходов.
7. **Форматы данных:**
- RESTful API обычно использует JSON или XML для передачи данных между клиентом и сервером.
## Пример REST API:
Предположим, у нас есть API для управления пользователями:
- `GET /users` — получить список всех пользователей.
- `GET /users/1` — получить информацию о пользователе с ID 1.
- `POST /users` — создать нового пользователя (тело запроса содержит данные пользователя).
- `PUT /users/1` — обновить информацию о пользователе с ID 1.
- `DELETE /users/1` — удалить пользователя с ID 1.
## Преимущества REST API:
- **Простота:** Использует стандартные HTTP-методы и статусы.
- **Масштабируемость:** Подходит для больших и распределенных систем.
- **Гибкость:** Поддерживает различные форматы данных (JSON, XML).
- **Кэширование:** Улучшает производительность за счет кэширования ответов.
- **Независимость от платформы:** Может использоваться с любым языком программирования или технологией.
## Разница между REST API и RESTful API:
- **REST API** — это общий термин, описывающий API, которое следует принципам REST.
- **RESTful API** — это более строгий термин, подразумевающий, что API полностью соответствует всем принципам REST.

56
docs/api/04-graphql.md Normal file
View File

@@ -0,0 +1,56 @@
---
sidebar_position: 4
---
# GraphQL
**GraphQL** — это язык запросов для API, который позволяет клиентам запрашивать только те данные, которые им нужны, и получать их в одном ответе. В сочетании с React GraphQL предоставляет мощный инструмент для управления данными в веб-приложениях, делая их более эффективными и гибкими.
## Основные концепции GraphQL:
1. **Запросы (Queries):**
- Клиент определяет, какие данные ему нужны, и отправляет запрос на сервер.
```js
query {
user(id: 1) {
name
email
posts {
title
}
}
}
```
2. **Мутации (Mutations):**
- Используются для изменения данных на сервере (создание, обновление, удаление).
```js
mutation {
createUser(name: "John", email: "john@example.com") {
id
name
}
}
```
3. **Схема (Schema):**
- GraphQL API описывается с помощью схемы, которая определяет типы данных и операции (запросы, мутации).
4. **Резолверы (Resolvers):**
- Функции на сервере, которые выполняют запросы и возвращают данные.
## Использование GraphQL с React:
Для работы с GraphQL в React чаще всего используется библиотека Apollo Client или Relay. Apollo Client — это популярное решение, которое предоставляет инструменты для управления состоянием данных и выполнения запросов.
### Основные шаги для использования GraphQL с React:
1. **Установка Apollo Client**
- Установите необходимые пакеты: `npm install @apollo/client graphql`
2. **Настройка Apollo Client:**
- Создайте клиент и подключите его к React-приложению: `<ApolloProvider client={client}> <App/> </ApolloProvider>`
3. **Выполнение запросов:**
- Используйте хуки useQuery для выполнения запросов и useMutation для мутаций.
4. **Кэширование данных:**
- Apollo Client автоматически кэширует данные, что позволяет избежать повторных запросов и улучшить производительность.
## Преимущества GraphQL с React:
- **Точные запросы:** Получайте только те данные, которые нужны.
- **Уменьшение количества запросов:** Все данные можно получить за один запрос.
- **Гибкость:** Легко изменять запросы без необходимости изменять API.
- **Интеграция с состоянием:** Apollo Client интегрируется с состоянием React, что упрощает управление данными.

5
docs/api/04-query-types.md
View File

@@ -1,5 +0,0 @@
---
sidebar_position: 4
---
# Типы запросов HTTP

74
docs/api/05-polling.md
View File

@@ -2,4 +2,76 @@
sidebar_position: 5
---
# Polling
# Polling
**Polling в React** — это техника, при которой клиент (например, веб-приложение) периодически отправляет запросы на сервер для получения обновленных данных. Это полезно, когда нужно поддерживать актуальность данных в реальном времени, но использование более продвинутых технологий, таких как **WebSockets** или **Server-Sent Events (SSE)**, невозможно или нецелесообразно.
## Как реализовать Polling в React:
В React **polling** можно реализовать с помощью встроенных методов, таких как `setInterval`, или с использованием библиотек для управления состоянием и запросами, например, **React Query** или **Apollo Client**.
```jsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function PollingExample() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('https://api.example.com/data');
setData(response.data);
} catch (error) {
console.error('Error fetching data:', error);
} finally {
setLoading(false);
}
};
// Первый запрос
fetchData();
// Polling: запрос каждые 5 секунд
const intervalId = setInterval(fetchData, 5000);
// Очистка интервала при размонтировании компонента
return () => clearInterval(intervalId);
}, []);
if (loading) return <p>Loading...</p>;
return (
<div>
<h1>Data from API:</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default PollingExample;
```
**Объяснение:**
- `useEffect` используется для выполнения запроса при монтировании компонента.
- `setInterval` запускает запрос каждые 5 секунд.
- `clearInterval` очищает интервал при размонтировании компонента, чтобы избежать утечек памяти.
## Преимущества Polling:
1. **Простота реализации:** Не требует сложной настройки сервера.
2. **Совместимость:** Работает с любым REST или GraphQL API.
3. **Поддержка старых браузеров:** В отличие от WebSockets, polling работает везде.
## Недостатки Polling:
1. **Высокая нагрузка на сервер:** Постоянные запросы могут создавать нагрузку.
2. **Задержки:** Данные обновляются только через заданный интервал.
3. **Неэффективность:** Много запросов могут быть избыточными, если данные не меняются.
## Когда использовать Polling:
- Когда нужно простое решение для обновления данных.
- Когда данные изменяются не очень часто.
- Когда использование WebSockets или SSE невозможно.
## Альтернативы Polling:
1. **WebSockets:** Для реального времени с двусторонней связью.
2. **Server-Sent Events (SSE):** Для односторонней передачи данных от сервера к клиенту.
3. **Long Polling:** Клиент отправляет запрос и ждет, пока сервер не вернет новые данные.

118
docs/api/06-long-polling.md Normal file
View File

@@ -0,0 +1,118 @@
---
sidebar_position: 6
---
# Long Polling
**Long Polling** — это техника, при которой клиент отправляет запрос на сервер и ждет ответа, пока сервер не вернет новые данные или не истечет время ожидания. В отличие от обычного **polling**, где клиент периодически отправляет запросы, **long polling** позволяет серверу "удерживать" запрос до тех пор, пока не появятся новые данные. Это делает **long polling** более эффективным, чем обычный **polling**, особенно для приложений, где данные обновляются нечасто.
Применяется, когда использование **WebSockets** или **SSE** невозможно. В React **long polling** можно легко реализовать с помощью fetch или Axios. Однако для более сложных сценариев лучше использовать **WebSockets** или **SSE**.
## Как работает Long Polling:
1. Клиент отправляет запрос на сервер.
2. Сервер не отвечает сразу, а ждет, пока не появятся новые данные.
3. Как только данные обновляются, сервер отправляет ответ клиенту.
4. Клиент получает ответ и сразу отправляет новый запрос, чтобы продолжить ожидание.
## Преимущества Long Polling:
- **Меньше запросов:** Сервер отвечает только тогда, когда есть новые данные.
- **Более быстрое обновление:** Данные доставляются клиенту сразу после их появления.
- **Простота:** Легче реализовать, чем WebSockets.
## Недостатки Long Polling:
- **Высокая нагрузка на сервер:** Много соединений могут оставаться открытыми.
- **Задержки:** Если данные не обновляются, запросы могут занимать много времени.
- **Сложность масштабирования:** Сервер должен поддерживать множество открытых соединений.
### Пример Long Polling с использованием fetch:
```javascript jsx
import React, { useState, useEffect } from 'react';
function LongPollingExample() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/long-polling');
const result = await response.json();
setData(result);
} catch (error) {
console.error('Error fetching data:', error);
} finally {
setLoading(false);
// После получения данных сразу отправляем новый запрос
fetchData();
}
};
useEffect(() => {
fetchData();
}, []);
if (loading) return <p>Loading...</p>;
return (
<div>
<h1>Data from Long Polling:</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default LongPollingExample;
```
**Объяснение:**
1. Запрос отправляется один раз при монтировании компонента.
2. Сервер "удерживает" запрос до тех пор, пока не появятся новые данные.
3. После получения данных клиент сразу отправляет новый запрос.
### Реализация Long Polling с помощью Axios:
Axios позволяет более удобно управлять запросами и обработкой ошибок.
```javascript jsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function LongPollingWithAxios() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const fetchData = async () => {
try {
const response = await axios.get('https://api.example.com/long-polling');
setData(response.data);
} catch (error) {
console.error('Error fetching data:', error);
} finally {
setLoading(false);
// После получения данных сразу отправляем новый запрос
fetchData();
}
};
useEffect(() => {
fetchData();
}, []);
if (loading) return <p>Loading...</p>;
return (
<div>
<h1>Data from Long Polling:</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default LongPollingWithAxios;
```
## Когда использовать Long Polling:
1. Редкие обновления данных: Когда данные обновляются нечасто, но нужно получать их как можно быстрее.
2. Реальное время: Когда WebSockets недоступны или их сложно реализовать.
3. Простота: Когда нужно простое решение для обновления данных.
## Альтернативы Long Polling:
1. WebSockets: Для двусторонней связи в реальном времени.
2. Server-Sent Events (SSE): Для односторонней передачи данных от сервера к клиенту.
3. Обычный Polling: Когда данные обновляются часто, и long polling не нужен.

5
docs/api/06-websocket.md
View File

@@ -1,5 +0,0 @@
---
sidebar_position: 6
---
# Websockets

5
docs/api/07-graphql.md
View File

@@ -1,5 +0,0 @@
---
sidebar_position: 7
---
# GraphQL

132
docs/api/07-server-side-events.md Normal file
View File

@@ -0,0 +1,132 @@
---
sidebar_position: 7
---
# Server Side Events (SSE)
**Server-Sent Events (SSE)** — это технология, которая позволяет серверу отправлять данные клиенту в реальном времени через одно HTTP-соединение. В отличие от WebSockets, SSE поддерживает только одностороннюю связь: сервер отправляет данные клиенту, но клиент не может отправлять данные серверу через SSE. Это делает SSE идеальным для сценариев, где серверу нужно "толкать" данные клиенту, например, для уведомлений, обновлений статуса или потоковой передачи данных.
## Основные особенности SSE:
1. **Односторонняя связь:** Сервер отправляет данные клиенту.
2. **Простота:** Использует стандартный HTTP-протокол.
3. **Автоматическое восстановление соединения:** Если соединение разрывается, клиент автоматически пытается восстановить его.
4. **Поддержка браузеров:** SSE поддерживается большинством современных браузеров.
## Как работает SSE:
1. Клиент создает соединение с сервером с помощью EventSource.
2. Сервер отправляет данные в формате текстового потока.
3. Клиент обрабатывает данные с помощью событий.
## Использование SSE в React:
В React SSE можно использовать с помощью встроенного объекта EventSource. Ниже приведен пример реализации.
```jsx
import React, { useState, useEffect } from 'react';
function SSEDemo() {
const [messages, setMessages] = useState([]);
useEffect(() => {
// Создаем соединение с сервером
const eventSource = new EventSource('https://api.example.com/sse');
// Обработчик события "message"
eventSource.onmessage = (event) => {
const newMessage = event.data;
setMessages((prevMessages) => [...prevMessages, newMessage]);
};
// Обработчик события "error"
eventSource.onerror = (error) => {
console.error('SSE error:', error);
eventSource.close(); // Закрываем соединение при ошибке
};
// Очистка при размонтировании компонента
return () => {
eventSource.close();
};
}, []);
return (
<div>
<h1>Server-Sent Events (SSE) Demo</h1>
<ul>
{messages.map((message, index) => (
<li key={index}>{message}</li>
))}
</ul>
</div>
);
}
export default SSEDemo;
```
**Объяснение:**
1. **EventSource:**
- Создается объект `EventSource`, который подключается к серверу по указанному URL.
- Сервер должен поддерживать SSE и отправлять данные в формате текстового потока.
2. **События:**
- `onmessage:` Обрабатывает данные, полученные от сервера.
- `onerror:` Обрабатывает ошибки соединения.
3. **Очистка:**
- При размонтировании компонента соединение закрывается с помощью `eventSource.close()`.
## Пример серверной реализации (Node.js + Express):
Для работы SSE сервер должен поддерживать отправку данных в формате текстового потока.
```js
const express = require('express');
const app = express();
app.get('/sse', (req, res) => {
// Устанавливаем заголовки для SSE
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// Отправляем данные клиенту каждые 2 секунды
const intervalId = setInterval(() => {
const data = `Server time: ${new Date().toLocaleTimeString()}`;
res.write(`data: ${JSON.stringify(data)}\n\n`); // Формат SSE
}, 2000);
// Очистка при разрыве соединения
req.on('close', () => {
clearInterval(intervalId);
res.end();
});
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
```
**Объяснение серверной части:**
1. **Заголовки:**
- `Content-Type: text/event-stream:` Указывает, что это поток событий.
- `Cache-Control: no-cache:` Отключает кэширование.
- `Connection: keep-alive:` Поддерживает соединение открытым.
2. **Формат данных:**
- Данные отправляются в формате `data: <message>\n\n`.
3. **Интервал:**
- Сервер отправляет данные клиенту каждые 2 секунды.
## Преимущества SSE:
1. Простота: Легко реализовать как на клиенте, так и на сервере.
2. Автоматическое восстановление: Клиент автоматически переподключается при разрыве соединения.
3. Эффективность: Меньше нагрузки на сервер по сравнению с polling.
## Недостатки SSE:
1. Односторонняя связь: Клиент не может отправлять данные серверу через SSE.
2. Ограниченная поддержка браузеров: Не поддерживается в Internet Explorer.
3. Ограничения протокола: Только текстовые данные.
## Когда использовать SSE:
1. Уведомления: Например, уведомления о новых сообщениях.
2. Обновления статуса: Например, статус заказа или задачи.
3. Потоковая передача данных: Например, ленты новостей или обновления котировок.
## Альтернативы SSE:
1. WebSockets: Для двусторонней связи в реальном времени.
2. Long Polling: Когда SSE недоступен.
3. Polling: Для простых сценариев.

162
docs/api/08-websocket.md Normal file
View File

@@ -0,0 +1,162 @@
---
sidebar_position: 8
---
# Websockets
WebSocket — это протокол связи, который обеспечивает **двустороннюю (full-duplex) связь** между клиентом и сервером в реальном времени. В отличие от HTTP, который работает по модели "запрос-ответ", WebSocket поддерживает постоянное соединение, позволяя серверу и клиенту обмениваться данными в любой момент без необходимости повторного установления соединения.
## Основные особенности WebSocket:
1. **Двусторонняя связь:** Клиент и сервер могут отправлять данные друг другу одновременно.
2. **Реальное время:** Данные передаются мгновенно, как только они доступны.
3. **Эффективность:** Меньше накладных расходов по сравнению с HTTP-запросами.
4. **Поддержка браузеров:** WebSocket поддерживается всеми современными браузерами.
## Как работает WebSocket:
1. Клиент и сервер устанавливают соединение через HTTP-запрос (handshake).
2. После успешного handshake соединение переключается на протокол WebSocket.
3. Клиент и сервер могут отправлять данные друг другу в реальном времени.
4. Соединение остается открытым, пока одна из сторон не закроет его.
## Использование WebSocket в React:
В React WebSocket можно использовать с помощью встроенного объекта `WebSocket`. Ниже приведен пример реализации.
**Пример использования WebSocket в React:**
```jsx
import React, { useState, useEffect } from 'react';
function WebSocketDemo() {
const [messages, setMessages] = useState([]);
const [inputValue, setInputValue] = useState('');
useEffect(() => {
// Создаем WebSocket-соединение
const socket = new WebSocket('wss://api.example.com/socket');
// Обработчик открытия соединения
socket.onopen = () => {
console.log('WebSocket connection established');
};
// Обработчик входящих сообщений
socket.onmessage = (event) => {
const newMessage = event.data;
setMessages((prevMessages) => [...prevMessages, newMessage]);
};
// Обработчик ошибок
socket.onerror = (error) => {
console.error('WebSocket error:', error);
};
// Обработчик закрытия соединения
socket.onclose = () => {
console.log('WebSocket connection closed');
};
// Очистка при размонтировании компонента
return () => {
socket.close();
};
}, []);
// Отправка сообщения на сервер
const sendMessage = () => {
const socket = new WebSocket('wss://api.example.com/socket');
if (socket.readyState === WebSocket.OPEN) {
socket.send(inputValue);
setInputValue('');
} else {
console.error('WebSocket is not open');
}
};
return (
<div>
<h1>WebSocket Demo</h1>
<ul>
{messages.map((message, index) => (
<li key={index}>{message}</li>
))}
</ul>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button onClick={sendMessage}>Send</button>
</div>
);
}
export default WebSocketDemo;
```
**Объяснение:**
1. **Создание WebSocket-соединения:**
- Используется объект `WebSocket`, который подключается к серверу по URL (например, `wss://api.example.com/socket`).
2. **События WebSocket:**
- `onopen`: Срабатывает при успешном установлении соединения.
- `onmessage`: Срабатывает при получении данных от сервера.
- `onerror`: Срабатывает при возникновении ошибки.
- `onclose`: Срабатывает при закрытии соединения.
3. **Отправка данных:**
- Метод `socket.send()` используется для отправки данных на сервер.
4. **Очистка:**
- При размонтировании компонента соединение закрывается с помощью `socket.close()`.
## Пример серверной реализации (Node.js + ws):
Для работы с WebSocket на сервере можно использовать библиотеку ws.
```js
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (socket) => {
console.log('New client connected');
// Отправка сообщения клиенту
socket.send('Welcome to the WebSocket server!');
// Обработка входящих сообщений
socket.on('message', (message) => {
console.log(`Received: ${message}`);
// Отправка ответа клиенту
socket.send(`You said: ${message}`);
});
// Обработка закрытия соединения
socket.on('close', () => {
console.log('Client disconnected');
});
});
console.log('WebSocket server is running on ws://localhost:8080');
```
**Объяснение серверной части:**
1. **Создание сервера:**
- Используется библиотека `ws` для создания WebSocket-сервера.
2. **Обработка соединений:**
- Сервер прослушивает входящие соединения и обрабатывает сообщения.
3. **Отправка данных:**
- Сервер отправляет данные клиенту с помощью `socket.send()`.
## Преимущества WebSocket:
1. **Реальное время:** Данные передаются мгновенно.
2. **Двусторонняя связь:** Клиент и сервер могут обмениваться данными одновременно.
3. **Эффективность:** Меньше накладных расходов по сравнению с HTTP.
## Недостатки WebSocket:
1. **Сложность:** Требуется больше усилий для реализации и поддержки.
2. **Ограничения:** Не все прокси и брандмауэры поддерживают WebSocket.
3. **Поддержка браузеров:** Хотя WebSocket поддерживается всеми современными браузерами, могут быть проблемы с устаревшими версиями.
## Когда использовать WebSocket:
1. **Чат-приложения:** Для мгновенного обмена сообщениями.
2. **Онлайн-игры:** Для синхронизации действий игроков.
3. **Финансовые приложения:** Для отображения котировок в реальном времени.
4. **Коллаборативные инструменты:** Например, совместное редактирование документов.
## Альтернативы WebSocket:
1. **Server-Sent Events (SSE):** Для односторонней связи (сервер → клиент).
2. **Long Polling:** Когда WebSocket недоступен.
3. **Polling:** Для простых сценариев.