از WebSockets در کارگران خدماتی استفاده کنید

این آموزش نحوه اتصال به WebSocket را در سرویس کار افزونه Chrome خود نشان می دهد. می توانید یک نمونه کار در Github پیدا کنید.

پس زمینه

با شروع Chrome 116، کارکنان خدمات برنامه‌های افزودنی پشتیبانی بهتری از WebSockets دریافت می‌کنند. پیش از این، اگر هیچ رویداد برنامه افزودنی دیگری به مدت 30 ثانیه اتفاق نیفتاد، یک سرویس‌کار می‌توانست با وجود فعال بودن اتصال WebSocket غیرفعال شود. با این کار سرویس کار پایان می یابد و اتصال WebSocket بسته می شود. برای پیشینه بیشتر در مورد چرخه عمر کارگر خدمات ترویجی، راهنمای کارگر خدمات ترویجی را بخوانید).

از Chrome 116 به بعد، می‌توانید یک سرویس‌کار با اتصال WebSocket را با تبادل پیام‌ها در پنجره فعالیت‌های 30s Service Worker فعال نگه دارید. اینها می توانند از سرور شما یا از برنامه افزودنی شما شروع شوند. در مثال زیر، یک پیام معمولی از افزونه کروم به سرور ارسال می کنیم تا مطمئن شویم که کارمند سرویس زنده می ماند.

مثال: WebSocket keepalive

ابتدا باید مطمئن شویم که برنامه افزودنی ما فقط در نسخه‌های Chrome که از WebSockets در سرویس‌کاران پشتیبانی می‌کنند با تنظیم حداقل نسخه Chrome روی 116 در مانیفست اجرا می‌شود:

manifest.json:

{
  ...
  "minimum_chrome_version": "116",
  ...
}

سپس می‌توانیم با ارسال یک پیام نگهدارنده هر 20 ثانیه، سرویس‌کار را فعال نگه داریم. زمانی که سرویس دهنده به WebSocket متصل شود، Keealive شروع می شود. نمونه زیر سرویس گیرنده 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(...) برای ارسال منظم پینگ به سرور در زمانی که یک اتصال 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 
  );
}