Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Browser Apps
Code

.قم بإنشاء دردشة XMPP مرنة لموقع قائم على الأعضاء مع فلاش ... 

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by miahood (you can also view the original English article)

سننظر في كيفية إنشاء تطبيق دردشة XMPP يمكن استخدامه في العديد من السيناريوهات المختلفة.   سوف تتعلم كيفية دمج قاعدة بيانات خارجية مع خادم Openfire Jabber في Ignite Realtime وكيفية استخدام مكتبة XIFF لإنشاء ملحقات XMPP مخصصة يمكن استخدامها لإرسال البيانات المخصصة عبر الشبكة. 

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



معاينة النتيجة النهائية 

دعونا نلقي نظرة على واجهة النتيجة النهائية التي سنعمل من أجلها (لا يعمل هذا   البرنامج التجريبي كعميل محادثة فعلي):

في ما يلي عرض ترويجي للفيديو يُظهر العملية: 



الخطوة 1: المتطلبات الأساسية 

يفترض هذا البرنامج التعليمي أن لديك بعض الخبرة مع PHP.  يجب أن يكون لديك خادم Wamp مثبت على نظامك ويجب أن تكون على دراية بـ PhpMyAdmin.  إذا لم يكن لديك برنامج WAMP ، فيمكنك تنزيله هنا .  ستحتاج أيضًا إلى تنزيل خادم Openfire Jabber Server ومكتبة XIFF API من موقع Ignite Realtime على الويب.   سأساعدك في عملية تثبيت Openfire.   وأخيرًا ، ستحتاج إلى أحدث إصدار من Java مثبتًا على نظام التشغيل لديك و Flash CS4 أو إصدار أحدث.  سوف أستخدم Flash CS5 Professional في هذا البرنامج التعليمي.   إذا لم يكن لديك أحدث إصدار من Java ، يمكنك تنزيل أحدث إصدار من هنا .



الخطوة 2: إعداد قاعدة البيانات الخاصة بنا 

تأكد من تشغيل خادم Wamp على جهاز الكمبيوتر الخاص بك وانتقل إلى http: // localhost / phpmyadmin / في متصفح الويب الخاص بك. 

. إنشاء قاعدة بيانات جديدة تسمى MyContentSite باستخدام PhpMyAdmin. 

create the main database

إنشاء جدول جديد في MyContentSite قاعدة بيانات تسمى myMembers مع ثمانية حقول.  

the mymembers table

بعد إنشاء جدول myMembers بنجاح بواسطة PhpMyAdmin ، قم بإنشاء الحقول التالية: 

  • رمز المستخدم 
  •  الاسم الاول
  •  الكنية
  • اسمي 
  • .my_password 
  • البريد الإلكتروني 
  •  STATUS_MESSAGE
  • بلد  

يجب أن تبدو الشاشة كما يلي: 

members fields 1

. اسمحوا لي أن أحطم كل مجال.  و المرن يجب أن يكون حقل من نوع INT.  . يمكنك تغيير نوع الحقل من عمود النوع .    جعل هذا الحقل الفهرس الأساسي وتعيين هذا الحقل لزيادة تلقائية نفسها.  قم بذلك عن طريق تحديد الخيار PRIMARY أسفل عمود INDEXفي صف الحقول هذا.   ثم تحقق خانة الاختيار تحت السيارات الاضافة العمود.  يمثل هذا الحقل معرف المستخدم للعضو الحالي في موقعنا.  . وFIRST_NAME ، LAST_NAME ، my_username ، my_password ،البريد الإلكتروني ، و بلد الحقول يجب أن يكون لديك نوع البيانات أو VARCHAR وطول / القيمة يجب تعيينها إلى 255. 

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

members fields 2

وأخيرًا ، يجب أن يكون حقل status_message من نوع MEDIUMTEXT .

بمجرد الانتهاء من إنشاء جميع الحقول ، انقر فوق الزر " حفظ" .

ssaved members fields

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

اترك حقل uid فارغًا لأننا نريد أن يزيد هذا الحقل تلقائيًا بنفسه. تعيين FIRST_NAME ل جين وLAST_NAME ميدانية إلى وزارة الطاقة . اضبط my_username على janedoeبكافة حروف الكاسيت السفلى. بالنسبة إلى حقل my_password ، سنستخدمالقيمة المجزأة لكلمة المرور لدينا وهي tutsplus في كل الأحرف الصغيرة. اكتب ca28ad0733a3dde9dc1f30e32718d209 فيحقل my_password . يمكنك تعيين البريد الإلكتروني الحقل إلى عنوان البريد الإلكتروني من اختيارك و STATUS_MESSAGE ميدانية إلى كل ما تريد. عيّنحقل البلد إلى أي بلد تريده أيضًا. عند الانتهاء ، انقر فوق الزر " حفظ" . كرر هذه العملية لإنشاء حساب ل فلان الفلاني مع my_usernameالميداني الذي ل johndoe123 في جميع الحروف الكبيرة.  استخدم نفس كلمة المرور كما كان من قبل.

jane doe account
john doe account
saved accounts


الخطوة 2: تثبيت Openfire

بمجرد تنزيل Openfire من موقع Ignite Realtime ، قم بتشغيل ملف exe للتثبيت(أو ملف dmg إذا كنت تستخدم Mac).

initializing installer

اختر لغتك.

choose your language

انقر فوق التالي للمتابعة.

begin installation

اقبل اتفاقية الترخيص.

terms of use

اختر دليلًا وانقر على التالي للمتابعة.

installation directory

حدد مجلد قائمة ابدأ.

start menu folder

انقر فوق التالي لبدء التثبيت.

extraction

بمجرد اكتمال التثبيت ، انقر فوق " إنهاء" لتشغيل Openfire.  ستبدأ خدمة Openfire تلقائيًا عند تشغيل البرنامج. انقر فوق الزر Admin Admin عند انتهاء Openfire من التشغيل.

installation complete
Openfire starting up
Openfire running

الآن سنقوم بإعداد Openfire. اختر لغتك المفضلة وانقر فوق متابعة .

choose language

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

server settings

.

database settings

. اكتبcom.mysql.jdbc.Driver في الحقل فئة برنامج تشغيل JDBC . قم بتغيير[host-name] إلى localhost وقم بتغيير [database-name] إلىmycontentsite في حقل عنوان URL لقاعدة البيانات . تعيين اسم المستخدم وكلمةالمرور إلى اسم المستخدم وكلمة المرور لقاعدة بيانات MySQL. في هذا البرنامج التعليمي ، استخدمت اسم المستخدم الافتراضي لـ MySQL وهو الجذر ،ويظل حقل كلمة المرور فارغًا. انقر فوق متابعة للمضي قدمًا.

mysql setup 1
mysql setup 2

اترك إعدادات ملف التعريف على الوضع الافتراضي . انقر فوق متابعة للمضي قدمًا.

profile settings

اختر عنوان بريد إلكتروني لحساب المسؤول الخاص بك وكلمة مرور ثم تابع.

admin password

لقد انتهينا الآن من عملية الإعداد.  يمكنك الآن تسجيل الدخول إلى وحدة تحكم المشرف. استخدام اسم المستخدم الافتراضي المشرف وكلمة مرور اخترت أثناء الإعداد.


الخطوة 3: إعداد غرف المحادثة

طلبنا يسمح للمستخدمين بالاتصال داخل غرف الدردشة. ولكن لكي يحدث هذا ، يجب أن يكون لدى مستخدمينا غرف دردشة للانضمام إليها.  لنقم بإنشاء غرف المحادثة باستخدام Openfire Admin Console.  إذا لم تكن قد قمت بذلك بالفعل ، فقم بتشغيل Openfire Server.  تسجيل الدخول في وحدة تحكم المشرف Openfire. انتقل إلى صفحة "غرف الدردشة الجماعية" بالنقر فوق علامة التبويب " دردشة المجموعة" .

