Share via

بدء استخدام نموذج بطل الدردشة

  • مقالة

هام

تتوفر هذه العينة على GitHub.

يوضح نموذج Azure Communication Services Group Chat Hero كيفية استخدام Communication Services Chat Web SDK لإنشاء تجربة دردشة جماعية.

في هذا التشغيل السريع للعينة، نتعلم كيفية عمل العينة قبل تشغيل العينة على جهازك المحلي. ثم ننشر النموذج إلى Azure باستخدام موارد Azure Communication Services الخاصة بك.

نظرة عامة

يحتوي النموذج على تطبيق من جانب العميل وتطبيق من جانب الخادم. تطبيق من جانب العميل هو تطبيق ويب React/Redux يستخدم واجهة المستخدم Microsoft's Fluent. يرسل هذا التطبيق طلبات إلى تطبيق من جانب الخادم Node.js يساعد التطبيق من جانب العميل على الاتصال ب Azure.

وهكذا يبدو النموذج:

لقطة شاشة تعرض الصفحة المنتقل إليها من نموذج التطبيق.

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

لقطة شاشة تعرض شاشة ما قبل الدردشة للتطبيق.

بمجرد تكوين اسم العرض والرموز التعبيرية، يمكنك الانضمام إلى جلسة الدردشة. الآن ترى لوحة الدردشة الرئيسية حيث تعيش تجربة الدردشة الأساسية.

لقطة شاشة تعرض الشاشة الأساسية لنموذج التطبيق.

مكونات شاشة الدردشة الرئيسية:

  • منطقة الدردشة الرئيسية: تجربة الدردشة الأساسية حيث يمكن للمستخدمين إرسال الرسائل وتلقيها. لإرسال الرسائل، يمكنك استخدام منطقة الإدخال والضغط على زر Enter (أو استخدام زر الإرسال). يتم تنظيم رسائل الدردشة المستلمة بواسطة المرسل بالاسم الصحيح والرموز التعبيرية الصحيحة. ترى نوعين من الإعلامات في منطقة الدردشة: 1) كتابة الإعلامات عند قيام المستخدم بالكتابة و2) الإعلامات المرسلة والقراءة للرسائل.
  • العنوان: حيث يرى المستخدم عنوان مؤشر ترابط الدردشة وعناصر التحكم للتبديل بين الأشرطة الجانبية للمشارك والإعدادات، وزر مغادرة للخروج من جلسة الدردشة.
  • الشريط الجانبي: حيث يتم عرض المشاركين وإعداد المعلومات عند التبديل باستخدام عناصر التحكم في الرأس. يحتوي الشريط الجانبي للمشاركين على قائمة بالمشاركين في الدردشة ورابط لدعوة المشاركين إلى جلسة الدردشة هذه. يتيح لك شريط الإعدادات الجانبي تكوين عنوان مؤشر ترابط الدردشة.

أكمل المتطلبات الأساسية والخطوات التالية لإعداد العينة.

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

قبل تشغيل العينة لأول مرة

  1. افتح مثيل PowerShell أو وحدة طرفية لـ Windows أو موجه الأوامر أو ما يعادله وانتقل إلى الدليل حيث تريد استنساخ النموذج إليه.

  2. استنساخ المستودع باستخدام سلسلة CLI التالية:

    git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git

    أو استنساخ المستودع باستخدام أي أسلوب موضح في استنساخ مستودع Git موجود.

  3. احصل على Connection String و Endpoint URL من مدخل Microsoft Azure أو باستخدام Azure CLI.

    az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"

    لمزيد من المعلومات حول سلاسل الاتصال، انظر موارد Azure Communication Services

  4. بمجرد الحصول على Connection String، أضف سلسلة الاتصال إلى ملف الخادم/appsettings.json الموجود ضمن مجلد الدردشة. إدخال سلسلة الاتصال في المتغير: ResourceConnectionString.

  5. بمجرد الحصول على Endpoint، أضف سلسلة نقطة النهاية إلى ملف Server/appsetting.json . أدخل نقطة النهاية الخاصة بك في المتغير: EndpointUrl.

  6. احصل على identity من مدخل Azure. حدد Identities و User Access Tokens في مدخل Microsoft Azure. إنشاء مستخدم ذي Chat نطاق.

  7. بمجرد الحصول على identity السلسلة، أضف سلسلة الهوية إلى ملف Server/appsetting.json . أدخل سلسلة الهوية الخاصة بك في المتغير: AdminUserId. هذا هو مستخدم الخادم لإضافة مستخدمين جدد إلى مؤشر ترابط الدردشة.

تشغيل محلي

  1. تعيين سلسلة الاتصال فيServer/appsettings.json
  2. تعيين سلسلة عنوان URL لنقطة النهاية في Server/appsettings.json
  3. تعيين سلسلة adminUserId في Server/appsettings.json
  4. npm run setup من الدليل الجذر
  5. npm run start من الدليل الجذر

يمكنك اختبار النموذج داخليًّا عن طريق فتح مدد متعددة للمتصفح باستخدام عنوان URL الخاص بالدردشة لمحاكاة دردشة متعددة المستخدمين.

نشر النموذج على Azure

  1. ضمن الدليل الجذر، قم بتشغيل هذه الأوامر:
npm run setup
npm run build
npm run package
  1. استخدم ملحق Azure وانشر دليل Chat/dist في خدمة التطبيق

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

إذا كنت ترغب في تنظيف وإزالة اشتراك Communication Services، يمكنك حذف المورد أو مجموعة الموارد. يؤدي حذف مجموعة الموارد إلى حذف أية موارد أخرى مقترنة بها أيضًا. تعرّف على المزيد حول تنظيف الموارد.

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

تنزيل النموذج من GitHub

لمزيد من المعلومات، راجع المقالات التالية:

  • النماذج - تعرف على المزيد من النماذج والأمثلة على صفحة نظرة عامة على النماذج.
  • Redux - إدارة الحالة من جانب العميل
  • FluentUI - مكتبة واجهة مستخدم مدعومة من Microsoft
  • React - مكتبة لبناء واجهات المستخدم