Kyselyt, pitkät kyselyt ja SSE
Vertailkaa perinteisiä menetelmiä, kuten kyselyjä ja pitkiä kyselyjä, Server-Sent Events -tapahtumiin tietojen välittämisessä.
Kyselyt, pitkät kyselyt ja SSE on ilmainen WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-kurssilla on yhteensä 4 oppituntia.
HTTP:n reaaliaikainen haaste
HTTP on tilaton ja yksisuuntainen: asiakas tekee pyynnön ja palvelin vastaa kerran. Reaaliaikaisessa keskustelussa tai kurssinoteerauksissa jatkuva kysely tai odottaminen on tehotonta.
Kyselyn esittely
Kysely on yksinkertaisin näennäisreaaliaikainen ratkaisu: asiakas pyytää palvelimelta uusia tietoja tietyin väliajoin ja saa joka kerta joko päivityksiä tai tyhjän vastauksen.
Kyselyn koodiesimerkki
Tässä on JavaScript-asiakas, joka kysyy palvelimelta päivityksiä kahden sekunnin välein — avaa konsoli ja seuraa pyyntöjen lähettämistä.
<!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>Kyselyn tehottomuus
Kysely on tehotonta: kyselyjen väliin jää paljon viivettä, monet tyhjät vastaukset kuluttavat resursseja ja suorituskyky heikkenee, kun monet asiakkaat kyselevät usein.
Pitkän kyselyn käyttöönotto
Pitkä kysely on älykkäämpi ratkaisu: tyhjän vastauksen sijaan palvelin pitää pyynnön avoinna, kunnes tietoja on saatavilla tai pyyntö aikakatkaistaan. Sen jälkeen asiakas muodostaa yhteyden uudelleen.
Miten pitkä kysely toimii
Pitkän kyselyn kierto: asiakas lähettää pyynnön, palvelin odottaa tietoja tai aikakatkaisua, palvelin vastaa ja sulkee yhteyden, ja asiakas lähettää heti uuden pyynnön aloittaakseen kierroksen uudelleen.
Pitkän kyselyn asiakaslogiikka
Tässä on pitkän kyselyn asiakasmalli: se käsittelee jokaisen vastauksen ja avaa sitten yhteyden heti uudelleen (virheen sattuessa se yrittää uudelleen viiveen jälkeen).
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 processPitkän kyselyn hyvät ja huonot puolet
Pitkä kysely vähentää viivettä ja pyyntöjen määrää tavalliseen kyselyyn verrattuna, mutta perustuu silti pyyntö–vastaus-malliin — jokainen päivitys muodostaa yhteyden ja purkaa sen uudelleen.
Server-Sent Events (SSE)
Server-Sent Events (SSE) mahdollistaa aidon palvelimen työntämän tiedonsiirron yhden pitkäkestoisen HTTP-yhteyden kautta. Se on yksisuuntaista (palvelimelta asiakkaalle) ja sopii erinomaisesti syötteille, kurssinoteerauksille ja ilmoituksille.
SSE-asiakkaan esimerkki
Selaimen natiivi EventSource-rajapinta tekee SSE-virtaan liittymisestä helppoa — yhteys pysyy avoinna, kunnes suljet sen tai tapahtuu virhe.
<!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>Pika-arviointi: menetelmien vertailu
Mitkä seuraavista Pollingia, Long Pollingia ja Server-Sent Events (SSE) koskevista väitteistä ovat totta?
Kertaus: yksisuuntainen tiedonsiirto
Kertaus: polling kysyy toistuvasti (yksinkertaista mutta tehotonta), long polling pitää pyynnön avoinna ja SSE työntää tietoja yksisuuntaisesti pysyvän yhteyden kautta.
Opi WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 12
- Oppitunnit
- 47
Usein kysytyt kysymykset
Onko oppitunti ”Kyselyt, pitkät kyselyt ja SSE” ilmainen?
Kyllä – oppitunnin ”Kyselyt, pitkät kyselyt ja SSE” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-kurssin, päivitä CoddyKit PROhon. WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Kyselyt, pitkät kyselyt ja SSE”?
Vertailkaa perinteisiä menetelmiä, kuten kyselyjä ja pitkiä kyselyjä, Server-Sent Events -tapahtumiin tietojen välittämisessä. Harjoittelet WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Kyselyt, pitkät kyselyt ja SSE”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-oppitunnilla?
Kyllä. Jokainen WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Verkkoviestinnän kehitys
- Kyselyt, pitkät kyselyt ja SSE
- WebSocketien esittely: uusi aikakausi
- Oikean reaaliaikateknologian valinta