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

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.
• تعالج مكتبة web-push في Node.js جميع منطق الإشعارات الفورية.
• يتم كتابة بيانات الاشتراك في ملف JSON باستخدام lowdb.

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

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

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

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

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

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

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

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

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. ارجع إلى الرمز البرمجي من خلال النقر على عرض المصدر في واجهة مستخدم 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);
});

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

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: إنشاء برنامج عميل للإشعارات الفورية لمعرفة كيفية إنشاء برنامج عميل يطلب إذن الإشعارات ويشترك الجهاز لتلقّي الإشعارات الفورية ويستخدم عامل خدمة لتلقّي الرسائل الفورية وعرض الرسائل كإشعارات.