chat room home

انقر فوق إنشاء غرفة جديدة على الجانب الأيسر من الشاشة.  املأ التفاصيل كما تراها في الصورة أدناه.

new chat room

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

room creation

اتبع نفس الخطوات لإنشاء غرفتين دردشة آخرين.

another room
last room
all chat rooms

.

في هذا الدّرس التعليمي ، يستخدم موقعنا الإلكترونيّ التفاعليّ قاعدة بيانات MySQL لتخزين بيانات كلّ مستخدم.  يمكن دمج Openfire مع قاعدة بيانات خارجية ، وقاعدة بيانات MySQL في هذه الحالة.  أولا يجب علينا تكوين Openfire للقيام بذلك.

افتح الملف openfire.xml باستخدام Notepad أو preferrably محرر نص منسق مثل Notepad ++ كما ذكرت من قبل. سيكون الملف موجودًا في المجلد Openfire / conf / داخل مجلد دليل ملفات البرنامج على جهاز الكمبيوتر الخاص بك.

هذا ما يبدو عليه ملف openfire.xml . يجب أن يبدو ملفopenfire.xml الخاص بك مشابهاً لي. هنا رابط إلى دليل تكامل قاعدة البيانات المفتوحة Openfire على موقع Ignite Realtime. ستلاحظ أنه تم إرشادك لإجراء تغييرات مباشرة على ملف تكوينopenfire.xml في هذا الدليل.

لا تقم بإجراء أي تغييرات على هذا الملف إلا إذا لم تشبه الألغام.

ملاحظة: من المحتمل جدًا أن يستخدم ملف openfire.xml برنامجDefaultConnectionProvider . إذا كان الأمر كذلك ، فقد تواجه مشكلة في تسجيل الدخول إلى وحدة تحكم المشرف.  حاول تسجيل الدخول باستخدام الإعداد الافتراضي أولاً. إذا لم تعمل كلمة المرور التي حددتها أثناء الإعداد ، فاستخدم كلمة المرور الافتراضية لتسجيل الدخول. اسم المستخدم الافتراضي هو admin وكلمة المرور الافتراضية هي admin كذلك.

إذا لم تتمكن من تسجيل الدخول ، قم بتغيير DefaultConnectionProviderإلى EmbeddedConnectionProvider .  ثم أعد تشغيل Openfire وحاول تسجيل الدخول مرة أخرى.  إذا كنت لا تزال تواجه مشكلة ، فقم بتشغيل الإعداد إلى Openfire مرة أخرى. غيّر قيمة علامة الإعداد من false إلى true داخل ملف openfire.xml.  ثم أعد تشغيل Openfire لتشغيل الإعداد مرة أخرى.  افعل هذا كحل أخير - وهذا لا ينبغي أن يكون ضروريًا.

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

أنا لا أريدك أن تذهب من خلال ما اضطررت لذلك لذا يرجى اتباع الخطوات التالية بعناية.  Openfire لديه طريقة رائعة للتحرير وخلق الخصائص التي أجدها أكثر كفاءة من الاضطرار إلى تحرير ملف xml على نظامك.

تسجيل الدخول إلى وحدة تحكم المشرف Openfire . انقر على رابط خصائص النظام على الجانب الأيسر من الصفحة الرئيسية.

system properties

الخادم الخاص بك خصائص النظام الصفحة ينبغي أن ننظر بشيء من هذا القبيل.

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

في الجزء السفلي من الشاشة ، سترى قسمًا بعنوان إضافة موقع جديد .  لديها حقلين. الحقل الأول اسم الخاصية . الحقل الثاني هو قيمة الخاصية . ضمن حقل اسم الخاصية ، اكتب jdbcProvider.driver وضمن حقل قيمة الخاصية ، اكتبcom.mysql.jdbc.Driver في الحقل. انقر فوق الزر "حفظ خاصية" عند الانتهاء.  ستقوم باتباع هذه الخطوات لإنشاء المزيد من الخصائص بالإضافة إلى تعديل الخصائص الموجودة.

jdbcProvider driver

إنشاء خاصية تسمى jdbcProvider.connectionString مع القيمة jdbc: mysql: // localhost / mycontentsite؟ user = root & password = .

jdbcProvider connection string

الآن سنقوم بإجراء التعديل الأول على خاصية موجودة. انقر فوق الرابط تحرير الذي يتوافق مع الخاصيةprovider.auth.className . غيّر قيمته إلىorg.jivesoftware.openfire.auth.JDBCAuthProvider باستخدام جدولالخصائص "تعديل" . انقر فوق الزر حفظ خاصية عند الانتهاء.

provider auth classname

قم بإنشاء خاصية جديدة باسم jdbcAuthProvider.passwordSQL . أعطيها قيمة SELECT my_password FROM mymembers WHERE my_username =؟ .  قيمة هذه الخاصية هي سلسلة استعلام MySQL التي سيتم استخدامها لمصادقة مستخدم.

ملاحظة: لاحظ أنه يحتوي على علامة استفهام (؟).  سيتم استبدال علامة الاستفهام بالقيمة داخل حقل اسم المستخدم.

jdbcAuthProvider passwordSQL

قم بإنشاء خاصية جديدة تسمى jdbcAuthProvider.passwordType . اعطها قيمة md5 .

jdbcAuthProvider passwordType

ملاحظة: إن jdbcAuthProvider خصائص سوف تكون مخفية إذا كنت قد اتبعت الخطوات بشكل صحيح.

property saved

أنشئ خاصية جديدة باسم admin.authorizedUsernames . يجب أن تكون القيمة jid لاسم المستخدم الذي ترغب في تسجيل الدخول إليه باستخدام وحدة تحكم المشرف .

ملاحظة: انظر إلى الصورة أدناه.  لاحظ أن jid و john doe jid's هي أسماء المستخدمين الخاصة بهم متصلاً مع علامة @ والمجال XMPP الخاص بالملقم.

authorized usernames

تعديل خاصية provider.user.className عن طريق تغيير قيمته إلىorg.jivesoftware.openfire.user.JDBCUserProvider .

provider user className

إنشاء خاصية جديدة تسمى jdbcUserProvider.loadUserSQL مع القيمةSELECT first_name ، البريد الإلكتروني FROM mymembers WHERE my_username =؟ .

jdbcUserProvider loadUserSQL

إنشاء خاصية جديدة تسمى jdbcUserProvider.userCountSQL وإعطائها القيمةSELECT COUNT (*) من mymembers .

jdbcUserProvider userCountSQL

قم بإنشاء خاصية جديدة تسمى jdbcUserProvider.allUsersSQL . قم بتعيين القيمة إلى SELECT my_username FROM mymembers .

jdbcUserProvider allUsersSQL

قم بإنشاء خاصية جديدة تسمى jdbcUserProvider.searchSQL . اعطها القيمة SELECT my_username FROM mymembers .

jdbcUserProvider searchSQL

أنشئ خاصية جديدة باسم usernameField . قم بتعيين قيمته إلىmy_username .

username field

قم بإنشاء خاصية جديدة تسمى nameField . قم بتعيين قيمته إلى first_name.

name field

قم بإنشاء خاصية جديدة تسمى emailField . حدد قيمته إلى البريد الإلكتروني.

email field

الآن بعد أن أضفنا وعدّلنا الخصائص المطلوبة ، يمكننا تسجيل الخروج من وحدة تحكم المشرف . أعد تشغيل Openfire وحاول تسجيل الدخول إلى وحدة تحكم المشرف مستخدمًا فعليًا.

تم الرفض!

حاول الآن تسجيل الدخول باسم المستخدم ، المشرف .

