Codelab: یک سرور اعلان فشار بسازید

Kate Jeffreys

Kayce Basques

این لبه کد، گام به گام به شما نشان می دهد که چگونه یک سرور اعلان فشار بسازید. در پایان کد لبه، سروری خواهید داشت که:

• اشتراک‌های اعلان‌های فشاری را ردیابی می‌کند (یعنی سرور یک رکورد پایگاه داده جدیدی ایجاد می‌کند که مشتری برای اعلان‌های فشاری شرکت می‌کند، و زمانی که مشتری انصراف می‌دهد، رکورد پایگاه داده موجود را حذف می‌کند)
• یک اعلان فشار به یک مشتری واحد ارسال می کند
• یک اعلان فشار به همه مشتریان مشترک ارسال می کند

این نرم افزار کد روی کمک به یادگیری شما از طریق انجام دادن تمرکز دارد و در مورد مفاهیم زیاد صحبت نمی کند. بررسی کنید اعلان‌های فشار چگونه کار می‌کنند؟ برای یادگیری مفاهیم فشار اعلان

کد مشتری این کد لبه قبلاً کامل شده است. شما فقط سرور را در این کد لبه پیاده سازی خواهید کرد. برای یادگیری نحوه پیاده‌سازی سرویس‌گیرنده اعلان فشار، Codelab را بررسی کنید: ساخت یک سرویس گیرنده اعلان فشاری .

سازگاری با مرورگر

این کد لبه با سیستم عامل و ترکیبات مرورگر زیر کار می کند:

• ویندوز: کروم، اج
• macOS: کروم، فایرفاکس
• اندروید: کروم، فایرفاکس

شناخته شده است که این کد لبه با سیستم عامل های زیر (یا سیستم عامل و ترکیبات مرورگر) کار نمی کند:

• macOS: Brave، Edge، Safari
• iOS

پشته برنامه

• سرور در بالای Express.js ساخته شده است.
• کتابخانه web-push Node.js تمام منطق اعلان فشار را کنترل می کند.
• داده های اشتراک در یک فایل JSON با استفاده از lowdb نوشته می شود.

برای اجرای پوش نوتیفیکیشن ها نیازی به استفاده از هیچ یک از این فناوری ها نیست. ما این فن‌آوری‌ها را انتخاب کردیم، زیرا تجربه‌ای قابل اعتماد در آزمایشگاه ارائه می‌دهند.

راه اندازی

احراز هویت را تنظیم کنید

قبل از اینکه بتوانید اعلان‌های فشاری کار کنند، باید سرور و کلاینت خود را با کلیدهای احراز هویت راه‌اندازی کنید. برای اطلاع از علت، به امضای درخواست‌های پروتکل فشار وب خود مراجعه کنید.

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. public/index.js را باز کنید.
2. مقدار کلید عمومی خود را جایگزین VAPID_PUBLIC_KEY_VALUE_HERE کنید.

اشتراک ها را مدیریت کنید

مشتری شما بیشتر فرآیند اشتراک را انجام می دهد. اصلی‌ترین کارهایی که سرور شما باید انجام دهد، ذخیره اشتراک‌های جدید فشار اعلان و حذف اشتراک‌های قدیمی است. این اشتراک‌ها چیزی هستند که به شما امکان می‌دهند در آینده پیام‌ها را به مشتریان ارسال کنید. برای دریافت اطلاعات بیشتر در مورد فرآیند اشتراک، به اشتراک مشتری مراجعه کنید.

اطلاعات اشتراک جدید را ذخیره کنید

1. روی Register service worker در تب app کلیک کنید. در کادر وضعیت باید پیامی مشابه این را ببینید:

Service worker registered. Scope: https://example.com

1. در برگه برنامه روی Subscribe کلیک کنید تا فشار دهید . مرورگر یا سیستم عامل شما احتمالاً از شما می پرسد که آیا می خواهید به وب سایت اجازه دهید برای شما اعلان های فشار ارسال کند. روی Allow (یا هر عبارتی معادلی که مرورگر/OS شما استفاده می‌کند) کلیک کنید. در کادر وضعیت باید پیامی مشابه این را ببینید:

Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…

1. ترمینال را باز کنید تا گزارش ها را ببینید. شما باید /add-subscription ببینید و سپس برخی از داده ها را مشاهده کنید. /add-subscription آدرس اینترنتی است که وقتی مشتری می‌خواهد در اعلان‌های فشاری مشترک شود، درخواست POST را برای آن ارسال می‌کند. داده‌های زیر اطلاعات اشتراک مشتری است که باید ذخیره کنید.
2. server.js را باز کنید.
3. منطق کنترل مسیر /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 route handler را با کد زیر به روز کنید:

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. روی Notify me کلیک کنید. شما باید یک اعلان فشار دریافت کنید. عنوان باید Hello, Notifications! و بدنه باید ID: <ID> که در آن <ID> یک عدد تصادفی است.
3. برنامه خود را در مرورگرها یا دستگاه های دیگر باز کنید و سعی کنید برای ارسال اعلان ها مشترک آنها شوید و سپس روی دکمه Notify all کلیک کنید. شما باید در همه دستگاه های مشترک خود اعلان یکسانی دریافت کنید (یعنی شناسه در بدنه اعلان فشار باید یکسان باشد).

مراحل بعدی

• برای درک مفهومی عمیق تر از نحوه عملکرد اعلان های فشار، نمای کلی اعلان های فشاری را بخوانید.
• Codelab را بررسی کنید: یک سرویس گیرنده اعلان فشار بسازید تا یاد بگیرید چگونه یک کلاینت بسازید که مجوز اعلان درخواست می کند، دستگاه را برای دریافت اعلان های فشاری مشترک می کند و از یک سرویس دهنده برای دریافت پیام های فشار و نمایش پیام ها به عنوان اعلان استفاده می کند.