Polling, long polling och SSE
Jämför traditionella metoder som polling och long polling med Server-Sent Events för att skicka data.
Polling, long polling och SSE är en gratis lektion i Programmering av WebSockets och system i realtid på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Programmering av WebSockets och system i realtid, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Programmering av WebSockets och system i realtid innehåller totalt 4 lektioner.
HTTP:s realtidsutmaning
HTTP är tillståndslöst och enkelriktat: klienten frågar och servern svarar en gång. För livechatt eller aktiekurser är det ineffektivt att fråga hela tiden eller vänta.
Introduktion till polling
Polling är det enklaste knepet för pseudorealtid: klienten frågar servern efter nya data med ett fast intervall och får antingen uppdateringar eller ett tomt svar varje gång.
Kodexempel med polling
Här är en JavaScript-klient som pollar en server varannan sekund efter uppdateringar – öppna konsolen för att se när den körs.
<!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>Pollings ineffektivitet
Polling är ineffektivt: hög fördröjning mellan förfrågningarna, många tomma svar som förbrukar resurser och dålig skalbarhet när många klienter pollar ofta.
Här kommer long polling
Long polling är smartare: i stället för att svara tomt håller servern begäran öppen tills data finns tillgängliga eller tidsgränsen nås. Därefter ansluter klienten igen.
Så fungerar long polling
Cykeln för long polling: klienten skickar en begäran, servern väntar på data eller tidsgränsen, servern svarar och stänger anslutningen, och klienten skickar omedelbart en ny begäran för att starta om cykeln.
Klientlogik för long polling
Här är klientmönstret för long polling: klienten behandlar varje svar och öppnar sedan omedelbart anslutningen igen. Vid fel försöker den igen efter en fördröjning.
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 processFördelar och nackdelar med long polling
Long polling minskar fördröjningen och antalet förfrågningar jämfört med vanlig polling, men bygger fortfarande på modellen med begäran och svar – varje uppdatering innebär att en anslutning upprättas och avslutas.
Server-Sent Events (SSE)
Server-Sent Events (SSE) ger äkta server push över en enda långlivad HTTP-anslutning. Kommunikationen är enkelriktad, från server till klient, vilket passar perfekt för flöden, aktiekurser och aviseringar.
SSE-klientexempel
Det inbyggda EventSource-API:t gör det enkelt att prenumerera på ett SSE-flöde – anslutningen förblir öppen tills du stänger den eller ett fel uppstår.
<!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>Snabb kontroll: jämför metoderna
Vilka av följande påståenden om Polling, Long Polling och Server-Sent Events (SSE) stämmer?
Sammanfattning: enkelriktad push
Sammanfattning: polling frågar upprepade gånger (enkelt men ineffektivt), long polling håller begäran öppen och SSE skickar data enkelriktat över en bestående anslutning.
Lär dig Programmering av WebSockets och system i realtid med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 12
- Lektioner
- 47
Vanliga frågor
Är lektionen ”Polling, long polling och SSE” gratis?
Ja – hela texten till ”Polling, long polling och SSE” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Programmering av WebSockets och system i realtid, kan Ni uppgradera till CoddyKit PRO. Kursen i Programmering av WebSockets och system i realtid innehåller totalt 4 lektioner.
Vad lär jag mig i ”Polling, long polling och SSE”?
Jämför traditionella metoder som polling och long polling med Server-Sent Events för att skicka data. Ni övar på Programmering av WebSockets och system i realtid med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Programmering av WebSockets och system i realtid?
Du behöver inga förkunskaper. Utbildningen i Programmering av WebSockets och system i realtid på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Polling, long polling och SSE”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Programmering av WebSockets och system i realtid-lektionen?
Ja. Varje Programmering av WebSockets och system i realtid-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Webbkommunikationens utveckling
- Polling, long polling och SSE
- Introduktion till WebSockets: en ny era
- Välj rätt realtidsteknik