رفض الوصول مرة أخرى!  ماذا يجري هنا؟

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

تغيير ملف openfire.xml الخاص بك بحيث يبدو مثل هذا.

تأكد من تغيير أنك تستخدم DefaultConnectionProvider بدلاً منEmbeddedConnectionProvider ثم أغلق Openfire وأعد تشغيله. محاولة تسجيل الدخول إلى وحدة تحكم المشرف كعضو في قاعدة بيانات موقعك على الويب.  لقد قمت بتسجيل الدخول كـ John Doe. في حالة إجراء ذلك بشكل صحيح ، يجب أن تعود إلى وحدة تحكم المشرف ، ويجب أن يكون اسم المستخدم في الجانب العلوي الأيسر من الصفحة الرئيسية.

ملاحظة: قبل الانتقال ، تأكد من ظهور جميع الخصائص الموجودة في الملف openfire.xml على "خصائص النظام" لوحدة تحكم المشرف.  إذا لم تكن تعرف الآن كيفية إضافتها يدويًا.

logged in

الخطوة 5: PHP

نحتاج إلى استخدام PHP للحصول على البيانات من قاعدة بيانات MySQL وعرض البيانات على Flash.  لأولئك منكم الجدد على PHP سأشرح باختصار ما الذي يحققه كل برنامج نصي. لنبدأ بفئة MySQLConnection .

و MySQLConnection الدرجة يتصل وقطع الاتصال من قاعدة بيانات MySQL.

و LoginManager الطبقة يعالج تسجيلات المستخدم.  يمكن مصادقة المستخدم ثم تسجيل الدخول والخروج باستخدام هذا الصف.

ندعو login.php لتسجيل دخول المستخدم و logout.php لتسجيل خروج المستخدم باستخدام فئة LoginManager . للتحقق مما إذا كان المستخدم قد قام بتسجيل الدخول ، فإننا ندعو script_login.php .

البرنامج النصي النهائي الذي يتم استدعاؤه من ActionScript هو البرنامج النصيgrab_user_data.php الذي يتم استخدامه لتحديد بيانات المستخدم من قاعدة بيانات MySQL الخاصة بنا.

هذه البرامج النصية PHP تخدم دورا هاما جدا في تطبيقنا ولكنها أساسية للغاية.


الخطوة 6: إعداد الفلاش

افتح Flash Professional. قم بتعيين فئة الوثيقة إلى ChatApp . اضبط حجم المنصة على 550 × 400 .

setup_flash

.


الخطوة 7: إنشاء واجهة المستخدم الخاصة بالعميل

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

button component
buttons on stage

إضافة قائمة compenent إلى المرحلة. وضعه مباشرة تحتlogoutBtn وتغيير حجم المكون بحيث تناسبها بشكل جيد بين كل من الأزرار. قم بتعيين اسم المثيل الخاص به إلى قائمة .

list on stage

ونحن سوف تستخدم logoutBtn إلى خروج من جلسة عمل المستخدم وsendBtn للسماح للمستخدمين لدينا لإرسال الرسائل. في قائمة سيتم عرض كل من مستخدمي الانترنت في غرف الدردشة الحالية.  عند النقر فوق عنصر في القائمة ، سيتم تحميل ملف تعريف المستخدم.

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

text area component
text area on stage

وأخيرا نحن بحاجة إلى إضافة TextInput مكون إلى مرحلة . ضع المكوّن مباشرةً أسفل displayTxt وإلى يسار sendBtn . قم بتعيين اسم المثيل إلى inputTxt .

text input component

حدد كل المكونات على المسرح .  تحويل التحديد إلى رمز. يجب أن يكون الرمز MovieClip المسمىUserInterface . حدد الخيار Export for ActionScript . في الدرجة الحقل يجب قراءة UserInterface . عيّن اسم المثيللرمزنا الجديد على ui . أخيرا ، قم بتسمية الطبقة الحاليةلواجهة الخط الرئيسي .  سيساعدك هذا على تنظيم مشروعك بشكل أفضل.

all components on stage
user interface symbol
ui instance
interface layer

الخطوة 8: شاشة تسجيل الدخول

سيكون تطبيق الدردشة لدينا عديم الفائدة إذا لم يتمكن المستخدم من تسجيل الدخول إلى طلبنا.  دعونا نبني شاشة تسجيل الدخول.  قم بإنشاء طبقة جديدة في المخطط الزمني الرئيسي. قم بتسمية طبقة تسجيل الدخول .

login layer

باستخدام المستطيل أداة، رسم مستطيل على خشبة المسرح وهذا هو نفس حجمالمرحلة . يجب تعيين stangle المستطيل إلى 0 . يجب ألا يحتوي المستطيل على خط ويجب ملؤه باللون الأسود مع ترهل بنسبة 50٪ .

darkbox on stage
color picker 1
color picker 2

قم بتمييز المستطيل الأسود وقم بتحويله إلى رمز MovieClip جديد يسمىDarkBox .  سنستخدم هذا الكائن لتعتيم الشاشة أثناء عرض مكونات تسجيل الدخول. تعيين اسم مثيل DarkBox الكائن إلى darkBox .

darkbox symbol
darkbox instance

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

قم بتعيين اسم المثيل للقيمة lable الأولى إلى userLabel وقم بتعيين اسم المثيل للملصق الثاني ليمرر . عيّن اسم المثيل لنطاق إدخال النص الأول إلى usernameTxt وقم بتعيين اسم المثيل لحقل نص الإدخال الثاني إلى passwordTxt . قم بتعيين اسم المثيل للزر لتسجيل الدخول Btn .

استخدام النص أداة لإضافة الحقل النصي الحيوي لل مرحلة .  اضبط حجم النص على 18 وجعل لون النص أحمر. قم بتعيين اسم المثيل إلىerrorTxt . موقف errorTxt تحت loginBtn كما رأينا أدناه.

login screen elements

سنقوم بتحويل كل شيء على طبقة تسجيل الدخول إلى رمز MovieClip واحد جديد يسمى LoginScreen ولكن قبل أن نتمكن من القيام بذلك ، نحتاج إلى قفل كل شيء على طبقة الواجهة حتى لا نختار أيًا من هذه الطبقة عن طريق الخطأ. قم بقفل طبقة الواجهة منخلال تحديد زر تأمين الطبقة الموجود بجوار الطبقة.  عندما تكون الطبقة مؤمنة ، سترى رمزًا للقفل بجوار الطبقة.

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

login screen component
stage with elements

الخطوة 9: إنشاء نافذة الملف الشخصي

قفل وإخفاء جميع الطبقات الحالية على المخطط الزمني الرئيسي . إنشاء طبقة جديدة واستدعاء معلومات الملف الشخصي .

ملاحظة: هذه مجرد طبقة سوف نستخدمها في التطوير.  يمكنك حذف هذه الطبقة في نهاية هذه الخطوة إذا كنت ترغب في ذلك.

profile info layer

باستخدام أداة المستطيل ، ارسم مستطيلاً مع نصف قطر كل ركن إلى 10.00. يجب أن يكون المستطيل حشوًا مطابقًا لعنصر DarkBox(أسود بشفافية بنسبة 50٪) وخط أبيض معتم تمامًا بقيمة سكتة دماغية قدرها4.00 .  أضبط لون المسرح على Orange المحترق في الصورة أدناه بحيث يمكنك رؤية كيف يجب أن يكون كل شيء أكثر وضوحًا.

rounded rectangle

إضافة نص ديناميكي إلى مرحلة مباشرة على الجزء العلوي من المستطيل.  ضع موضع حقل النص وقم بتغيير حجمه بحيث يحتل معظم مساحة المستطيل ولكنه يترك مساحة لزر. قم بتعيين اسم المثيل لحقل النص إلى txt . تأكد من أن لون النص أبيض وحجم النص هو 18 بكسل على الأقل .

