কোডল্যাব: একটি পুশ নোটিফিকেশন সার্ভার তৈরি করুন

কেট জেফ্রিস
Kate Jeffreys
Kayce Basques

এই কোডল্যাব আপনাকে ধাপে ধাপে দেখায় কিভাবে একটি পুশ নোটিফিকেশন সার্ভার তৈরি করতে হয়। কোডল্যাবের শেষে আপনার কাছে একটি সার্ভার থাকবে যা:

  • পুশ নোটিফিকেশন সাবস্ক্রিপশনের ট্র্যাক রাখে (যেমন সার্ভার একটি নতুন ডাটাবেস রেকর্ড তৈরি করে যখন কোনও ক্লায়েন্ট পুশ নোটিফিকেশন বেছে নেয় এবং ক্লায়েন্ট অপ্ট আউট করলে এটি একটি বিদ্যমান ডাটাবেস রেকর্ড মুছে দেয়)
  • একটি একক ক্লায়েন্টকে একটি পুশ বিজ্ঞপ্তি পাঠায়
  • সমস্ত সাবস্ক্রাইব করা ক্লায়েন্টদের একটি পুশ বিজ্ঞপ্তি পাঠায়

এই কোডল্যাবটি আপনাকে কাজ করে শিখতে সাহায্য করার উপর দৃষ্টি নিবদ্ধ করে এবং ধারণা সম্পর্কে বেশি কথা বলে না। কিভাবে পুশ বিজ্ঞপ্তি কাজ করে দেখুন? পুশ বিজ্ঞপ্তি ধারণা সম্পর্কে জানতে।

এই কোডল্যাবের ক্লায়েন্ট কোড ইতিমধ্যেই সম্পূর্ণ। আপনি শুধুমাত্র এই কোডল্যাবে সার্ভার বাস্তবায়ন করবেন। কিভাবে একটি পুশ বিজ্ঞপ্তি ক্লায়েন্ট বাস্তবায়ন করতে হয় তা জানতে, কোডল্যাব দেখুন: একটি পুশ বিজ্ঞপ্তি ক্লায়েন্ট তৈরি করুন ।

সম্পূর্ণ কোড দেখতে push-notifications-server-codelab-complete ( উৎস ) দেখুন।

ব্রাউজার সামঞ্জস্য

এই কোডল্যাবটি নিম্নলিখিত অপারেটিং সিস্টেম এবং ব্রাউজার সংমিশ্রণগুলির সাথে কাজ করার জন্য পরিচিত:

  • উইন্ডোজ: ক্রোম, এজ
  • macOS: ক্রোম, ফায়ারফক্স
  • অ্যান্ড্রয়েড: ক্রোম, ফায়ারফক্স

এই কোডল্যাবটি নিম্নলিখিত অপারেটিং সিস্টেম (বা অপারেটিং সিস্টেম এবং ব্রাউজার সংমিশ্রণ) এর সাথে কাজ করে না বলে পরিচিত:

  • macOS: সাহসী, এজ, সাফারি
  • iOS

অ্যাপ্লিকেশন স্ট্যাক

  • সার্ভারটি Express.js এর উপরে তৈরি করা হয়েছে।
  • ওয়েব-পুশ Node.js লাইব্রেরি সমস্ত পুশ নোটিফিকেশন লজিক পরিচালনা করে।
  • সাবস্ক্রিপশন ডেটা Lowdb ব্যবহার করে একটি JSON ফাইলে লেখা হয়।

পুশ বিজ্ঞপ্তিগুলি বাস্তবায়ন করতে আপনাকে এই প্রযুক্তিগুলির কোনওটি ব্যবহার করতে হবে না৷ আমরা এই প্রযুক্তিগুলি বেছে নিয়েছি কারণ তারা একটি নির্ভরযোগ্য কোডল্যাব অভিজ্ঞতা প্রদান করে।

সেটআপ

কোডটির একটি সম্পাদনাযোগ্য অনুলিপি পান

এই নির্দেশাবলীর ডানদিকে আপনি যে কোড এডিটরটি দেখছেন তাকে এই কোডল্যাব জুড়ে গ্লিচ UI বলা হবে।

  1. প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷

