درس تطبيقي حول الترميز: إنشاء خادم إشعارات فورية

Kate Jeffreys

Kayce Basques

لمتابعة هذا الدليل التعليمي حول الرموز البرمجية، افتح هذا الرابط على Glitch في علامة تبويب ثانية.

يوضّح لك هذا الدرس التطبيقي حول الترميز خطوة بخطوة كيفية إنشاء خادم إشعارات فورية. بنهاية هذا الدليل التعليمي، سيكون لديك خادم:

• تتبُّع اشتراكات الإشعارات الفورية (أي أنّ الخادم ينشئ سجلّ قاعدة بيانات جديدًا عندما يوافق العميل على الإشعارات الفورية، ويحذف سجلّ قاعدة بيانات حاليًا عندما يوقف العميل هذه الإشعارات)
• إرسال إشعار فوري إلى عميل واحد
• إرسال إشعار فوري إلى جميع العملاء المشتركين

تركّز ورشة رموز البرمجة هذه على مساعدتك في التعلّم من خلال الممارسة، ولا تتناول كثيرًا من المفاهيم. اطّلِع على المقالة كيف تعمل الإشعارات الفورية؟ للتعرّف على مفاهيم الإشعارات الفورية.

سبق أن اكتمل رمز العميل في هذا الدليل التعليمي. ستتم فقط تنفيذ الخادم في هذا الدليل التعليمي. للتعرّف على كيفية تنفيذ ملف برمجي لإرسال الإشعارات الفورية، اطّلِع على الدرس التطبيقي حول الترميز: إنشاء ملف برمجي لإرسال الإشعارات الفورية.

اطّلِع على push-notifications-server-codelab-complete (source) للاطّلاع على الرمز الكامل.

توافُق المتصفح

من المعروف أنّ ورشة رموز البرامج هذه تعمل مع مجموعات أنظمة التشغيل والمتصفّحات التالية:

• نظام التشغيل Windows: Chrome وEdge
• ‫macOS: Chrome وFirefox
• Android: Chrome وFirefox

من المعروف أنّ ورشة رموز البرامج هذه لا تعمل مع أنظمة التشغيل التالية (أو مجموعات أنظمة التشغيل والمتصفّحات):

• ‫macOS: Brave وEdge وSafari
• iOS

حزمة التطبيق

• تم إنشاء الخادم استنادًا إلى Express.js.
• تعالج مكتبة web-push في Node.js جميع منطق الإشعارات الفورية.
• يتم كتابة بيانات الاشتراك في ملف JSON باستخدام lowdb.

لست بحاجة إلى استخدام أيّ من هذه التقنيات لتطبيق الإشعارات الفورية. اخترنا هذه التقنيات لأنّها توفّر تجربة موثوقة في Codelab.

ضبط إعدادات الجهاز

الحصول على نسخة قابلة للتعديل من الرمز

يُعرف محرِّر الرموز البرمجية الذي يظهر على يسار هذه التعليمات باسم واجهة مستخدم Glitch خلال هذا الدليل التعليمي.

1. انقر على Remix to Edit (إنشاء ريمكس لتعديل المحتوى) ليصبح المشروع قابلاً للتعديل.

إعداد المصادقة

قبل أن تتمكّن من تفعيل الإشعارات الفورية، عليك إعداد الخادم والعميل باستخدام مفاتيح المصادقة. اطّلِع على توقيع طلبات بروتوكول إشعارات الويب لمعرفة السبب.

1. افتح محطة Glitch الطرفية من خلال النقر على الأدوات ثم النقر على المحطة الطرفية.
2. في الوحدة الطرفية، شغِّل npx web-push generate-vapid-keys. انسخ قيم المفتاح الخاص والمفتاح العام.
3. افتح .env وعدِّل VAPID_PUBLIC_KEY وVAPID_PRIVATE_KEY. اضبط VAPID_SUBJECT على mailto:[e-mail]. يجب وضع كل هذه القيم بين علامتَي اقتباس مزدوجتَين. بعد إجراء التعديلات، من المفترض أن يظهر ملف .env على النحو التالي:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:[e-mail]"

1. أغلِق وحدة طرفية Glitch.

تكون قيم متغيّرات البيئة (العناصر في .env) فريدة لمشروع Glitch واحد. إذا أعدت إنشاء مشروعك، لن يتم نسخ القيم في .env.

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/…

ملاحظة: يتغيّر عنوان URL لنقطة النهاية استنادًا إلى المتصفّح الذي تستخدمه. على سبيل المثال، يبدأ عنوان URL في Firefox بـ https://updates.push.services.mozilla.com/….

1. ارجع إلى الرمز البرمجي بالنقر على عرض المصدر في واجهة مستخدم Glitch.
2. افتح سجلّات Glitch بالنقر على الأدوات ثم على السجلّات. من المفترض أن يظهر لك الرمز /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);
});

ملاحظة: تكتب قاعدة البيانات إلى .data/db.json. لفحص هذا الملف في Glitch، انقر على الأدوات، ثم انقر على Terminal، ثمّ نفِّذ cat .data/db.json في Terminal. يتم حذف .data/db.json في كل مرة تعدّل فيها تطبيقك، لأنّ Glitch تُشغّل النص البرمجي start في package.json في كل مرة تعدّل فيها تطبيقك، ويتضمن هذا النص البرمجي طلبًا إلى rm .data/db.json.

حذف معلومات الاشتراك القديمة

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

إرسال إشعارات

كما هو موضّح في مقالة إرسال رسالة فورية، لا يرسل الخادم الرسائل الفورية مباشرةً إلى العملاء. بدلاً من ذلك، تعتمد على خدمة دفع لإرسال الإشعارات. يبدأ الخادم في الأساس عملية إرسال الرسائل إلى العملاء من خلال تقديم طلبات لخدمة الويب (طلبات بروتوكول الدفع على الويب) إلى خدمة ويب (خدمة الدفع) يملكها موفّر المتصفّح الذي يستخدمه المستخدم.

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. انقر على إلغاء الاشتراك في الإشعارات الفورية ثم انقر على الاشتراك في الإشعارات الفورية مرة أخرى. لا يلزم إجراء ذلك إلا لأنّ Glitch يعيد تشغيل المشروع في كل مرة تعدّل فيها الرمز البرمجي ويتم ضبط المشروع لحذف قاعدة البيانات عند بدء التشغيل.
3. انقر على إشعاري. من المفترض أن يصلك إشعار فوري. يجب أن يكون العنوان Hello, Notifications! وأن يكون النص ID: <ID> حيث يكون <ID> رقمًا عشوائيًا.
4. افتح تطبيقك على متصفّحات أو أجهزة أخرى وحاول اشتراكها في الإشعارات الفورية، ثم انقر على الزر إرسال إشعار إلى الجميع. من المفترض أن يصلك الإشعار نفسه على جميع أجهزتك المشترِكة (أي أنّ رقم التعريف في نص الإشعار الفوري يجب أن يكون هو نفسه).

الخطوات التالية

• اطّلِع على نظرة عامة على الإشعارات الفورية لفهم آلية عمل الإشعارات الفورية بشكل أعمق.
• اطّلِع على Codelab: إنشاء برنامج عميل للإشعارات الفورية لمعرفة كيفية إنشاء برنامج عميل يطلب إذن الإشعارات ويشترك الجهاز لتلقّي الإشعارات الفورية ويستخدم عامل خدمة لتلقّي الرسائل الفورية وعرض الرسائل كإشعارات.