text field
unfinished profile window
an added button

إضافة مكون زر جديد في أعلى المستطيل وتعيين اسم المثيل لإغلاق .

highlighted profile window

حدد كل كائن على طبقة معلومات الملف الشخصي وقم بتحويلها إلى رمزMovieClip المسمى ProfileWindow . تحقق من الحقلتصدير لـ ActionScript بحيث يحتوي هذا الرمز على ارتباط ProfileWindow. الآن قم بإزالة كائن ProfileWindow من المرحلة .  سنقوم بإنشاء هذا الكائن بالكود.

profile window symbol

الخطوة العاشرة: رمز ActionScript الأول

قم بإنشاء ملف ActionScript جديد وقم بتسميته ChatApp.as .  أضف الأسطر التالية من التعليمات البرمجية إلى الفصل.

داخل الكود أعلاه ، نتحقق من وجود المرحلة في مُنشئ الصف. . . .

. . إذا كانت المرحلة غير موجودة ، فإننا نستمع إلى حدثADDED_TO_STAGE ويتم استدعاء أسلوب معالج الحدث onAdded عند توفر الجزء الرئيسي.. ل تمكين طريقة يسجل تمديد عادتنا (الطبقة) معExtensionClassRegistry فئة في مكتبة XIFF.  سنتحدث أكثر عن هذا في وقت لاحق.

قم بتأليف مثيل جديد من فئة LoginCredentialsGrabber وقم بتعيينه إلىمتغير grabber . أيضاً إنشاء مثيل جديد منفئة UserDataGrabber وتعيينه إلى متغير userData .  سوف نكتب هذه الفصول في وقت لاحق أيضا. عندما يتم تضمين ملف SWF الخاص بنا في صفحة الويب ، فإننا نرغب في أن يتصل تطبيقنا بغرفة دردشة معينة مرتبطة بالمحتوى الموجود على الصفحة. سنقوم فيما بعد بتمرير اسم غرفة المحادثة ، التي يجب أن يتصل بها تطبيقنا ، في معلمة flashVars في وقت التضمين. ولكن في الوقت الحالي ، سنقوم أولاً بالتحقق لمعرفة ما إذا كان المتغير موجودًا ومن ثم نلتقط القيمة ونعينها لمتغير roomName . وأخيرًا ، ندير طريقة checkLogin التي لاتحتاج إلى شرح.


الخطوة 11: التحقق من ما إذا كان المستخدم مسجل في

اكتب طريقة checkLogin في Document Class ( ChatApp ).

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

بعد ذلك ، سنكتب أسلوب onLoginCredentials .

ملاحظة: نحن لا نزال في فئة المستند.)

هذه الطريقة هي أيضا بسيطة حقا. وLoginCredentialsGrabber يتحقق لمعرفة ما إذا تم تسجيل دخول المستخدم في طريق الاستيلاء الكوكيز جلسة عمل باستخدام PHP. يعرض PHP البيانات إلى كائن LoginCredentialsGrabber ويتم تحليل البيانات.

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


الخطوة 12: الحصول على بيانات اعتماد تسجيل الدخول

اكتب فئة LoginCredentialsGrabber .

لدينا اثنين من الثوابت وأربعة خصائص للقراءة فقط قبل أسلوب منشئ. و مصدر ثابت هو سلسلة التي تمثل موقع البرنامج النصي PHP يتحقق لمعرفة ما إذا تم تسجيل دخول المستخدم في.  كما نقوم بتخزين رمز المرور اللازم لتنفيذ البرنامج النصي PHP في ثابت. عندما يتم استدعاء أسلوب الاستيلاء ، يقوم كائنURLLoader بتحميل البرنامج النصي PHP الذي يمرر رمز المرور باستخدامURLRequest ويعيد البرنامج النصي البيانات مرة أخرى إلى وميض. البيانات عبارة عن مجموعة من متغيرات url التي يمكننا تحليلها باستخدام فئةURLVariables .  إذا قام مستخدم بتسجيل الدخول ، فسوف يعطينا سكريبت PHP اسم المستخدم وكلمة المرور الخاصين بالمستخدم حتى نتمكن من استخدام هذه المعلومات لربط المستخدم Openfire. وأخيرًا ، نوفر أساليب getter لمنح إمكانية الوصول للقراءة فقط إلى الشفرة الخارجية.


الخطوة 13: عرض شاشة تسجيل الدخول

اكتب أسلوب displayLogin في فئة المستند (ChatApp.as).

قمنا بتعيين الخاصية المرئية loginScreen إلى true وانتظر أن يقومloginScreen بإرسال حدث LOGIN . ثم يتم استدعاء الأسلوب onLoggingIn .  دعونا نكتب هذه الطريقة الآن.

نجعل واجهة المستخدم مرئية ثم نسمي طريقة الاتصال.

هام: لاحظ أننا باستخدام اسم المستخدم وكلمة المرور من loginScreen الصورةمدير كائن ( loginScreen.manager ) بدلا من المختطف اسم المستخدم وكلمة المرور الكائن كما فعلنا في onLoginCredentials الأسلوب.


الخطوة 14: الاتصال بـ Openfire

أخيرا ، يمكننا أن نكتب طريقة الاتصال .  تقبل الطريقة اثنين من المعلمات المطلوبة: الأول هو اسم المستخدم الخاص بالمستخدم والثاني هو كلمة مرور المستخدمين.

قم بتحديث كائن XMPPConnection وقم بتعيينه إلى متغير الاتصال . تعيين اسم المستخدم وكلمة المرور الخاصة بالمستخدم جنبا إلى جنب مع الخادم ( SERVER ) و الموارد ( الموارد ).  ثم قم بإضافة مستمعي الأحداث إلى كائن الاتصال. وأخيرًا ، نسميه طريقة الاتصال على كائنXMPPConnection .

اكتب الطرق التالية:

و onConnected ، onIncomingData ، و onOutgoingDataطرق يمكن أن يكون لها العديد من الاستخدامات المختلفة ولكن لهذا البرنامج التعليمي سوف نستخدم فقط منهم لتتبع الانتاج حتى نتمكن من تصحيح التطبيق لدينا عندما وإذا كنا بحاجة إلى (وتحديدا إذا كان من مشكلة في الاتصال بالخادم) . و onDisconnectedالأسلوب يجعل loginScreen مرئية ويعرض خطأ إلى المستخدم لإعلامه أن علاقتهم قد فقدت. تقوم طريقة onLogin بإعداد واجهة المستخدملدردشة XMPP عن طريق تعيين كائن XMPPConnection إلى خاصية الاتصالداخل كائن واجهة المستخدم . يسمح هذاالكائن UserInterface استدعاء أساليب مباشرة من كائنXMPPConnection خلال مرجع.  الآن بعد أن سجّل المستخدم الدخول إلى خادم Jabber (Openfire) ، يمكننا البدء في العمل نحو تسجيل دخول المستخدم إلى غرفة الدردشة ، لكن علينا أولاً تحديد هوية المستخدم بالضبط. نحن نطلق على طريقةgrabUserData للقيام بذلك. وأخيرًا نسمي طريقة startTimer .


الخطوة 15: الاستيلاء على بيانات المستخدم

الآن يتم تخزين ملف تعريف ارتباط جلسة المستخدم في متصفح المستخدم ويتم تسجيل دخول المستخدم إلى خادم Jabber.  الآن نحن بحاجة إلى الحصول على المعلومات الأساسية حول مستخدمينا.  نحن نعرف اسم المستخدم الخاص بالمستخدم ، حتى نتمكن من استخدامه للوصول إلى معلومات إضافية حول المستخدم المخزنة في قاعدة بيانات MySQL. قم بإنشاء أسلوبgrabUserData في فئة المستند.

