ใช้ WebSocket ในโปรแกรมทำงานของบริการ

บทแนะนำนี้จะสาธิตวิธีเชื่อมต่อกับ WebSocket ใน Service Worker ของส่วนขยาย Chrome ของคุณ คุณดูตัวอย่างการใช้งานได้ใน GitHub

ที่มา

ตั้งแต่ Chrome 116 เป็นต้นไป โปรแกรมทำงานของบริการส่วนขยายจะได้รับการสนับสนุนที่ดีขึ้นสำหรับ WebSockets ก่อนหน้านี้ Service Worker อาจไม่มีการใช้งานแม้ว่าจะยังมีการเชื่อมต่อ WebSocket อยู่ หากไม่มีเหตุการณ์ส่วนขยายอื่นๆ เกิดขึ้นเป็นเวลา 30 วินาที ซึ่งจะเป็นการสิ้นสุดการทำงานของ Service Worker และปิดการเชื่อมต่อ WebSocket หากต้องการทราบข้อมูลพื้นฐานเพิ่มเติมเกี่ยวกับวงจรการทำงานของบริการส่วนขยาย โปรดอ่านคู่มือสำหรับโปรแกรมทำงานของบริการส่วนขยาย)

ตั้งแต่ Chrome 116 เป็นต้นไป คุณสามารถทำให้ Service Worker ที่มีการเชื่อมต่อ WebSocket ทำงานอยู่เสมอได้โดยการแลกเปลี่ยนข้อความภายในหน้าต่างกิจกรรม Service Worker 30 วินาที ซึ่งสามารถเริ่มต้นจากเซิร์ฟเวอร์หรือจากส่วนขยายก็ได้ ในตัวอย่างต่อไปนี้ เราจะส่งข้อความตามปกติจากส่วนขยาย Chrome ไปยังเซิร์ฟเวอร์เพื่อให้แน่ใจว่าโปรแกรมทำงานของบริการยังมีชีวิตอยู่

ตัวอย่าง: WebSocket keepalive

ก่อนอื่น เราต้องตรวจสอบว่าส่วนขยายของเราทำงานได้เฉพาะใน Chrome เวอร์ชันที่รองรับ WebSocket ใน Service Worker โดยการตั้งค่าเวอร์ชันต่ำสุดของ Chrome ในไฟล์ Manifest เป็น 116 ดังนี้

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
 
);
}