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

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

ฉากหลัง

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

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

ตัวอย่าง: Keepalive ของ WebSocket

ก่อนอื่นเราต้องตรวจสอบว่าส่วนขยายทำงานใน Chrome เวอร์ชันที่รองรับ WebSockets ใน 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 
  );
}