كل السحر يحدث داخل فئة UserDataGrabber . كل ما علينا القيام به هو استدعاء طريقة الاستيلاء والاستماع لحدث COMPLETE . لاحظ أن الأسلوب الاستيلاء على كائنUserDataGrabber يقبل معلمة واحدة: اسم المستخدم الخاص بالمستخدم. استخدم اسم المستخدم الخاص بالمستخدم من مثيلالاتصال .

لن يكون لدى هذا الفصل أي سحر الآن لأنه غير موجود حتى الآن.  لنكتب هذا الفصل الآن. إنشاء فئة جديدة تسمىUserDataGrabber الذي يمتدflash.events.EventDispatcher .

أولاً ، نقوم بإنشاء const يخزن الموقع إلى البرنامج النصي PHP كسلسلة. أنشأنا البرنامج النصي grab_user_data.php سابقًا. . هذا هو البرنامج النصي الذي يقوم بإجراء استعلام في قاعدة البيانات باستخدام اسم مستخدم محدد لجلب بيانات المستخدم على شكل xml.

بعد ذلك نخلق متغيراتنا. دائماً أقوم بوضع تسطير أسفل السطر ( _ ) أمام اسم أي متغير خاص أو محمي (خاصية) يكون للقراءة فقط - o ، r في بعض الحالات النادرة ، للكتابة فقط . جميع المتغيرات في هذه الفئة للقراءة فقط . نستخدم أساليب getter للسماح بالوصولللقراءة فقط لكل متغير.

يتم تحديد جميع المتغيرات عندما يتم تحليل بيانات xml ، والتي يتم إخراجها من ملف php ، باستثناء متغير _username الذي تم تعيينه من معلمة اسم المستخدم لطريقةالاستيلاء .

الآن لطريقة الاستيلاء .  لا شيء يعقد هنا. قم بإنشاءكائن URLLoader جديد وكائن URLRequest جديد وكائن URLVariables جديد . و URLRequest منشئ يقبل معلمة واحدة، عنوان الموقع الذي ترغب في تحميل البيانات من. في هذه الحالة ، يتم تخزين عنوان url في ثابت المصدر . أنا متأكد الآن أنك قد لاحظت أن السلسلة ؟ cb = متسلسلة مع الوقت الحالي قد تم وصلته مع SOURCE . و سي بيتقف على المغفل ذاكرة التخزين المؤقت.  هذا يمنع البرنامج النصي لدينا من التحميل من خارج ذاكرة التخزين المؤقت (الذاكرة).

تهيئة URLRequest الكائن و URLVariables الاعتراض. وURLVariables كائن يحمل أن اسم المستخدم متغير أن السيناريو فب يحتاج إلى تنفيذ استعلام في قاعدة البيانات. يتم تمرير هذا المتغير مع URLRequest . استدعاءURLLoader الصورة تحميل طريقة والاستماع ل كامل الحدث لترسل من محملبحيث onComplete يمكن أن يسمى أسلوب معالج الحدث.

في أسلوب onComplete ، قم بإنشاء كائن XML جديد . تمرير البيانات المعينة من كائن URLLoader ( e.target في هذه الحالة) في المعلمة constructor's. قم بضبط متغيرات الفصل وارسلحدث COMPLETE .


الخطوة 16: فئة LoginScreen

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

نبدأ الفصل عن طريق إنشاء كائن LoginManager جديد . سنكتب هذا الفصل الدراسي في الخطوة التالية ولكن في الوقت الحالي نعلم أن هذا الفصل يدير تسجيل دخول المستخدم.

وظيفيا من هذا الصنف هو بسيط جدا. نقوم بتهيئة العرض وعندما يقوم المستخدم بالضغط على مفتاح Enter أو ينقر على loginBtn ، نتحقق مما إذا كان قد كتب أي شيء في حقول النص. إذا كان الأمر كذلك ، فنحن نستخدم المدير لتسجيل الدخول.  وإلا فإننا نعرض خطأ. نعرض أخطاء للمستخدم عن طريق استدعاء displayErrorطريقة ويمر في رسالة على أنها سلسلة في المعلمة طريقة ل. إذا كان LoginManager الكائن ارسلت ما ل ErrorEvent ، سيتم عرض رسالة الخطأ إلى المستخدم. على العكس من ذلك ، إذا أرسل كائنLoginManager حدث COMPLETE ، فإننا نرسل حدث LOGIN ونجعل دخولنا إلى ScreenScreen غير مرئي.


الخطوة 17: فئة LoginManager

و LoginManager الطبقة يسجل المستخدم الدخول والخروج. قم بإنشاء فئةLoginManager .

قم بإنشاء ثوابت الصفوف ومتغيرات الحالة ، ولكن لا تقم بتعيين المتغيرات أي قيم حتى الآن.ل  ل تسجيل الدخول يجب أن يكون الأسلوب معلمتين: الأول هو سلسلة تمثل اسم المستخدم الخاص بالمستخدم، والثاني هو آخرسلسلة التي تمثل كلمة المرور الخاصة بالمستخدم. إنشاء وتهيئة الجديد URLLoader الكائن، جديد URLRequest الكائن وجديدة URLVariables الكائن.

تهيئة URLRequest الكائن و URLVariables الاعتراض. يحتوي كائن URLVariables على متغير POST لاسم المستخدم وكلمةمرور POST المتغيرة التي يتطلبها البرنامج النصي لـ php. يتم تمرير هذه المتغيرات مع URLRequest . استدعاء URLLoader الصورة تحميل طريقة والاستماع لكامل الحدث لترسل من محمل بحيث onLoginComplete يمكن أن يسمى أسلوب معالج الحدث.

و login.php النصي يجعل من متغير رابط يحدد قيمة منطقية (0 أو 1). يمثل A 1 صحيح ، بالطبع.  إذا كانت هذه القيمة 1 ، من تسجيل دخول المستخدم بنجاح. إذا كانت هذه القيمة هي 0 ، حدث خطأ ونقوم بإرسال حدث ERROR يحتوي على رسالة الخطأ التي يرددها برنامج PHP النصي الخاص بنا. في جميع الحالات ، سيكون الخطأ بيانات تسجيل دخول غير صالحة .

و الخروج يعمل الأسلوب في نفس الطريق إلا متصفح المستخدم وانتقل إلى صفحة الفهرس الرئيسية من موقعنا على الانترنت عندما logout.php بنجاح بتسجيل المستخدم بها.


الخطوة 18: حافظ على قيد الحياة

يمكن تكوين خادم XMPP لإنهاء أي اتصالات idel قد لا تزال مفتوحة.  بشكل افتراضي ، سيفتح Openfire هذا.  لمنع حدوث ذلك ، يجب على عميل المحادثة إرسال ping إلى الخادم. داخل مكتبة XIFF ، يتم ذلك عن طريق استدعاءالأسلوب sendKeepAlive على كائن XMPPConnection .  يجب استدعاء هذه الطريقة مرة واحدة على الأقل في الدقيقة. قد تتذكر أننا اتصلنا بأحد الطرق داخل فئة الوثيقة ( ChatApp ) التي تسمىstartTimer .  هذه الطريقة لم تكن محددة في ذلك الوقت.  دعونا ننشئها الآن.

و startTimer الأسلوب بإنشاء الجديد الموقت الكائن، يستمع ل TIMERالحدث، ثم يدعو بداية الأسلوب على الجديد الموقت الكائن.

الآن دعونا خلق keepAlive طريقة وهو ما يسمى عند aliveTimer الصورةTIMER يرسل الحدث.

فقط استدعاء الأسلوب keepAlive الكائن XMPPConnection .  لا شيء آخر.


الخطوة 19: فئة واجهة المستخدم

قم بإنشاء أسلوب joinRoom داخل فئة المستند.

