পরিষেবা কর্মীদের মধ্যে WebSockets ব্যবহার করুন

এই টিউটোরিয়ালটি দেখায় কিভাবে আপনার ক্রোম এক্সটেনশনের পরিষেবা কর্মীর একটি ওয়েবসকেটের সাথে সংযোগ করতে হয়৷ আপনি Github এ একটি কাজের উদাহরণ খুঁজে পেতে পারেন।

পটভূমি

Chrome 116 দিয়ে শুরু করে, এক্সটেনশন পরিষেবা কর্মীরা WebSockets- এর জন্য উন্নত সমর্থন পান৷ পূর্বে, 30 সেকেন্ডের জন্য অন্য কোনো এক্সটেনশন ইভেন্ট না ঘটলে ওয়েবসকেট সংযোগ সক্রিয় থাকা সত্ত্বেও একজন পরিষেবা কর্মী নিষ্ক্রিয় হয়ে যেতে পারে। এটি পরিষেবা কর্মীকে সমাপ্ত করবে এবং WebSocket সংযোগ বন্ধ করবে৷ এক্সটেনশন পরিষেবা কর্মী লাইফসাইকেল সম্পর্কে আরও পটভূমির জন্য, এক্সটেনশন পরিষেবা কর্মী নির্দেশিকা পড়ুন)।

Chrome 116 থেকে, আপনি 30-এর দশকের পরিষেবা কর্মী কার্যকলাপ উইন্ডোর মধ্যে বার্তা বিনিময় করে ওয়েবসকেট সংযোগ সহ একজন পরিষেবা কর্মীকে সক্রিয় রাখতে পারেন৷ এগুলি হয় আপনার সার্ভার থেকে বা আপনার এক্সটেনশন থেকে শুরু করা যেতে পারে। নিম্নলিখিত উদাহরণে, আমরা সার্ভারে Chrome এক্সটেনশন থেকে একটি নিয়মিত বার্তা পাঠাব যাতে পরিষেবা কর্মী বেঁচে থাকে।

উদাহরণ: WebSocket Keepalive

প্রথমে আমাদের নিশ্চিত করতে হবে যে আমাদের এক্সটেনশনটি ম্যানিফেস্টে ন্যূনতম ক্রোম সংস্করণ 116-এ সেট করে পরিষেবা কর্মীদের ওয়েবসকেট সমর্থনকারী Chrome সংস্করণগুলিতেই চলে:

manifest.json:

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

তারপরে আমরা প্রতি 20 সেকেন্ডে একটি কিপলাইভ বার্তা পাঠিয়ে পরিষেবা কর্মীকে সক্রিয় রাখতে পারি। পরিষেবা কর্মী 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() এর ভিতরে আমরা একটি সক্রিয় WebSocket সংযোগ থাকাকালীন সার্ভারে নিয়মিত একটি পিং পাঠাতে setInterval(...) ব্যবহার করি:

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 
  );
}