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

บทแนะนำนี้แสดงวิธีเชื่อมต่อกับ 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 
  );
}