إذا كنت لا تتذكر ، يتم استدعاء طريقة joinRoom عند تحميل بيانات المستخدم (عندما نعرف من هو المستخدم). وUserInterface والطبقة أيضا طريقة تسمى joinRoom أننا سوف ندعو من الطبقة المستند الأساسي joinRoom الأسلوب. قبل أن نسمي الطريقة على كائن واجهة المستخدم . نتحقق من أن المتغير roomName قد تم ضبطه. إذا لم يكن لأي سبب من الأسباب ، قمنا بتعيينه على الغرفة الافتراضية الخاصة بنا ، والتي هي في هذه الحالة اللوبي الرئيسي.

قم بإنشاء فئة جديدة وقم بتسميتها ، UserInterface .  تأكد من أنه يمتد فئة MovieClip.  أضف التالي إلى مسار الفئة.

حدد المتغيرات التالية.

نحتاج إلى DataProvider لعرض أي مستخدمين في غرفة المحادثة الحالية داخلكائن القائمة . سيتم تخزين مجموعات مختلفة من البيانات في كائنات Vector . لقد أنشأنا كائن DarkBox في وقت سابق وسنعرضه عندما تكون نافذة الملف الشخصي مفتوحة. آخر متغير خاص نحتاجه هوorg.igniterealtime.xiff.conference.Room الكائن الذي هو في الواقع ، إذا لم تكن قد خمنته بالفعل ، غرفة الدردشة الخاصة بنا.

تم تعيين كائن XMPPConnection ( اتصال ) ضمن أسلوب معالج الأحداثonLogin فئة المستند . وهو مجرد مرجع إلى كائن XMPPConnection داخل فئة المستند.

قم بإنشاء مُنشئ الفئة وطريقة init .

كل شيء بسيط جدا في المنشئ.  فقط قم بإنشاء مثيل جديدة لكل كائن وتعيينها للمتغير المناسب. يقوم أسلوب init بإنجاز عدة مهام. الأول هو أننا يجب أن نخبر فئة UserDataExtensionManager التي نرغب في تلقيها ومعالجتها بيانات المستخدم ضمن النسخة الحالية من فئة UserInterface .  هناك طرق مختلفة للتعامل مع الإضافات المخصصة الواردة ولكني أحب ترك فئة مقترنة بالملحق المخصص ، ومعالجة الإضافة المخصصة. يمكنك أيضًا الاستماع إلى البيانات الواردة حتى تتمكن من تحليل البيانات بنفسك أو يمكنك التحقق لمعرفة ما إذا كان ملحق معين قد تم إرفاقه بـ XMPPStanza واردة (مثل Message Stanza) ، وخذ الإمتداد مباشرة خارجكائن XMPPStanza الأصلي .  وهنا مثال على ذلك.

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

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

في البداية نريد أن يتم تعطيل واجهة المستخدم بحيث نسمي طريقة التعطيل ، والتي تعطل جميع المكونات داخل الواجهة ، من طريقة init . أخيراً ، نقوم بتهيئة العرض وكائن DataProvider .

اكتب الطرق التالية في فئة UserInterface .

جميع الطرق المذكورة أعلاه تشرح نفسها بنفسها. تحدثنا عن طريقةjoinRoom في وقت سابق.  الآن بعد أن أصبح لدينا هذه الطريقة مكتوبة يمكننا إلقاء نظرة عن قرب. بعد التحقق من أن الاتصال لا يزال قيد الدخول ، فإننا ننضم إلى الغرفة. أولاً نقوم بتعديل roomName بحيث يمكننا عمل jid صالح حتى يمكننا الاتصال بالغرفة المناسبة. ثم نقوم بإنشاء كائنUserDataExtension جديد . مرة أخرى لم نقم بإنشائها حتى الآن ، ولكن المُنشئ سيقبل كائن UserDataGrabber كمعلمة مطلوبة.  المزيد عن هذا لاحقا.

مثّل كائن الغرفة وهو يمرر الاتصال كالمتغير المطلوب بواسطة البنّاء. في الغرفةUnescapedJID يجب تعيين وكنية المستخدم الحالي.  يمكنك استخدام أي اسم مثل الاسم الأول واسم العائلة للمستخدم ، ولكنني اخترت استخدام اسم المستخدم فقط. بعد الاستماع للأحداث المختلفة ، فإننا نطلق على طريقة الانضمام على كائن الغرفة .

الطريقة تقبل اثنين من المعلمات. الأول هو منطقي يمثل ما إذا كنت ترغب في إنشاء وتكوين غرفة محجوزة أم لا. عيّن هذه القيمة إلى false نظرًا لأنك أنشأنا غرف الدردشة التابعة لنا في Openfire. المعلمة الثانية هي صفيف يحتوي على أي ملحقات مخصصة ترغب في تمريرها مع حضور المستخدم عند الدخول إلى غرفة المحادثة. قم بتمرير صفيف يحتوي على مثيلكائن UserDataExtension ، الذي قمنا بإنشائه في هذه المعلمة.

دعونا ننهي الفصل.

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

الآن لهذه الأساليب معالج الأحداث الغامضة التي يتم استدعاؤها وفقًا لـ تم إرسالRoomEvent إليها. يتماستدعاء الأسلوب onRoomJoined عندما ينضم المستخدم الحالي إلى غرفة محادثة بنجاح. كل ما نفعله هو استدعاء طريقة التمكين التي تعمل على إعادة تمكين كافة المكونات التي تم تعطيلها مسبقًا بحيث يمكن للمستخدم التفاعل معها.

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

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

و onGroupMessage يرسل الأسلوب عند تلقي رسالة واردة من مستخدم آخر.  الغرفة نفسها (خادم XMPP) قد ترسل رسائل.  هذه عادةً ما تكون رسائل التكوين أو رسائل الخطأ. قد ترغب في معاملة هذه الرسائل كرسائل إدارة وتمنع عرضها كرسالة دردشة عادية في مكون TextArea .  ربما يمكنك عرض هذه الرسائل في نافذة رسالة من نوع ما.  فقط بعض الطعام للفكر. في طريقة onGroupMessage لدينا نقوم فعليًا بترشيح أي رسائل قادمة من الخادم. نتحقق من أن مرسل الرسالة ،e.nickname (اسم المستخدم الخاص بالمرسل في هذه الحالة) ، موجود في اسم المستخدم Vector ، ثم نعرض الرسالة باستخدام طريقة addMessage .

الآن لأسلوب addToList . إضافة عنصر جديد إلى كائن قائمةباستخدام DataProvider . استدعاء الأسلوب addItem على كائنDataProvider وتمرير عنصر في parmeter. و البند يجب أن يكون الكائن البدائي كائن ويكون لها خاصية تسمى تسمية(أ سلسلة ). يجب أن تكون القيمة أيضًاسلسلة .  سنستخدم اسم مستخدم المستخدم المناظر كقيمة هنا. تقوم طريقة removeFromList فقط برأيك. يقوم بإزالة المستخدم المحدد من القائمة . لا شيء معقد على الإطلاق - فقط العكس تمامًا من طريقة addItem .

عندما ينقر مستخدمنا على عنصر في القائمة ، فإننا لن نعرض نافذة ملف تعريف تحتوي على معلومات حول المستخدم الذي تم تحديده. و onUserSelected طريقة يفعل ذلك بالضبط. اسم مستخدم المستخدم المحدد هو قيمة العنصر المحدد في القائمة . نستخدم اسم المستخدم الخاص بهم للاستيلاء على الموقع ( فهرس ) من البيانات الخاصة بهم سلسلة في profileData Vector .

ملاحظة: سنضيف البيانات إلى كائن Vector هذا في طريقةonUserDataExtension فيما بعد.

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

