บทแนะนำนี้แสดงวิธีเชื่อมต่อกับ WebSocket ใน Service Worker ของส่วนขยาย Chrome ดูตัวอย่างที่ใช้ได้ใน GitHub
ข้อมูลเบื้องต้น
ตั้งแต่ Chrome 116 เป็นต้นไป โปรแกรมทำงานของบริการส่วนขยายจะได้รับการปรับปรุงการรองรับ WebSockets ก่อนหน้านี้ อาจมีกรณีที่ Service Worker ไม่ได้ทำงานแม้ว่าการเชื่อมต่อ WebSocket จะทำงานอยู่ก็ตาม หากไม่มีเหตุการณ์ของส่วนขยายอื่นเกิดขึ้นเป็นเวลา 30 วินาที ซึ่งจะสิ้นสุด Service Worker และปิดการเชื่อมต่อ WebSocket หากต้องการทราบข้อมูลพื้นฐานเพิ่มเติมเกี่ยวกับวงจรของ Service Worker ส่วนขยาย โปรดอ่านคู่มือโปรแกรมทำงานของบริการส่วนขยาย)
ตั้งแต่ Chrome 116 เป็นต้นไป คุณสามารถทำให้ Service Worker ที่มีการเชื่อมต่อ WebSocket ทำงานต่อไปได้โดยการแลกเปลี่ยนข้อความภายในกรอบเวลากิจกรรมของ Service Worker 30 วินาที ซึ่งสามารถเริ่มได้จากเซิร์ฟเวอร์หรือจากส่วนขยาย ในตัวอย่างต่อไปนี้ เราจะส่งข้อความปกติจากส่วนขยาย Chrome ไปยังเซิร์ฟเวอร์เพื่อให้แน่ใจว่าโปรแกรมทำงานของบริการจะยังทำงานอยู่
ตัวอย่าง: WebSocket Keepalive
ก่อนอื่นเราต้องตรวจสอบว่าส่วนขยายของเราทำงานใน Chrome เวอร์ชันที่รองรับ WebSocket ใน Service Worker เท่านั้น โดยการตั้งค่าเวอร์ชัน Chrome ขั้นต่ำเป็น 116 ในไฟล์ Manifest ดังนี้
manifest.json:
{ ... "minimum_chrome_version": "116", ... } จากนั้นเราจะทําให้ Service Worker ทํางานต่อไปได้โดยส่งข้อความ Keepalive ทุก 20 วินาที การเชื่อมต่อแบบ Keepalive จะเริ่มต้นขึ้นเมื่อ Service Worker เชื่อมต่อกับ WebSocket ตัวอย่างไคลเอ็นต์ WebSocket ต่อไปนี้จะบันทึกข้อความและเรียก keepAlive() เมื่อมีการเรียกเหตุการณ์ onopen
service-worker.js
let webSocket = null; function connect() { webSocket = new WebSocket('wss://example.com/ws'); webSocket.onopen = (event) => { console.log('websocket open'); keepAlive(); }; webSocket.onmessage = (event) => { console.log(`websocket received message: ${event.data}`); }; webSocket.onclose = (event) => { console.log('websocket connection closed'); webSocket = null; }; } function disconnect() { if (webSocket == null) { return; } webSocket.close(); } ใน keepAlive() เราใช้ setInterval(...) เพื่อส่งคำสั่ง ping ไปยังเซิร์ฟเวอร์เป็นประจำขณะมีการเชื่อมต่อ WebSocket ที่ทำงานอยู่
function keepAlive() { const keepAliveIntervalId = setInterval( () => { if (webSocket) { webSocket.send('keepalive'); } else { clearInterval(keepAliveIntervalId); } }, // Set the interval to 20 seconds to prevent the service worker from becoming inactive. 20 * 1000 ); }