Какие знаешь события Web Socket?

Question

deepseek-v3.2 · Accepted Answer

## События WebSocket API

WebSocket API предоставляет ряд стандартных событий, которые позволяют реагировать на различные этапы жизненного цикла соединения и передачу данных. Вот основные события, которые разработчики Frontend должны знать и обрабатывать:

### Основные события объекта WebSocket

#### **1. `open`**
Срабатывает при успешном установлении соединения с сервером.

```javascript
const socket = new WebSocket('wss://api.example.com');

socket.addEventListener('open', (event) => {
    console.log('Соединение установлено');
    socket.send(JSON.stringify({ type: 'hello' }));
});
```

#### **2. `message`**
Наиболее важное событие, возникающее при получении данных от сервера.

```javascript
socket.addEventListener('message', (event) => {
    // Данные могут быть в разных форматах
    if (typeof event.data === 'string') {
        const data = JSON.parse(event.data);
        console.log('Получены данные:', data);
    } else if (event.data instanceof Blob) {
        // Обработка бинарных данных
        console.log('Получен Blob');
    }
});
```

#### **3. `error`**
Происходит при возникновении ошибки в соединении.

```javascript
socket.addEventListener('error', (error) => {
    console.error('WebSocket ошибка:', error);
    // Соединение автоматически закрывается при ошибке
});
```

#### **4. `close`**
Срабатывает при закрытии соединения, как запланированном, так и при ошибке.

```javascript
socket.addEventListener('close', (event) => {
    console.log(`Соединение закрыто. Код: ${event.code}, Причина: ${event.reason}`);
    
    // event содержит важные свойства:
    // - code: числовой код закрытия
    // - reason: строка с объяснением
    // - wasClean: булево значение, указывающее было ли закрытие "чистым"
    
    if (!event.wasClean) {
        console.warn('Соединение разорвано неожиданно');
        // Можно реализовать переподключение
    }
});
```

### Коды закрытия соединения (CloseEvent.code)

В событии `close` важную роль играют стандартные коды:

- **`1000`** - Нормальное закрытие
- **`1001`** - Уход со стороны сервера
- **`1002`** - Протокольная ошибка
- **`1003`** - Неподдерживаемый тип данных
- **`1005`** - Без кода статуса (браузерный)
- **`1006`** - Ненормальное закрытие
- **`1007`** - Несогласованные данные
- **`1008`** - Нарушение политики
- **`1009`** - Слишком большое сообщение
- **`1011`** - Непредвиденная ошибка сервера

### Практические аспекты обработки событий

#### **Обработка бинарных данных**
```javascript
socket.binaryType = 'arraybuffer'; // или 'blob'

socket.addEventListener('message', (event) => {
    if (event.data instanceof ArrayBuffer) {
        const buffer = new Uint8Array(event.data);
        // Обработка бинарных данных
    }
});
```

#### **Управление состоянием соединения**
```javascript
class WebSocketManager {
    constructor(url) {
        this.socket = null;
        this.url = url;
        this.reconnectAttempts = 0;
        this.maxReconnectAttempts = 5;
        
        this.init();
    }
    
    init() {
        this.socket = new WebSocket(this.url);
        
        this.socket.onopen = () => {
            console.log('Connected');
            this.reconnectAttempts = 0;
        };
        
        this.socket.onclose = (event) => {
            console.log('Disconnected');
            this.handleReconnection();
        };
        
        this.socket.onerror = (error) => {
            console.error('WebSocket error:', error);
        };
    }
    
    handleReconnection() {
        if (this.reconnectAttempts < this.maxReconnectAttempts) {
            this.reconnectAttempts++;
            setTimeout(() => this.init(), 1000 * this.reconnectAttempts);
        }
    }
}
```

### **Рекомендации по использованию**

1. **Всегда обрабатывайте все события** - даже если кажется, что некоторые из них не нужны
2. **Используйте `addEventListener` вместо свойств `on***`** - это позволяет добавлять несколько обработчиков
3. **Проверяйте состояние соединения** перед отправкой данных:
   ```javascript
   if (socket.readyState === WebSocket.OPEN) {
       socket.send(data);
   }
   ```
4. **Реализуйте механизм переподключения** для обработки разрывов соединения
5. **Обрабатывайте бинарные и текстовые данные** отдельно
6. **Всегда закрывайте соединение корректно**:
   ```javascript
   socket.close(1000, 'Пользователь покинул страницу');
   ```

### **Состояния соединения (readyState)**

Хотя это не события, но тесно связаны:
- **`CONNECTING (0)`** - Соединение еще не открыто
- **`OPEN (1)`** - Соединение открыто и готово к обмену
- **`CLOSING (2)`** - Соединение в процессе закрытия
- **`CLOSED (3)`** - Соединение закрыто или не может быть открыто

Понимание и правильная обработка этих событий WebSocket критически важна для создания надежных real-time приложений, обеспечивая стабильную связь между клиентом и сервером даже в условиях нестабильного сетевого соединения.

Какие знаешь события Web Socket?

Комментарии (2)

События WebSocket API

Основные события объекта WebSocket

1. `open`

2. `message`

3. `error`

4. `close`

Коды закрытия соединения (CloseEvent.code)

Практические аспекты обработки событий

Обработка бинарных данных

Управление состоянием соединения

Рекомендации по использованию

Состояния соединения (readyState)

События WebSocket в веб-разработке

Ключевые события объекта WebSocket

1. open (Событие открытия соединения)

2. message (Событие получения сообщения)

3. error (Событие ошибки)

4. close (Событие закрытия соединения)

Дополнительные аспекты и best practices

Коды закрытия (event.code)

Практические шаблоны использования

Особенности реализации в разных средах