و onUserLeave يرسل الطريقة عندما يترك المستخدم غرف الدردشة.  عندما يغادر مستخدم ما ، سنزيلها من القائمة لأننا نريد فقط عرض المستخدمين الحاليين. نحن نطلق على طريقةremoveFromList لإنجاز هذا.

الآن في اللحظة التي كنا ننتظرها جميعًا.  الآن نلقي نظرة على الطريقة التي تستلم الباقة التي تقدمها خدمة التوصيل السريع. و onUserDataExtension طريقة يقبل معلمة واحدة. تم تسليم الكائن UserDataExtensiondeserialized جديدة من فئة UserDataExtensionManager . و UserDataExtension كائن يحتوي على كافة البيانات التي نحتاجها عن المستخدم الذي انضم للتو الغرفة. نحن نقوم ببناءprofileData String في وقت مبكر حتى لا نضطر إلى تخزين الامتدادات. يمكنك تخزين الإضافات بدلاً من ذلك إذا كنت ترغب في ذلك ، ولكنني أنشأت البيانات في سلسلة قبل الحقيقة. بعد ذلك نحتاج إلى دفع جميع البيانات إلى Vector المناسبوعرض المستخدم في القائمة .  بكل بساطة.

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

رائع!  كان هذا ثقيلًا جدًا.  ولكن ليس ثقيلا جدا ، آمل.  إذا وجدت أيًا من هذا التشويش ، فابحث عن الشفرة بعناية حتى تحصل على فهم واضح لما يحدث قبل الانتقال.  أنا أقول هذا لأن هذا هو المرق مقارنة بالأقسام التالية التي تغطي البيانات التسلسل و deserializing.  سأحاول جعلها بسيطة قدر الإمكان.


الخطوة 20: نظرة عامة موجزة على تسلسل البيانات

قبل إنشاء فئة UserDataExtension التي تتعامل مع تسلسل البيانات وإلغاء التسلسل ، نحتاج إلى التحدث قليلاً عن الموضوع.  يشير التسلسل في هذا السياق إلى أخذ بيانات محددة وتحويلها إلى نموذج يمكننا استخدامه لإرسال البيانات عبر شبكتنا من خلال XMPP. لا يمكننا فقط أخذ كائنUserDataGrabber وإرساله عبر الشبكة ككائن UserDataGrabberونتوقع أن يتم تلقي البيانات على الطرف الآخر براعة. في الواقع ، إذا حاولنا إرسال كائنUserDataGrabber باستخدام طريقة إرسال كائن XMPPConnection ،فسنحصل على خطأ في المعادلة فقط لأنه لا يقبل سوى XMPPStanzaكمعلمة. الطريقة لا تقبل سوىXMPPStanza الكائنات ( الرسالة ، التواجد ، IQ ) كمعلمة.

حسنا، كيف لنا ان نحل هذه المشكلة؟  الجواب هو مع تسلسل البيانات.  يجب أن نقوم بتحويل كائن أو بيانات إلى تنسيق يمكن إرساله مع XMPP Stanza. ما التنسيق اللازم لتحويل الكائنUserDataGrabber بحيث يمكننا إرساله عبر شبكتنا واستلامه من قبل مستخدم آخر؟  حسنا الجواب هو XML.  XMPP هو تدفق XML فقط.  ليس من السهل تحليلها فحسب - إنها قابلة للتوسعة أيضًا.  ولكن الأمر متروك لنا لحزم (تسلسل) بيانات المستخدم في تنسيق XML بحيث يمكن إرسالها عبر الشبكة وتلقيها من قبل المستخدمين الآخرين.

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


الخطوة 21: كيف سنُسرر البيانات

والأمر متروك إلى نهاية الاستلام لاتخاذ البيانات المتسلسلة (XML) وتحويلها مرة أخرى إلى شكلها الأصلي.  يجب علينا عكس هذه العملية. في مشروعنا ، يتم تمثيل البيانات من خلال قيم السلسلة ، لذا سيكون من السهل علينا في الواقع إلغاء التسلسل.

إلغاء التسلسل أكثر تعقيدًا قليلاً من التسلسل ، على الرغم من ذلك ، لأنه يتعين علينا إجراء نسخة من البيانات التي يتم تلقيها. عندما يتم تلقي ملحق وارد (كبيانات XML) ، يزيلالكائن UserDataExtension (يحول) بيانات XML مرة أخرى إلى سلسلةكائنات حتى نتمكن من الوصول إليها ( للقراءة فقط ) من خلال كائنUserDataExtension عبر بناء الجملة نقطة.   سوف نحتاج أيضًا إلى التحقق والتأكد من صحة البيانات المستلمة.

فيما يلي الجريان الأساسي لما سنفعله:

  • تلقي البيانات الواردة (XML في هذه الحالة) 
  • تحقق لمعرفة ما إذا كانت البيانات تطابق نوع البياناتUserDataExtension كمسلسل (وبعبارة أخرى تحقق لمعرفة ما إذا كان صالحا تمديد بيانات المستخدم) 
  • تحليل البيانات وإنشاء نسخة من كائن UserDataExtension البعيد 
  • إرسال الملحق على تسليم سريع إلى المثيل الحالي للفئة UserInterfaceجعل البيانات متوفرة للمستخدم. 

مع كل ما قاله وفعله يمكننا الآن الانتقال إلى كتابة فئة UserDataExtension . 


الخطوة 22: فئة UserDataExtension 

. دعونا حفر.  قم بإنشاء فئة جديدة وقم باستدعائها UserDataExtension .  الطبقة يجب أن تمتدorg.igniterealtime.xiff.data.Extension .  يجب على الفئة أيضًا تنفيذ org.igniterealtime.xiff.data.IExtension وorg.igniterealtime.xiff.data.ISerializable .  المضي قدما واستيراد فئة XMLNode وclass.egiff.dign.ExtensionClassRegistry مع الطبقات السابقة. 

قم بإنشاء المتغيرات والثوابت التالية. 

نحتاج إلى متغيرات لتخزين البيانات المستلمة من المستخدم الآخر وثوابتين طبقتين.  واحد لتمثيل مساحة اسم فريد ( NS ) للملحق ، وأخرى تمثل اسم عنصر XML. 

إنشاء المنشئ. 

هام: تأكد من إعطاء قيمة افتراضية خالية لأي معلمات في المُنشئ لأنه عندما نسجِّل الإمتداد المخصص الخاص بنا مع ExtensionClassRegistry ، فسيتم إنشاء مثيل للفئة ولن يستلم أي وسيطات.   إذا لم يكن المنشئ مستعدًا لعدم تلقي أية معلمات ، فسيتم طرح خطأ وقد لا يعمل التطبيق بشكل صحيح. 

أيضاً ، قم بتمرير الأصل ( XMLNode ) إلى مُنشئ الفئة الأساسية (org.igniterealtime.xiff.data.Extension ).  إذا كانuserData ليس فارغًا ، فعيّنه إلى موقع البيانات .   سنقوم بتسلسل المعلومات المتضمنة في هذا الكائن في لحظة. 

قبل أن أنسى ، لنقم بإنشاء طريقة التمكين . 

كما ترى ، فإن طريقة التمكين هي staight forward.  إنها طريقة ثابتة تسجل الفئة / الامتداد مع ExtensionClassRegistry ، وبالتالي تمكينالفئة / الامتداد. 

سنقوم بتسلسل البيانات بتنسيق XML كما شرحت سابقًا.  لنكون أكثر تحديدًا ، سننشئ كائنات XMLNode خارج بياناتنا.   دعونا ننشئ طريقة لتبسيط هذه العملية بالنسبة لنا.  قم بإنشاء طريقة generateNode . 

