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

این آموزش نحوه اتصال به یک WebSocket را در service worker افزونه کروم شما نشان می‌دهد. می‌توانید یک مثال عملی را در GitHub پیدا کنید.

پیشینه

با شروع از کروم ۱۱۶، پشتیبانی از WebSockets برای سرویس‌دهنده‌های افزونه بهبود یافته است. پیش از این، اگر هیچ رویداد افزونه دیگری به مدت ۳۰ ثانیه رخ نمی‌داد، یک سرویس‌دهنده می‌توانست با وجود فعال بودن اتصال WebSocket غیرفعال شود. این امر باعث خاتمه سرویس‌دهنده و بسته شدن اتصال WebSocket می‌شد. برای اطلاعات بیشتر در مورد چرخه عمر سرویس‌دهنده افزونه، راهنمای سرویس‌دهنده افزونه را مطالعه کنید.

از کروم ۱۱۶ به بعد، می‌توانید با تبادل پیام در پنجره فعالیت سرویس‌دهنده ۳۰ ثانیه‌ای، یک سرویس‌دهنده با اتصال WebSocket را فعال نگه دارید. این پیام‌ها می‌توانند یا از سرور شما یا از افزونه شما آغاز شوند. در مثال زیر، یک پیام معمولی از افزونه کروم به سرور ارسال می‌کنیم تا از فعال ماندن سرویس‌دهنده اطمینان حاصل کنیم.

مثال: WebSocket keepalive

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

مانیفست.json:

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

سپس می‌توانیم با ارسال پیام keepalive هر 20 ثانیه، سرویس ورکر را فعال نگه داریم. keepalive به محض اتصال سرویس ورکر به WebSocket آغاز می‌شود. کلاینت WebSocket نمونه زیر پیام‌ها را ثبت می‌کند و هنگام فعال شدن رویداد onopen تابع keepAlive() را فراخوانی می‌کند:

سرویس-ورکر.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 
  );
}