مشاركة عبر

البرنامج التعليمي: إنشاء تطبيق دردشة بلا خادم باستخدام خدمة Azure Web PubSub وAzure Static Web Apps

يساعدك Azure Web PubSub على إنشاء تطبيقات ويب مراسلة في الوقت الحقيقي باستخدام WebSocket. تساعدك Azure Static Web Apps على إنشاء تطبيقات ويب كاملة المكدس ونشرها تلقائيا إلى Azure من مستودع التعليمات البرمجية. في هذا البرنامج التعليمي، ستتعلم كيفية استخدام Web PubSub و Static Web Apps معا لإنشاء تطبيق غرفة محادثة في الوقت الحقيقي.

وبشكل أكثر تحديدا، ستتعلم كيفية:

  • إنشاء تطبيق دردشة بلا خادم
  • العمل مع روابط إدخال وإخراج وظيفة Web PubSub
  • العمل مع Static Web Apps

هام

تظهر سلسلة الاتصال الأولية في هذه المقالة لأغراض العرض التوضيحي فقط.

سلسلة اتصال تتضمن معلومات التخويل المطلوبة لتطبيقك للوصول إلى خدمة Azure Web PubSub. مفتاح الوصول داخل سلسلة الاتصال يشبه كلمة مرور الجذر للخدمة الخاصة بك. في بيئات الإنتاج، قم دائما بحماية مفاتيح الوصول الخاصة بك. استخدم Azure Key Vault لإدارة مفاتيحك وتدويرها بأمان وتأمين اتصالك ب WebPubSubServiceClient.

تجنب توزيع مفاتيح الوصول إلى مستخدمين آخرين، أو ترميزها ترميزًا ثابتًا، أو حفظها في أي مكان في نص عادي يمكن للآخرين الوصول إليه. قم بتدوير المفاتيح الخاصة بك إذا كنت تعتقد أنها قد تعرضت للخطر.

نظرة عامة

رسم تخطيطي يوضح كيفية عمل Azure Web PubSub مع Azure Static Web Apps.

يوفر GitHub أو Azure Repos التحكم بالمصادر لتطبيقات الويب الثابتة. يراقب Azure فرع المستودع الذي تحدده، وفي كل مرة يحدث فيها تغيير في التعليمات البرمجية إلى المستودع المصدر، يتم تشغيل بنية جديدة لتطبيق الويب ونشرها تلقائيا في Azure. يتم توفير التسليم المستمر بواسطة GitHub Actions وAzure Pipelines. تكتشف Static Web Apps الإصدار الجديد وتقدمه إلى مستخدم نقطة النهاية.

يحتوي نموذج تطبيق غرفة المحادثة المقدم مع هذا البرنامج التعليمي على سير العمل التالي.

  1. عندما يقوم مستخدم بتسجيل الدخول إلى التطبيق، يتم تشغيل Azure Functions login API لإنشاء عنوان URL لاتصال عميل خدمة Web PubSub.
  2. عندما يقوم العميل بتهيئة طلب الاتصال إلى Web PubSub، ترسل الخدمة حدث نظام connect يقوم بتشغيل Functions connect API لمصادقة المستخدم.
  3. عندما يرسل عميل رسالة إلى خدمة Azure Web PubSub، تستجيب الخدمة بحدث مستخدم message ويتم تشغيل Functions message API للبث، والرسالة إلى جميع العملاء المتصلين.
  4. يتم تشغيل Functions validate API بشكل دوري لحماية إساءة استخدام CloudEvents عند تكوين الأحداث في Azure Web PubSub باستخدام معلمة {event}معرفة مسبقا ، أي https://$STATIC_WEB_APP/api/{event}.

إشعار

يتم تشغيل واجهات برمجة تطبيقات connect الوظائف و message عند تكوين خدمة Azure Web PubSub مع هذين الحدثين.

المتطلبات الأساسية

إنشاء مورد Web PubSub

  1. قم بتسجيل الدخول إلى CLI Azure باستخدام الأمر التالي.

    az login

  2. قم بإنشاء مجموعة موارد.

    az group create \
  --name my-awps-swa-group \
  --location "eastus2"

  3. إنشاء مورد Web PubSub.

    az webpubsub create \
  --name my-awps-swa \
  --resource-group my-awps-swa-group \
  --location "eastus2" \
  --sku Free_F1

  4. احصل على مفتاح الوصول مع الاستمرار لاستخدامه لاحقا.

    تظهر سلسلة الاتصال الأولية في هذه المقالة لأغراض العرض التوضيحي فقط. في بيئات الإنتاج، قم دائما بحماية مفاتيح الوصول الخاصة بك. استخدم Azure Key Vault لإدارة مفاتيحك وتدويرها بأمان وتأمين اتصالك ب WebPubSubServiceClient.

    az webpubsub key show \
  --name my-awps-swa \
  --resource-group my-awps-swa-group

    AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>

    استبدل العنصر النائب <YOUR_AWPS_ACCESS_KEY> بقيمة primaryConnectionString من الخطوة السابقة.

إنشاء مستودع