هذه طريقة أخرى لا تحتاج إلى شرح.  استنادا إلى المعلمات نظرا لأنه يخلقكائن XMLNode حزم بالفعل وجاهزة للذهاب.   دعونا نبدأ مع المعلمات.  المعلمة الأولى هي nodeNameوهي سلسلة تمثل اسم عنصر العقدة التي نرغب في إنشائها.  والثانية هي سلسلة أخرى تمثل القيمة التي يجب أن تحتويها العقدة.  المعلمة الأخيرة هي كائنيحتوي على أية سمات ( كسلسلة ) يجب أن تحتويها العقدة.   تضع الطريقة العقدة معًا حتى لا نضطر إلى تكرار هذه الإجراءات باستمرار. 

الآن للجزء المرح.  قم بإنشاء طريقة التسلسل . 

عند إضافة الامتداد الخاص بنا إلى XMPPStanza ، يتم استدعاء هذه الطريقة.  أول شيء يتعين علينا القيام به هو حزم بياناتنا في XMLNodeالرئيسي .  لاحظ أن جميع العقد هي أطفال mainNode .  أيضا ، إذا لم تكن قد لاحظت بالفعل ، فقد وضعنا طريقةgenerateNode للتو في الاستخدام الجيد.   قمنا بتسمية العناصر وتعيين قيم كل عنصر.  و الاسم الأول يحتوي على عنصر الاسم الأول للمستخدم، و statusMessage عنصر يحتوي على رسالة الحالة للمستخدم، وهلم جرا.  لقد اتخذنا للتو بيانات المستخدم وتخزينها (تسلسلها) داخل xml. 

لاستكمال عملية التسلسل استدعاء طريقة setNode ، والتي هي طريقة للفئة الأساسية ، لتعيين العقدة.  تحقق أيضا لمعرفة ما إذا كان لدينا parentNode هو نفس XMLNode الأصل .  إذا لم يتم جعل العقدة لدينا طفلًا للمعلمة الأصل XMLNode . 

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

اكتب طريقة إلغاء التسلسل : 

بخلاف طريقة التسلسل - التي يطلق عليها عند إضافة البيانات إلى XMPPStanza -يتم استدعاء طريقة إلغاء التسلسل عند تلقي امتداد مخصص على الطرف الآخر.  تقبل هذه الطريقة معلمة واحدة ، وهي XMLNode كانت تابعة لـ XMPPStanza التي تمتلقيها .   إن مهمتنا هي التحقق مما إذا كانت العقدة قد تم تعبئتها بواسطة آليتنا الخاصة.  لذا إذا كانت العقدة هي امتدادنا المخصص ، فاستمر في إلغاء تسلسل بيانات العقدة ، وإلا اعتبر false . 

نستخدم كل حلقة للتكرار خلال كل عقدة تابعة في المعلمة XMLNode .   يمكنك اختيار مدى تضييق الإضافة.   اخترت أن تجعل تمديد لدينا صارمة إلى حد ما.  إذا لم يتم تلقي جميع البيانات ، فسوف تُرجع الامتداد false ، وتخبر مكتبة XIFF بأن العقدة غير صالحة ولم يتم حزمها بواسطة الكود الخاص بنا. 

بعد تحليل بيانات XML ، نتحقق مما إذا كان قد تم تعيين جميع الخصائص ؛ إذا تم تعيينها ، فإننا نسمي طريقة registerData على فئةUserDataExtensionManager - فئة سننشئها بعد ذلك - لإرسال الامتداد في رحلة تسليم سريعة إلى مستخدمنا.  وأخيرا نعود صحيحا على النجاح. 

طريقتين واجهة لأسفل ، واثنين للذهاب.    ها هم:

جدا ، جدا ، جدا ، جدا ، بسيط.  هذه الطرق مطلوبة من خلال واجهةIExtension .  و getNS () الأسلوب بإرجاع أسماء فريدة من التمديد و getElementName () يعود اسم عنصر في الملحق.   كما قلت: جدا ، جدا ، جدا ، جدا ، بسيط. 

نحن على وشك الانتهاء.  قم بإنهاء الفصل الدراسي من خلال منح حق الوصول للقراءة فقطإلى بيانات المستخدم والخاصية _isDeserialized . 


الخطوة 23 : خدمة التوصيل السريع 

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

هذا الفصل خفيف جدا: فقط 18 سطر من الكود.  و registerDate يتم استدعاء أسلوب، وقبول إلغاء تسلسل UserDataExtension كمعلمة، ثمonUserData يسمى الأسلوب إذا كان موجودا.  في هذه الحالة onUserData الأسلوب هوonUserDataExtension طريقة من UserInterface الصف. 


الخطوة 24: فئة نافذة الملف الشخصي 

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

تذكر: ترتبط هذه الفئة برمز MovieClip في المكتبة. 

يضيف أسلوب المُنشئ ومستمع الأحداث الذي يستمع لحدث ADDED_TO_STAGE .  عند إضافة الإطار إلى مرحلة ، و onAdded يتم استدعاء أسلوب، ثم تتم إزالة المستمع و الحرف الأول يسمى الأسلوب. 

على الحرف الأول طريقة تهيئة حقل النص وزر الإغلاق.   كما يضمن أيضًا بقاء النافذة في وسط المسرح دائمًا. 

قد تلاحظ ثابت صف في بداية النص البرمجي.  ودمرت ثابت هو نوع من الحالة التي تكون فيها نافذة وسوف ترسل عندما ينقر المستخدم علىcloseBtn .  عندما يتم النقر فوق closeBtn ، يتم استدعاء أسلوب التدمير ، تتم إزالة كافة الأطفال وإزالة الإطار من الأصل.  يمكننا أن نجعل فئة حدث مخصص مثل ProfileWindowEvent التي تمتدflash.events.Event ، ولكن ذلك لم يكن nessassary.  بدلا من ذلك نحن إيفاد الحدث الكائن مع نوع دمرت .   هذا بسيط ويخدم غرضه جيدا. 

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


الخطوة 25: الخطوة النهائية 

آخر شيء يتعين علينا القيام به لكي يعمل التطبيق لدينا هو إعداد صفحة HTML.   طلبنا هو تطبيق ويب ديناميكي.  في وقت سابق ، أمسك المتغير roomName الذي تم تمريره إلى Flash ؛ المشكلة الوحيدة هنا هي أننا لم ننتقل إلى هذا المتغير إلى Flash بعد.   ستحتاج إلى تنفيذ ذلك في شفرتك بنفسك.   هنا الكود: 

برنامج PHP أعلاه هو مجرد مثال.   من المرجح أن يكون موقعك أكثر إبداعًا وإبداعًا.  يحدد متغير محتوى GET غرفة المحادثة التي تريد الانضمام إليها.   ثم نمرر هذه المعلومات إلى Flash حتى يعرف رمزنا أي غرفة دردشة تنضم إليها. 


الخطوة 26: اختبار تطبيقنا 

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


استنتاج 

حسنًا ، لقد تعلمنا الكثير ، ويسعدني أن أشاركك هذه المرة.  مكتبة XIFF مدهشة للغاية.   آمل أن يكون هذا البرنامج التعليمي قد شجعك على استكشاف هذه المكتبة المذهلة بكاملها.   هناك الكثير يمكنك القيام به.  يمكنك إنشاء تطبيق المحادثة الخاصة والقوائم في تطبيقنا الحالي أو إنشاء تطبيق جديد تمامًا يتصل بخادم XMPP آخر مثل أحد الخوادم المدرجة في xmpp.org .   شكرا لضبط في.   أراك المرة القادمة. 

هام: تم تكوين الملفات المصدر على أساس الجهاز الخاص بي.  تذكر إعادة تحميل ملف XIFF.swc إلى ملف chat.fla .   تذكر أيضًا تعيين إعدادات الخادم ضمن ثوابت فئة المستند (ChatApp.as). 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.