Polling, long polling y SSE
Compare los métodos tradicionales, como polling y long polling, con Server-Sent Events para enviar datos.
Polling, long polling y SSE es una lección gratuita de WebSockets & Realtime Systems Programming en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de WebSockets & Realtime Systems Programming, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de WebSockets & Realtime Systems Programming incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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.
Aprende WebSockets & Realtime Systems Programming con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 12
- Lecciones
- 47
Preguntas frecuentes
¿La lección «Polling, long polling y SSE» es gratis?
Sí — el texto completo de «Polling, long polling y SSE» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de WebSockets & Realtime Systems Programming, actualiza a CoddyKit PRO. El curso de WebSockets & Realtime Systems Programming incluye 4 lecciones en total.
¿Qué aprenderé en «Polling, long polling y SSE»?
Compare los métodos tradicionales, como polling y long polling, con Server-Sent Events para enviar datos. Practicas WebSockets & Realtime Systems Programming con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar WebSockets & Realtime Systems Programming?
No se requiere experiencia previa. WebSockets & Realtime Systems Programming en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Polling, long polling y SSE»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de WebSockets & Realtime Systems Programming?
Sí. Cada lección de WebSockets & Realtime Systems Programming incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- La evolución de la comunicación web
- Polling, long polling y SSE
- Introducción a WebSockets: una nueva era
- Cómo elegir la tecnología de tiempo real adecuada