Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про JavaScript: websocket, fallback

Если сервер не поддерживает WebSockets, как можно реализовать похожее поведение на стандартном JavaScript?

Этот вопрос проверяет знание альтернативных подходов к real-time коммуникации когда WebSockets недоступны.

Короткий ответ

Если сервер не поддерживает WebSockets, можно использовать Server-Sent Events (SSE) для one-way коммуникации, long polling для эмуляции real-time, short polling для периодических запросов, или WebRTC для peer-to-peer соединений. Также можно использовать коммерческие сервисы like Pusher или Firebase для real-time функциональности.

Длинный ответ

Существует несколько стратегий для эмуляции real-time поведения без WebSockets.

1. Server-Sent Events (SSE):

Клиент:

const eventSource = new EventSource('/updates');

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Update received:', data);
};

eventSource.onerror = (error) => {
  console.error('SSE error:', error);
};

// Закрытие соединения
// eventSource.close();

Сервер (Node.js + Express):

app.get('/updates', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });

  // Отправка данных каждые 5 секунд
  const interval = setInterval(() => {
    res.write(`data: ${JSON.stringify({ time: Date.now() })}\n\n`);
  }, 5000);

  // Очистка при разрыве соединения
  req.on('close', () => {
    clearInterval(interval);
  });
});

2. Long Polling:

Клиент:

function longPoll() {
  fetch('/messages')
    .then(response => response.json())
    .then(messages => {
      // Обработка сообщений
      processMessages(messages);
      
      // Немедленно начинаем следующий запрос
      longPoll();
    })
    .catch(error => {
      console.error('Polling error:', error);
      // Повтор через 5 секунд при ошибке
      setTimeout(longPoll, 5000);
    });
}

// Запуск long polling
longPoll();

Сервер:

const messagesQueue = [];

app.get('/messages', (req, res) => {
  // Ждем новые сообщения до 30 секунд
  const checkMessages = () => {
    if (messagesQueue.length > 0) {
      res.json(messagesQueue.splice(0));
    } else {
      setTimeout(checkMessages, 1000);
    }
  };

  // Таймаут 30 секунд
  const timeout = setTimeout(() => {
    res.json([]);
  }, 30000);

  checkMessages();
});

// Добавление сообщения
app.post('/messages', (req, res) => {
  messagesQueue.push(req.body);
  res.json({ status: 'ok' });
});

3. Short Polling:

Клиент:

// Периодические запросы каждые 5 секунд
setInterval(() => {
  fetch('/updates')
    .then(response => response.json())
    .then(updates => {
      if (updates.length > 0) {
        handleUpdates(updates);
      }
    });
}, 5000);

4. Comet (Hidden iframe):

// Исторический подход
function createCometConnection() {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = '/comet-endpoint';
  document.body.appendChild(iframe);
  
  // Сервер постепенно отправляет данные в iframe
}

5. WebRTC Data Channels:

// Peer-to-peer соединение
const peerConnection = new RTCPeerConnection();
const dataChannel = peerConnection.createDataChannel('chat');

dataChannel.onmessage = (event) => {
  console.log('Received:', event.data);
};

dataChannel.onopen = () => {
  dataChannel.send('Hello via WebRTC!');
};

Fallback стратегия:

function createRealtimeConnection(url) {
  // Проверяем поддержку WebSockets
  if ('WebSocket' in window) {
    try {
      return new WebSocket(url);
    } catch (e) {
      // WebSocket недоступен, используем fallback
    }
  }
  
  // Проверяем поддержку SSE
  if ('EventSource' in window) {
    return new EventSource(url);
  }
  
  // Используем long polling как последний вариант
  return createLongPollingConnection(url);
}

Уровень

  • Рейтинг:

    2

  • Сложность:

    7

Навыки

  • JavaScript

    JavaScript

Ключевые слова

#websocket

#fallback

Подпишись на React Developer в телеграм