ในเว็บแอปพลิเคชันสมัยใหม่ การส่งข้อมูลจาก JavaScript ฝั่งไคลเอ็นต์ไปยังเซิร์ฟเวอร์ถือเป็นงานทั่วไป วิธีหนึ่งที่ได้รับความนิยมในการบรรลุเป้าหมายนี้คือการใช้คำขอ AJAX อย่างไรก็ตาม มีบางสถานการณ์ที่ AJAX ไม่เหมาะสม เช่น เมื่อผู้ใช้ออกจากหน้าหรือปิดแท็บ นี่คือที่มาของวิธีการ sendBeacon()
เมธอด sendBeacon() เป็นส่วนเสริมใหม่ของ Web API ใน HTML5 ซึ่งช่วยให้คุณสามารถส่งข้อมูลแบบอะซิงโครนัสไปยังเว็บเซิร์ฟเวอร์ โดยไม่ปิดกั้นอินเทอร์เฟซผู้ใช้หรือขัดจังหวะประสบการณ์ผู้ใช้ ในบทความนี้ เราจะสำรวจเมธอด sendBeacon() โดยละเอียดยิ่งขึ้น และยกตัวอย่างเพื่อสาธิตการใช้งาน
sendBeacon() คืออะไร และทำงานอย่างไร
เมธอด sendBeacon() ใช้เพื่อส่งข้อมูลจำนวนเล็กน้อยไปยังเว็บเซิร์ฟเวอร์แบบอะซิงโครนัส ต้องใช้สองข้อโต้แย้ง:
navigator.sendBeacon(url); navigator.sendBeacon(url, data);
url - URL ของเว็บเซิร์ฟเวอร์ที่จะส่งข้อมูลไปdata - ข้อมูลที่จะส่งไปยังเว็บเซิร์ฟเวอร์
อาร์กิวเมนต์ data สามารถเป็นได้ทั้งสตริง วัตถุ FormData หรือวัตถุ Blob ข้อมูลจะถูกส่งไปยังเว็บเซิร์ฟเวอร์โดยใช้คำขอ HTTP POST โดยตั้งค่าส่วนหัว Content-Type เป็น application/octet-stream
เมธอด sendBeacon() ส่งคืนค่าบูลีนเพื่อระบุว่าข้อมูลเข้าคิวสำหรับการส่งข้อมูลสำเร็จหรือไม่ หากผู้ใช้ออกจากเพจก่อนที่จะส่งข้อมูล ข้อมูลจะสูญหาย
สิ่งสำคัญประการหนึ่งที่ควรทราบคือเมธอด sendBeacon() ไม่ได้รับประกันว่าข้อมูลจะถูกส่งไปยังเว็บเซิร์ฟเวอร์ได้สำเร็จ ข้อมูลจะถูกส่งแบบอะซิงโครนัส ดังนั้นจึงไม่มีทางทราบได้อย่างแน่นอนว่าข้อมูลถูกส่งแบบอะซิงโครนัสหรือไม่ ส่งเรียบร้อยแล้ว อย่างไรก็ตาม หากเมธอดส่งคืน true แสดงว่าข้อมูลอยู่ในคิวสำหรับการส่งข้อมูลสำเร็จแล้ว และจะถูกส่งโดยเร็วที่สุด
มาดูตัวอย่างเพื่อดูว่า sendBeacon() สามารถนำมาใช้ได้อย่างไร
การส่งข้อมูลเป็นสตริง
const data = "Hello, world!"; const url = "/log"; const result = navigator.sendBeacon(url, data); console.log(result); // true or false
ในตัวอย่างนี้ เรากำลังส่งสตริง “Hello, world!” ไปยังจุดสิ้นสุด /log บนเซิร์ฟเวอร์ เมธอด sendBeacon() ส่งกลับค่าบูลีนเพื่อระบุว่าข้อมูลเข้าคิวสำหรับการส่งข้อมูลสำเร็จหรือไม่
การส่งข้อมูลเป็นวัตถุ FormData
const formData = new FormData();
formData.append("name", "John Doe");
formData.append("email", "[email protected]");
const url = "/submit-form";
const result = navigator.sendBeacon(url, formData);
console.log(result); // true or false
การส่งข้อมูลเป็นวัตถุ Blob
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const url = "/log";
const result = navigator.sendBeacon(url, blob);
console.log(result); // true or false
ในตัวอย่างนี้ เรากำลังสร้างอ็อบเจ็กต์ Blob ที่มีสตริง 'Hello, world!' และตั้งค่าคุณสมบัติ type เป็น text/plain จากนั้นเราจะส่งข้อมูลไปยังปลายทาง /log บนเซิร์ฟเวอร์ อีกครั้งที่เมธอด sendBeacon() ส่งกลับค่าบูลีนเพื่อระบุว่าข้อมูลเข้าคิวสำหรับการส่งข้อมูลสำเร็จหรือไม่