تستخدم هذه المقالة مستودع قالب GitHub لتسهيل بدء التشغيل. يتميز القالب بتطبيق بدء تشغيل تقوم بنشره إلى Azure Static Web Apps.

  1. انتقل إلى https://github.com/Azure/awps-swa-sample/generate لإنشاء مستودع جديد لهذا البرنامج التعليمي.
  2. حدد نفسك كمالكوقم بتسمية المستودع الخاص بك my-awps-swa-app.
  3. يمكنك إنشاء مستودع عام أو خاص وفقا لتفضيلاتك. يعمل كلاهما في البرنامج التعليمي.
  4. حدد «Create repository from template».

إنشاء تطبيق ويب ثابت

الآن وبعد إنشاء المستودع، يمكنك إنشاء تطبيق ويب ثابت من Azure CLI.

  1. إنشاء متغير للاحتفاظ باسم مستخدم GitHub الخاص بك.

    GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>

    استبدل العنصر النائب <YOUR_GITHUB_USER_NAME> باسم مستخدم GitHub.

  2. قم بإنشاء تطبيق ويب ثابت جديد من المستودع الخاص بك. عند تشغيل هذا الأمر، يبدأ CLI تسجيل دخول تفاعلي GitHub. اتبع الرسالة لإكمال التخويل.

    az staticwebapp create \
    --name my-awps-swa-app \
    --resource-group my-awps-swa-group \
    --source https://github.com/$GITHUB_USER_NAME/my-awps-swa-app \
    --location "eastus2" \
    --branch main \
    --app-location "src" \
    --api-location "api" \
    --login-with-github

    هام

    يجب ألا يتضمن عنوان URL الذي تم تمريره إلى المعلمة --source اللاحقة .git.

  3. انتقل إلى https://github.com/login/device.

  4. أدخل رمز المستخدم كما هو معروض لرسالة وحدة التحكم الخاصة بك.

  5. حدد متابعة.

  6. حدد Authorize AzureAppServiceCLI.

  7. تكوين إعدادات تطبيق الويب الثابت.

    az staticwebapp appsettings set \
  -n my-awps-swa-app \
  --setting-names WebPubSubConnectionString=$AWPS_ACCESS_KEY WebPubSubHub=sample_swa

عرض الموقع الإلكتروني

هناك جانبان لنشر تطبيق ثابت: الأول ينشئ موارد Azure الأساسية التي تشكل تطبيقك. والثاني هو سير عمل GitHub Actions الذي يقوم بإنشاء التطبيق الخاص بك ونشره.

قبل أن تتمكن من الانتقال إلى موقع ثابت جديد، يجب أن تنتهي عملية إنشاء النشر أولاً من التشغيل.

  1. ارجع إلى نافذة وحدة التحكم الخاصة بك وقم بتشغيل الأمر التالي لسرد عناوين URL المقترنة بتطبيقك.

    az staticwebapp show \
  --name  my-awps-swa-app \
  --query "repositoryUrl"

    يرجع إخراج هذا الأمر عنوان URL إلى مستودع GitHub الخاص بك.

  2. انسخ عنوان URL للمستودع والصقه في المستعرض.

  3. حدد علامة التبويب إجراءات.

    في هذه المرحلة، يقوم Azure بإنشاء الموارد لدعم تطبيق الويب الثابت. انتظر حتى تتحول الأيقونة الموجودة بجانب سير العمل قيد التشغيل إلى علامة اختيار ذات خلفية ✅خضراء . قد تستغرق هذه العملية بضع دقائق لإكمالها.

    بمجرد ظهور أيقونة النجاح، يكتمل سير العمل ويمكنك العودة إلى نافذة وحدة التحكم الخاصة بك.

  4. قم بتشغيل الأمر التالي للاستعلام عن عنوان URL لموقع الويب الخاص بك.

    az staticwebapp show \
  --name my-awps-swa-app \
  --query "defaultHostname"

    اضغط باستمرار على url لتعيينه في معالج أحداث Web PubSub.

    STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>

تكوين معالج أحداث Web PubSub

أنت قريب جدا من الاكتمال. الخطوة الأخيرة هي تكوين Web PubSub بحيث يتم نقل طلبات العميل إلى واجهات برمجة تطبيقات الوظيفة.

  1. قم بتشغيل الأمر التالي لتكوين أحداث خدمة Web PubSub. يقوم بتعيين الدالات ضمن api المجلد في المستودع الخاص بك إلى معالج أحداث Web PubSub.

    az webpubsub hub create \
  -n "my-awps-swa" \
  -g "my-awps-swa-group" \
  --hub-name "sample_swa" \
  --event-handler url-template=https://$STATIC_WEB_APP/api/{event} user-event-pattern="*" system-event="connect"

أنت الآن جاهز للعب مع موقع الويب <الخاص بك YOUR_STATIC_WEB_APP>. انسخه إلى المستعرض وحدد متابعة لبدء الدردشة مع أصدقائك.

تنظيف الموارد

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

az group delete --name my-awps-swa-group

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

في هذا التشغيل السريع، تعلمت كيفية تطوير تطبيق دردشة بلا خادم ونشره. الآن، يمكنك البدء في إنشاء تطبيقك الخاص.

استمتع بالعروض التوضيحية القابلة للعب

روابط Azure Web PubSub لـ Azure Functions