Как происходит работа с WebSocket на Frontend?

WebSocket на Frontend

WebSocket - это протокол для двусторонней коммуникации между клиентом и сервером через одно TCP соединение. В отличие от HTTP, где клиент всегда инициирует запрос, WebSocket позволяет серверу отправлять данные клиенту без запроса.

Создание WebSocket соединения

const socket = new WebSocket('ws://localhost:8000/ws');
const secureSocket = new WebSocket('wss://example.com/ws');

События WebSocket

const socket = new WebSocket('ws://localhost:8000/chat');

socket.onopen = function(event) {
  console.log('Соединение установлено');
  socket.send(JSON.stringify({ type: 'init', userId: 123 }));
};

socket.onmessage = function(event) {
  const data = JSON.parse(event.data);
  console.log('Получено сообщение:', data);
  updateUI(data);
};

socket.onerror = function(event) {
  console.error('WebSocket ошибка:', event);
};

socket.onclose = function(event) {
  console.log('Соединение закрыто');
};

Отправка данных

function sendMessage(message) {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify({
      type: 'message',
      text: message,
      timestamp: new Date()
    }));
  } else {
    console.log('Соединение не готово');
  }
}

readyState соединения

if (socket.readyState === WebSocket.OPEN) {
  socket.send('Сообщение');
}

Пример чата с переподключением

class ChatManager {
  constructor(url) {
    this.url = url;
    this.socket = null;
    this.reconnectInterval = 3000;
    this.messageHandlers = [];
  }

  connect() {
    try {
      this.socket = new WebSocket(this.url);
      
      this.socket.onopen = () => {
        console.log('Чат подключен');
        this.notifyHandlers({ type: 'connected' });
      };
      
      this.socket.onmessage = (event) => {
        const message = JSON.parse(event.data);
        this.notifyHandlers(message);
      };
      
      this.socket.onerror = (error) => {
        console.error('Ошибка чата:', error);
      };
      
      this.socket.onclose = () => {
        setTimeout(() => this.connect(), this.reconnectInterval);
      };
    } catch (error) {
      console.error('Ошибка подключения:', error);
    }
  }
  
  sendMessage(text) {
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(JSON.stringify({
        type: 'message',
        text,
        timestamp: new Date().toISOString()
      }));
    }
  }
  
  close() {
    if (this.socket) {
      this.socket.close();
    }
  }
}

Лучшие практики

• Всегда проверяй readyState перед отправкой
• Реализуй переподключение при потере соединения
• Используй heartbeat для отслеживания активного соединения
• Обрабатывай ошибки и закрытия соединения
• Закрывай соединение при размонтировании компонента