প্রমাণীকরণ সেট আপ করুন

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

  1. টুল-এ ক্লিক করে এবং তারপর টার্মিনাল-এ ক্লিক করে গ্লিচ টার্মিনাল খুলুন।
  2. টার্মিনালে, npx web-push generate-vapid-keys চালান। ব্যক্তিগত কী এবং সর্বজনীন কী মান অনুলিপি করুন।
  3. .env খুলুন এবং VAPID_PUBLIC_KEY এবং VAPID_PRIVATE_KEY আপডেট করুন। VAPID_SUBJECT mailto:test@test.test এ সেট করুন। এই সমস্ত মান ডবল উদ্ধৃতি মধ্যে আবৃত করা উচিত. আপনার আপডেট করার পরে, আপনার .env ফাইলটি এর মতো দেখতে হবে:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. গ্লিচ টার্মিনাল বন্ধ করুন।
  1. public/index.js খুলুন।
  2. আপনার সর্বজনীন কী-এর মান দিয়ে VAPID_PUBLIC_KEY_VALUE_HERE প্রতিস্থাপন করুন।

সাবস্ক্রিপশন পরিচালনা

আপনার ক্লায়েন্ট সাবস্ক্রিপশন প্রক্রিয়ার বেশিরভাগ পরিচালনা করে। আপনার সার্ভারের প্রধান জিনিসগুলি হল নতুন পুশ নোটিফিকেশন সাবস্ক্রিপশন সংরক্ষণ করা এবং পুরানো সাবস্ক্রিপশন মুছে ফেলা। এই সাবস্ক্রিপশনগুলি আপনাকে ভবিষ্যতে ক্লায়েন্টদের কাছে বার্তা পাঠাতে সক্ষম করে। সাবস্ক্রিপশন প্রক্রিয়া সম্পর্কে আরও প্রসঙ্গের জন্য বিজ্ঞপ্তিগুলি পুশ করতে ক্লায়েন্টকে সাবস্ক্রাইব করুন দেখুন।

নতুন সদস্যতা তথ্য সংরক্ষণ করুন

  1. সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন পূর্ণ পর্দা .
  1. অ্যাপ ট্যাবে রেজিস্টার সার্ভিস ওয়ার্কার ক্লিক করুন। স্ট্যাটাস বক্সে আপনি এর মতো একটি বার্তা দেখতে পাবেন:
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
  1. অ্যাপ ট্যাবে পুশ করতে সাবস্ক্রাইব ক্লিক করুন। আপনার ব্রাউজার বা অপারেটিং সিস্টেম সম্ভবত আপনাকে জিজ্ঞাসা করবে যে আপনি ওয়েবসাইটটি আপনাকে পুশ বিজ্ঞপ্তি পাঠাতে দিতে চান কিনা। অনুমতি দিন (বা আপনার ব্রাউজার/ওএস ব্যবহার করে সমতুল্য বাক্যাংশ) ক্লিক করুন। স্ট্যাটাস বক্সে আপনি এর মতো একটি বার্তা দেখতে পাবেন:
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. গ্লিচ UI-তে উৎস দেখুন- এ ক্লিক করে আপনার কোডে ফিরে যান।
  2. Tools এ ক্লিক করে এবং তারপর Logs এ ক্লিক করে Glitch Logs খুলুন। আপনি কিছু ডেটা অনুসরণ করে /add-subscription দেখতে পাবেন। /add-subscription হল সেই URL যা ক্লায়েন্ট যখন পুশ নোটিফিকেশনে সাবস্ক্রাইব করতে চায় তখন একটি POST অনুরোধ পাঠায়। নিম্নলিখিত ডেটা হল ক্লায়েন্টের সাবস্ক্রিপশন তথ্য যা আপনাকে সংরক্ষণ করতে হবে।
  3. server.js খুলুন।
  4. নিম্নলিখিত কোড দিয়ে /add-subscription রুট হ্যান্ডলার লজিক আপডেট করুন:
