พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน onmessage Event Attribute

onmessage ใน HTML5 เป็น Event Attribute ที่ใช้สำหรับการรับข้อความ (message) ที่ส่งมาจาก Web Workers หรือจากหน้าต่างอื่น (เช่น ผ่าน postMessage() เมื่อมีการส่งข้อมูลระหว่าง iframe, window, หรือ web worker) ในกรณีที่มีการสื่อสารระหว่างกันผ่าน JavaScript

การใช้งาน onmessage Event Attribute

  1. การสื่อสารระหว่าง iframe และหน้าต่างหลัก
    • เราสามารถใช้ onmessage เพื่อรับข้อความที่ส่งมาจาก iframe หรือจากหน้าต่างอื่นโดยใช้วิธีการ postMessage()
  2. การสื่อสารกับ Web Worker
    • เมื่อมีการทำงานเบื้องหลังโดยใช้ Web Workers เราสามารถใช้ onmessage เพื่อรับข้อมูลจาก Web Worker ที่ทำงานอยู่เบื้องหลังนั้น

การใช้ onmessage กับ iframe และ postMessage()

HTML
<!-- main.html -->
<!DOCTYPE html>
<html>
<body>

<iframe id="myFrame" src="iframe.html" style="width:300px;height:200px;"></iframe>

<script>
  // ตั้งค่าให้ตัวหลักฟังข้อความที่ถูกส่งเข้ามา
  window.onmessage = function(event) {
    if (event.origin !== "http://example.com") {
      return; // ตรวจสอบแหล่งที่มาของข้อความเพื่อความปลอดภัย
    }
    console.log("ข้อความที่รับจาก iframe:", event.data);
  };

  // ส่งข้อความไปยัง iframe
  var iframe = document.getElementById("myFrame");
  iframe.contentWindow.postMessage("Hello from main page!", "http://example.com");
</script>

</body>
</html>
HTML
<!-- iframe.html -->
<!DOCTYPE html>
<html>
<body>

<script>
  // รับข้อความที่ส่งมาจากหน้าต่างหลัก
  window.onmessage = function(event) {
    if (event.origin !== "http://example.com") {
      return; // ตรวจสอบแหล่งที่มาของข้อความเพื่อความปลอดภัย
    }
    console.log("ข้อความที่รับจากหน้าต่างหลัก:", event.data);
    
    // ส่งข้อความกลับไปยังหน้าต่างหลัก
    event.source.postMessage("Hello from iframe!", event.origin);
  };
</script>

</body>
</html>

ในตัวอย่างนี้มีการสื่อสารระหว่างหน้าต่างหลักและ iframe ผ่าน onmessage และ postMessage() โดยการตรวจสอบ event.origin เพื่อป้องกันการโจมตีจากแหล่งที่มาไม่รู้จัก

การใช้ onmessage กับ Web Worker

HTML
<!DOCTYPE html>
<html>
<body>

<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
  var worker;

  function startWorker() {
    if (typeof(Worker) !== "undefined") {
      if (typeof(worker) == "undefined") {
        worker = new Worker("worker.js");
      }
      // รอรับข้อความจาก Worker
      worker.onmessage = function(event) {
        console.log("ข้อความที่รับจาก Worker:", event.data);
      };
    } else {
      console.log("Web Workers ไม่รองรับในเบราว์เซอร์นี้");
    }
  }

  function stopWorker() {
    worker.terminate();
    worker = undefined;
  }
</script>

</body>
</html>
JavaScript
// worker.js
var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i); // ส่งข้อความกลับไปยัง main thread
  setTimeout(timedCount, 1000);
}

timedCount();

ในตัวอย่างนี้ Web Worker จะส่งข้อความ (i) กลับไปยัง main thread ทุก ๆ 1 วินาที ซึ่ง main thread จะรับข้อมูลนั้นผ่าน onmessage และสามารถแสดงข้อมูลหรือประมวลผลได้ตามต้องการ

การประยุกต์ใช้งาน onmessage

  1. การอัปเดตข้อมูลแบบเรียลไทม์
    • สามารถใช้ onmessage สำหรับการอัปเดตข้อมูลระหว่างหน้าต่างต่าง ๆ โดยไม่ต้อง refresh หน้า
  2. การแบ่งงานหนักไปยัง Web Workers
    • สำหรับงานที่ใช้เวลาประมวลผลนานหรือกินทรัพยากร CPU สูง สามารถแบ่งงานไปยัง Web Worker และรับผลลัพธ์ผ่าน onmessage
  3. การสื่อสารข้ามโดเมน
    • สามารถใช้ onmessage เพื่อสื่อสารข้ามโดเมนหรือข้าม iframe ได้อย่างปลอดภัย ผ่านการตรวจสอบ event.origin
Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