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

Kate Jeffreys

Kayce Basques

لمتابعة هذا الدرس التطبيقي حول الترميز، افتح هذا الخطأ في علامة تبويب ثانية في علامة تبويب ثانية.

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

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

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

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

يمكنك الاطّلاع على push-notifications-server-codelab-complete (المصدر) للاطّلاع على الرمز الكامل.

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

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

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

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

• نظام التشغيل macOS: Brave وEdge وSafari
• iOS

حزمة التطبيقات

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

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

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

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

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

1. انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.

ضبط إعدادات المصادقة

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

1. افتح الوحدة الطرفية لتطبيق Glitch من خلال النقر على أدوات ثم على Terminal.
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. أغلِق الوحدة الطرفية للخطأ.

تكون قيم متغيّرات البيئة (العناصر في .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 لنقطة النهاية حسب المتصفّح الذي تستخدمه. على سبيل المثال، في Firefox، يبدأ عنوان URL بـ 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 في الوحدة الطرفية. يتم حذف ".data/db.json" في كل مرة تعدِّل فيها تطبيقك. ويرجع ذلك إلى أنّ Glitch يشغِّل النص البرمجي start في package.json كلّما عدَّلت تطبيقك، ويتضمّن هذا النص البرمجي استدعاءً إلى rm .data/db.json.

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

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

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

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