สตรีมจากเซิร์ฟเวอร์ด้วย +server.js
ส่งส่วนข้อมูลออกมาอย่างต่อเนื่องจากเส้นทาง API โดยใช้ ReadableStream
สตรีมจากเซิร์ฟเวอร์ด้วย +server.js เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
stream ที่ส่งจากเซิร์ฟเวอร์
ภายใน +server.js ให้ส่งคืน Response ที่ห่อหุ้ม ReadableStream
stream พื้นฐาน
สร้าง stream ที่ส่ง chunk ออกมาเป็นระยะ
export function GET() {
const stream = new ReadableStream({
async start(controller) {
for (const chunk of source) {
controller.enqueue(new TextEncoder().encode(chunk));
}
controller.close();
}
});
return new Response(stream);
}ชนิดเนื้อหา
กำหนดชนิดเนื้อหาที่เหมาะสม เช่น text/plain, text/event-stream, application/json (NDJSON) และอื่น ๆ
กรณีการใช้งาน
การสร้างข้อความด้วย AI บันทึกข้อมูลแบบเรียลไทม์ การดาวน์โหลดไฟล์ขนาดใหญ่ และการอัปเดตข้อมูลแบบค่อยเป็นค่อยไป
แรงดันย้อนกลับ
stream จะลดความเร็วในการผลิตข้อมูลเมื่อผู้บริโภคทำงานช้า เพื่อป้องกันการใช้หน่วยความจำเพิ่มขึ้นมากเกินไป
การรับข้อมูลฝั่งไคลเอนต์
ใช้ response.body.getReader() ที่ฝั่งไคลเอนต์เพื่ออ่าน stream
เหตุการณ์ที่ส่งจากเซิร์ฟเวอร์
สำหรับการผลักข้อมูลทางเดียวจากเซิร์ฟเวอร์ไปยังไคลเอนต์ SSE เหมาะเป็นอย่างยิ่ง โดยเข้ารหัสเหตุการณ์เป็น text/event-stream
ทางเลือกแทน WebSockets
สำหรับการสื่อสารสองทาง ให้เลือก WebSockets ผ่านเซิร์ฟเวอร์แยกต่างหากหรืออะแดปเตอร์ที่รองรับ
การยกเลิก
จัดการการยกเลิก stream ในฟังก์ชัน start เพื่อคืนทรัพยากร
การรองรับจากอะแดปเตอร์
อะแดปเตอร์ส่วนใหญ่รองรับการส่งข้อมูลผ่าน stream โปรดตรวจสอบเอกสารของอะแดปเตอร์สำหรับกรณีพิเศษ
ประสิทธิภาพ
การส่งข้อมูลผ่าน stream ช่วยลด TTFB และทำให้ไคลเอนต์ประมวลผลข้อมูลบางส่วนได้เร็วขึ้น
ตรวจสอบความเข้าใจ
คุณใช้คลาส stream ใดใน +server.js
ทบทวน
ใช้ ReadableStream ใน +server.js เพื่อส่งคืนข้อมูลจากเซิร์ฟเวอร์เป็น chunk ด้วยความหน่วงต่ำ
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “สตรีมจากเซิร์ฟเวอร์ด้วย +server.js” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สตรีมจากเซิร์ฟเวอร์ด้วย +server.js” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สตรีมจากเซิร์ฟเวอร์ด้วย +server.js”
ส่งส่วนข้อมูลออกมาอย่างต่อเนื่องจากเส้นทาง API โดยใช้ ReadableStream คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “สตรีมจากเซิร์ฟเวอร์ด้วย +server.js” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สตรีมข้อมูลด้วย Promise ใน load
- การโหลดแบบเลื่อนเวลาและประสบการณ์ใช้งานคล้าย Suspense
- สตรีมจากเซิร์ฟเวอร์ด้วย +server.js
- การไฮเดรตแบบก้าวหน้า