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

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

পটভূমি

ক্রোম ১১৬ থেকে শুরু করে, এক্সটেনশন সার্ভিস ওয়ার্কারগুলো ওয়েবসকেটের জন্য উন্নত সাপোর্ট পেয়েছে। পূর্বে, একটি ওয়েবসকেট সংযোগ সক্রিয় থাকা সত্ত্বেও, যদি ৩০ সেকেন্ড ধরে অন্য কোনো এক্সটেনশন ইভেন্ট না ঘটত, তাহলে একটি সার্ভিস ওয়ার্কার নিষ্ক্রিয় হয়ে যেতে পারত। এর ফলে সার্ভিস ওয়ার্কারটি টার্মিনেট হয়ে যেত এবং ওয়েবসকেট সংযোগটিও বন্ধ হয়ে যেত। এক্সটেনশন সার্ভিস ওয়ার্কারের লাইফসাইকেল সম্পর্কে আরও বিস্তারিত জানতে, এক্সটেনশন সার্ভিস ওয়ার্কার গাইডটি পড়ুন।

ক্রোম ১১৬ সংস্করণ থেকে, আপনি ৩০ সেকেন্ডের সার্ভিস ওয়ার্কার অ্যাক্টিভিটি উইন্ডোর মধ্যে মেসেজ আদান-প্রদানের মাধ্যমে একটি ওয়েবসকেট সংযোগসহ সার্ভিস ওয়ার্কারকে সক্রিয় রাখতে পারেন। এই মেসেজগুলো আপনার সার্ভার অথবা আপনার এক্সটেনশন থেকে শুরু করা যেতে পারে। নিচের উদাহরণে, সার্ভিস ওয়ার্কারটি যাতে সচল থাকে তা নিশ্চিত করার জন্য আমরা ক্রোম এক্সটেনশন থেকে সার্ভারে একটি সাধারণ মেসেজ পাঠাব।

উদাহরণ: ওয়েবসকেট কিপঅ্যালাইভ

প্রথমে আমাদের নিশ্চিত করতে হবে যে, আমাদের এক্সটেনশনটি যেন শুধুমাত্র সার্ভিস ওয়ার্কারে ওয়েবসকেট সমর্থনকারী ক্রোম সংস্করণগুলিতেই চলে। এর জন্য ম্যানিফেস্টে সর্বনিম্ন ক্রোম সংস্করণ ১১৬ সেট করতে হবে:

manifest.json:

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

তারপর আমরা প্রতি ২০ সেকেন্ডে একটি কিপঅ্যালাইভ বার্তা পাঠিয়ে সার্ভিস ওয়ার্কারটিকে সক্রিয় রাখতে পারি। সার্ভিস ওয়ার্কারটি ওয়েবসকেটের সাথে সংযুক্ত হওয়ার সাথে সাথেই কিপঅ্যালাইভ শুরু হয়। নিম্নলিখিত নমুনা ওয়েবসকেট ক্লায়েন্টটি বার্তা লগ করে এবং যখন onopen ইভেন্টটি ট্রিগার হয় তখন keepAlive() কল করে:

সার্ভিস-ওয়ার্কার.জেএস

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