app.post('/add-subscription', (request, response) => {
  console.log('/add-subscription');
  console.log(request.body);
  console.log(`Subscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .push(request.body)
    .write();
  response.sendStatus(200);
});

পুরানো সাবস্ক্রিপশন তথ্য মুছুন

  1. অ্যাপ ট্যাবে ফিরে যান।
  2. পুশ থেকে আনসাবস্ক্রাইব ক্লিক করুন।
  3. আবার গ্লিচ লগ তাকান. ক্লায়েন্টের সাবস্ক্রিপশনের তথ্য অনুসরণ করে আপনি /remove-subscription দেখতে পাবেন।
  4. নিম্নলিখিত কোড দিয়ে /remove-subscription রুট হ্যান্ডলার লজিক আপডেট করুন:
app.post('/remove-subscription', (request, response) => {
  console.log('/remove-subscription');
  console.log(request.body);
  console.log(`Unsubscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .remove({endpoint: request.body.endpoint})
    .write();
  response.sendStatus(200);
});

বিজ্ঞপ্তি পাঠান

Send a push message এ যেমন ব্যাখ্যা করা হয়েছে, আপনার সার্ভার আসলে ক্লায়েন্টদের কাছে সরাসরি পুশ বার্তা পাঠায় না। বরং, এটি করার জন্য এটি একটি ধাক্কা পরিষেবার উপর নির্ভর করে। আপনার সার্ভার মূলত আপনার ব্যবহারকারী ব্যবহার করে এমন ব্রাউজার বিক্রেতার মালিকানাধীন একটি ওয়েব পরিষেবাতে (ওয়েব পুশ প্রোটোকল অনুরোধ) ওয়েব পরিষেবার অনুরোধ (ওয়েব পুশ প্রোটোকল অনুরোধ) করে ক্লায়েন্টদের কাছে বার্তা পাঠানোর প্রক্রিয়া বন্ধ করে দেয়।

  1. নিম্নলিখিত কোড দিয়ে /notify-me রুট হ্যান্ডলার লজিক আপডেট করুন:
app.post('/notify-me', (request, response) => {
  console.log('/notify-me');
  console.log(request.body);
  console.log(`Notifying ${request.body.endpoint}`);
  const subscription = 
      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
  sendNotifications([subscription]);
  response.sendStatus(200);
});
  1. নিম্নলিখিত কোড দিয়ে sendNotifications() ফাংশন আপডেট করুন:
function sendNotifications(subscriptions) {
  // TODO
  // Create the notification content.
  const notification = JSON.stringify({
    title: "Hello, Notifications!",
    options: {
      body: `ID: ${Math.floor(Math.random() * 100)}`
    }
  });
  // Customize how the push service should attempt to deliver the push message.
  // And provide authentication information.
  const options = {
    TTL: 10000,
    vapidDetails: vapidDetails
  };
  // Send a push message to each client specified in the subscriptions array.
  subscriptions.forEach(subscription => {
    const endpoint = subscription.endpoint;
    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
    webpush.sendNotification(subscription, notification, options)
      .then(result => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Result: ${result.statusCode}`);
      })
      .catch(error => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Error: ${error} `);
      });
  });
}
  1. নিম্নলিখিত কোড দিয়ে /notify-all রুট হ্যান্ডলার লজিক আপডেট করুন:
app.post('/notify-all', (request, response) => {
  console.log('/notify-all');
  response.sendStatus(200);
  console.log('Notifying all subscribers');
  const subscriptions =
      db.get('subscriptions').cloneDeep().value();
  if (subscriptions.length > 0) {
    sendNotifications(subscriptions);
    response.sendStatus(200);
  } else {
    response.sendStatus(409);
  }
});
  1. অ্যাপ ট্যাবে ফিরে যান।
  2. পুশ থেকে আনসাবস্ক্রাইব ক্লিক করুন এবং তারপর আবার পুশ করতে সাবস্ক্রাইব ক্লিক করুন। এটি শুধুমাত্র প্রয়োজনীয় কারণ, যেমন আগে উল্লেখ করা হয়েছে, প্রতিবার যখন আপনি কোডটি সম্পাদনা করেন এবং প্রকল্পটি স্টার্টআপে ডাটাবেস মুছে ফেলার জন্য কনফিগার করা হয় তখনই প্রকল্পটি পুনরায় চালু হয়।
  3. আমাকে অবহিত করুন ক্লিক করুন। আপনি একটি পুশ বিজ্ঞপ্তি পেতে হবে. শিরোনাম হওয়া উচিত Hello, Notifications! এবং বডি ID: <ID> যেখানে <ID> একটি এলোমেলো সংখ্যা।
  4. অন্যান্য ব্রাউজার বা ডিভাইসে আপনার অ্যাপটি খুলুন এবং বিজ্ঞপ্তিগুলি পুশ করতে সাবস্ক্রাইব করার চেষ্টা করুন এবং তারপরে সমস্ত বিজ্ঞপ্তি বোতামে ক্লিক করুন৷ আপনি আপনার সাবস্ক্রাইব করা সমস্ত ডিভাইসে একই বিজ্ঞপ্তি পাবেন (অর্থাৎ পুশ বিজ্ঞপ্তির মূল অংশে থাকা আইডি একই হওয়া উচিত)।

পরবর্তী পদক্ষেপ