การสำรวจข้อมูล การสำรวจข้อมูลระยะยาว และ SSE
เปรียบเทียบวิธีดั้งเดิม เช่น การสำรวจข้อมูลและการสำรวจข้อมูลระยะยาว กับเหตุการณ์ที่ส่งจากเซิร์ฟเวอร์สำหรับการผลักข้อมูล
การสำรวจข้อมูล การสำรวจข้อมูลระยะยาว และ SSE เป็นบทเรียน WebSockets & Realtime Systems Programming ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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 ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 12
- บทเรียน
- 47
คำถามที่พบบ่อย
บทเรียน “การสำรวจข้อมูล การสำรวจข้อมูลระยะยาว และ SSE” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสำรวจข้อมูล การสำรวจข้อมูลระยะยาว และ SSE” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส WebSockets & Realtime Systems Programming ให้อัปเกรดเป็น CoddyKit PRO คอร์ส WebSockets & Realtime Systems Programming มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสำรวจข้อมูล การสำรวจข้อมูลระยะยาว และ SSE”
เปรียบเทียบวิธีดั้งเดิม เช่น การสำรวจข้อมูลและการสำรวจข้อมูลระยะยาว กับเหตุการณ์ที่ส่งจากเซิร์ฟเวอร์สำหรับการผลักข้อมูล คุณปฏิบัติ WebSockets & Realtime Systems Programming ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 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: ยุคใหม่
- การเลือกเทคโนโลยีเรียลไทม์ที่เหมาะสม