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

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 الذي يرسله العميل نشر طلبها عندما تريد الاشتراك في الإشعارات الفورية. البيانات التي هي معلومات اشتراك العميل التي يجب حفظها.
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);
});

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

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

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

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

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