Опрос, длинный опрос и SSE
Сравните традиционные методы, такие как опрос и длинный опрос, с Server-Sent Events для передачи данных.
«Опрос, длинный опрос и SSE» — бесплатный урок WebSockets & Realtime Systems Programming на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения WebSockets & Realtime Systems Programming, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс WebSockets & Realtime Systems Programming содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
HTTP's Realtime Challenge
HTTP is stateless and unidirectional: the client asks, the server answers once. For live chat or tickers, constant asking or waiting is inefficient.
Introducing Polling
Polling is the simplest pseudo-realtime trick: the client asks the server for new data on a fixed interval, getting updates or an empty reply each time.
Polling Code Example
Here's a JavaScript client that polls a server every 2 seconds for updates — open your console to watch it fire.
<!DOCTYPE html>
<html>
<head>
<title>Polling Example</title>
</head>
<body>
<h1>Polling Status: <span id="status">Waiting...</span></h1>
<script>
function fetchData() {
// In a real app, this would be a server endpoint
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => {
const statusElement = document.getElementById('status');
statusElement.innerText = `Update at ${new Date().toLocaleTimeString()}`;
console.log('Polled:', data.title);
})
.catch(error => console.error('Polling error:', error));
}
// Poll every 2 seconds (2000 milliseconds)
setInterval(fetchData, 2000);
fetchData(); // Initial fetch to start
</script>
</body>
</html>Polling's Inefficiency
Polling is wasteful: high latency between polls, many empty responses burning resources, and poor scaling when many clients poll often.
Enter Long Polling
Long polling is smarter: instead of replying empty, the server holds the request open until data is ready or it times out, then the client reconnects.
How Long Polling Works
The long polling cycle: client requests, server waits for data or timeout, server responds and closes, client immediately re-requests to restart.
Long Polling Client Logic
Here's the long polling client pattern: it processes each response, then immediately reopens the connection (retrying after a delay on error).
function longPoll() {
console.log('Long polling for updates...');
fetch('/api/longpoll') // Imagine this endpoint holds the request
.then(response => response.json())
.then(data => {
if (data && data.message) {
console.log('Received update:', data.message);
// In a real app, update UI here
} else {
console.log('No new data, server likely timed out or sent empty.');
}
longPoll(); // Immediately send a new request
})
.catch(error => {
console.error('Long polling error:', error);
// Retry after a delay on error to prevent flooding
setTimeout(longPoll, 3000);
});
}
longPoll(); // Start the long polling processLong Polling's Pros & Cons
Long polling cuts latency and request count versus plain polling, but it still rides the request-response model — each update sets up and tears down a connection.
Server-Sent Events (SSE)
Server-Sent Events (SSE) give true server push over one long-lived HTTP connection. It's one-way (server to client) — perfect for feeds, tickers, notifications.
SSE Client Example
The native EventSource API makes subscribing to an SSE stream easy — the connection stays open until you close it or an error hits.
<!DOCTYPE html>
<html>
<head>
<title>SSE Example</title>
</head>
<body>
<h1>SSE Updates:</h1>
<ul id="events"></ul>
<script>
// Imagine a server at /sse-stream sending events
const eventSource = new EventSource('https://example.com/sse-stream'); // Replace with a real SSE endpoint
eventSource.onopen = () => {
console.log('SSE connection opened.');
const listItem = document.createElement('li');
listItem.textContent = `Connection opened at ${new Date().toLocaleTimeString()}`;
document.getElementById('events').appendChild(listItem);
};
eventSource.onmessage = (event) => {
const listItem = document.createElement('li');
listItem.textContent = `New message: ${event.data}`;
document.getElementById('events').appendChild(listItem);
console.log('Received SSE message:', event.data);
};
eventSource.onerror = (error) => {
console.error('SSE Error:', error);
const listItem = document.createElement('li');
listItem.textContent = `Error: ${error.message || 'Unknown'}`;
document.getElementById('events').appendChild(listItem);
eventSource.close(); // Close connection on error
};
// You can also listen for custom named events:
// eventSource.addEventListener('myCustomEvent', (event) => {
// console.log('Custom event data:', event.data);
// });
</script>
</body>
</html>Quick Check: Compare Methods
Which of the following statements about Polling, Long Polling, and Server-Sent Events (SSE) are true?
Recap: Unidirectional Push
Recap: polling repeatedly asks (simple but wasteful), long polling holds the request open, and SSE pushes one-way over a persistent connection.
Изучай WebSockets & Realtime Systems Programming с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 12
- Уроки
- 47
Часто задаваемые вопросы
Урок «Опрос, длинный опрос и SSE» бесплатный?
Да — полный текст урока «Опрос, длинный опрос и SSE» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс WebSockets & Realtime Systems Programming, подпишись на CoddyKit PRO. Курс WebSockets & Realtime Systems Programming содержит 4 уроков всего.
Чему я научусь в уроке «Опрос, длинный опрос и SSE»?
Сравните традиционные методы, такие как опрос и длинный опрос, с Server-Sent Events для передачи данных. Ты практикуешь WebSockets & Realtime Systems Programming с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать WebSockets & Realtime Systems Programming?
Предыдущий опыт не требуется. WebSockets & Realtime Systems Programming на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Опрос, длинный опрос и SSE»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке WebSockets & Realtime Systems Programming?
Да. Каждый урок WebSockets & Realtime Systems Programming включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Эволюция веб-коммуникации
- Опрос, длинный опрос и SSE
- Введение в WebSockets: новая эра
- Выбор подходящей технологии реального времени