ใช้ 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 
  );
}