164 lines
8.0 KiB
Markdown
164 lines
8.0 KiB
Markdown
---
|
||
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:** Для простых сценариев.
|
||
|
||
🚀 **_Источник: DeepSeek_** |