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

Question

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

YeaHub · Accepted Answer

Существует несколько стратегий для эмуляции 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() })}

`);
  }, 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);
}