การส่งข้อความด้วย postMessage
สื่อสารระหว่างเธรดหลักกับเวิร์กเกอร์
การส่งข้อความด้วย postMessage เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การสื่อสารด้วยข้อความ
เนื่องจากเธรดหลักและเวิร์กเกอร์มีหน่วยความจำแยกกัน ทั้งสองจึงสื่อสารกันด้วยการส่งข้อความ เมธอด postMessage ใช้ส่งข้อมูล ส่วนเหตุการณ์ message ใช้รับข้อมูล
การส่งข้อมูลไปยังเวิร์กเกอร์
จากเธรดหลัก ให้เรียกใช้ worker.postMessage(data) ข้อมูลอาจเป็นค่าเกือบทุกชนิด เช่น ตัวเลข สตริง อ็อบเจ็กต์ หรืออาร์เรย์
const worker = new Worker('worker.js');
worker.postMessage({ task: 'sum', numbers: [1, 2, 3, 4] });การรับข้อมูลใน worker
ภายใน worker ให้จัดการกับเหตุการณ์ message ค่าที่ส่งมาจะมาถึงทาง event.data
// worker.js
self.onmessage = (event) => {
const { task, numbers } = event.data;
console.log('worker received task:', task);
};การส่งคำตอบกลับ
worker คำนวณผลลัพธ์แล้วส่งกลับด้วย postMessage ของตัวเอง (โดยใช้ self หรือโกลบอลโดยปริยาย)
// worker.js
self.onmessage = (event) => {
const { numbers } = event.data;
const total = numbers.reduce((a, b) => a + b, 0);
self.postMessage(total); // send result back
};การรับคำตอบกลับ
เมื่อกลับมาที่เธรดหลัก ให้รับฟัง message บนออบเจ็กต์ worker เพื่อรับผลลัพธ์
worker.onmessage = (event) => {
console.log('result from worker:', event.data);
};รูปแบบ addEventListener
คุณสามารถใช้ addEventListener('message', ...) แทนคุณสมบัติ onmessage ได้ วิธีนี้ทำให้มีตัวรับฟังหลายตัวได้
worker.addEventListener('message', (event) => {
console.log('got:', event.data);
});การโคลนแบบมีโครงสร้าง
ข้อความจะถูกคัดลอกโดยใช้อัลกอริทึมการโคลนแบบมีโครงสร้าง ไม่ใช่ shared อัลกอริทึมนี้รองรับออบเจ็กต์ อาร์เรย์ แผนที่ เซต วันที่ และอาร์เรย์แบบกำหนดชนิด แต่ไม่รองรับฟังก์ชัน โหนด DOM หรือเมธอดของคลาส
// OK to send: numbers, strings, plain objects, arrays,
// Map, Set, Date, ArrayBuffer, typed arrays.
// NOT cloneable: functions, DOM nodes, Error stacks lost.โปรโตคอลข้อความ
สำหรับการดำเนินการหลายแบบ ให้ส่งฟิลด์ type เพื่อให้ worker ทราบว่าต้องทำอะไร วิธีนี้ทำให้ worker เดียวรองรับงานได้อย่างยืดหยุ่น
// main:
worker.postMessage({ type: 'multiply', a: 6, b: 7 });
// worker.js:
self.onmessage = (e) => {
if (e.data.type === 'multiply') {
self.postMessage(e.data.a * e.data.b);
}
};การจับคู่คำขอกับคำตอบ
เมื่อส่งข้อความจำนวนมาก ให้แนบ id เพื่อจับคู่คำตอบกับคำขอที่เกี่ยวข้อง worker จะส่ง id กลับมาในคำตอบ
// main: worker.postMessage({ id: 42, value: 'x' });
// worker: self.postMessage({ id: e.data.id, done: true });
// main can now match reply id 42 to its request.การสื่อสารสองทาง
การส่งข้อความเป็นการสื่อสารสองทิศทางและไม่พร้อมกัน หน้าเว็บยังคงส่งงานต่อไปได้ขณะที่ worker ทยอยส่งผลลัพธ์บางส่วนกลับมา ทั้งหมดนี้เกิดขึ้นโดยไม่บล็อกส่วนติดต่อผู้ใช้
// Worker can report progress repeatedly:
// self.postMessage({ type: 'progress', percent: 50 });
// self.postMessage({ type: 'done', result: data });การลบตัวรับฟังเหตุการณ์
เมื่อไม่จำเป็นต้องใช้ worker แล้ว ให้ลบตัวรับฟังเหตุการณ์และเรียก terminate เพื่อป้องกันหน่วยความจำรั่ว โดยเฉพาะในแอปแบบหน้าเดียวที่สร้าง worker ซ้ำ ๆ
worker.onmessage = null;
worker.terminate();ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจของคุณเกี่ยวกับการส่งข้อความระหว่าง worker
สรุป
คุณได้เรียนรู้การส่งข้อความระหว่าง worker:
postMessage(data)ใช้ส่งข้อมูล ส่วนเหตุการณ์messageใช้รับข้อมูล- ข้อมูลจะมาถึงทาง
event.data - ทั้งสองฝั่งสามารถส่งข้อมูลได้ จึงสื่อสารกันได้สองทิศทาง
- ข้อมูลจะถูกคัดลอกด้วยการโคลนแบบมีโครงสร้าง ไม่ใช่
shared - ใช้โปรโตคอล
type/idสำหรับงานหลายแบบ
ถัดไปคือออบเจ็กต์ที่โอนย้ายได้สำหรับข้อมูลแบบไม่ต้องคัดลอก
คำถามที่พบบ่อย
บทเรียน “การส่งข้อความด้วย postMessage” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การส่งข้อความด้วย postMessage” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การส่งข้อความด้วย postMessage”
สื่อสารระหว่างเธรดหลักกับเวิร์กเกอร์ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การส่งข้อความด้วย postMessage” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การสร้าง Web Worker
- การส่งข้อความด้วย postMessage
- ออบเจ็กต์ที่ถ่ายโอนได้
- กรณีใช้งานและข้อจำกัด