الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

إشعار الإهمال

تم إهمال Chatengine مع عدم وجود خطط لإصدارات إضافية. سينتهي دعم Chatengine SDK في 16 يوليو 2021. إذا كانت لديك أسئلة حول Chatengine ، فيرجى الاتصال بنا على [email protected]. يرجى زيارة منتج الدردشة الأحدث ، PubNub Chat.

Pubnub Chatengine Framework

PubNub Chatengine هو إطار عمل موجه للمؤلفات المبنية على الكائنات لبناء تطبيقات الدردشة في JavaScript. إنه يقلل من الوقت لإنشاء تطبيقات الدردشة بشكل كبير ويوفر مكونات أساسية مثل مؤشرات الكتابة ومراقبة التواجد عبر الإنترنت وسجل الرسائل خارج المربع.

يتم توفير مكون الخادم في الوقت الحقيقي بواسطة PubNub. تم تصميم Chatengine ليكون قابلاً للتوسعة ويتضمن إطارًا إضافيًا لجعل إضافة ميزات جديدة بسيطة.

لمزيد من المعلومات حول إنشاء تطبيقات الدردشة مع PubNub ، راجع مركز موارد الدردشة لدينا.

الوثائق

يمكنك العثور على المستندات الكاملة على موقع الوثائق.

ابدء

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

  • Nodejs
  • Twitter Bootstrap
  • jQuery
  • ES6

تم إعداد حساب PubNub

لإعداد Chatengine على PubNub ، يجب أولاً إعداد مفتاح PubNub. تحدد الخطوات التالية كيفية إعداد مفتاح PubNub يدويًا للعمل مع SDKs من جانب عميل ChatEngine.

اشترك في حساب PubNub

إذا لم يكن لديك حساب بالفعل ، فيمكنك إنشاء حساب مجانًا هنا.

قم بإعداد خدمة REST API باستخدام وظائف PubNub

يتفاعل إطار عمل ChatEngine و SDKs من جانب العميل مع خدمة API REST التي تعمل كدالة PubNub.

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

اتبع تعليمات إعداد خادم ChatEngine.

تنزيل رمز

إنشاء مشروع NPM جديد

نظرًا لأننا سنقوم بتثبيت التبعيات ، فمن المفيد إنشاء package.json جديدة. json لتتبع جميع الحزم التي سنقوم بتثبيتها.

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

 npm init

هذا سوف ينشئ package.json في دليل المشروع الخاص بك. 

{
  "name" : " chat-engine-tutorial " ,
  "version" : " 0.0.1 " ,
  "description" : " An example PubNub ChatEngine Tutorial " ,
  "main" : " index.js " ,
  "author" : " Ian Jennings "
}

تثبيت PubNub Chatengine

حسنًا ، الآن للجزء الذي ربما لم تفعله من قبل! تثبيت PubNub chatengine عن طريق التشغيل: 

npm install chat-engine@latest --save

موارد إضافية

الإضافات

تحقق من حوض المطبخ jQuery وأمثلة بالوعة المطبخ الزاوي لرؤية الإضافات في العمل.

  • تحميل الصور - يستخدم خدمة التحميل لتحميل الصور وتقديمها في الدردشات. مثال.
  • دعم Markdown - عرض تخفيض في HTML عند تلقي الرسائل. مثال.
  • مستخدمو MUTE - يسمح للمستخدم الحالي بالتوقف عن تلقي الأحداث من المستخدمين الآخرين. مثال.
  • بحث المستخدم عبر الإنترنت - طريقة بسيطة للبحث من خلال قائمة المستخدمين عبر الإنترنت في الدردشة. مثال.
  • مؤشر الكتابة - يوفر أساليب الراحة التي تطلق النار عند بدء أو توقف المستخدم عن الكتابة. مثال
  • الرسائل غير المقروءة - تتيح لك وضع علامة على الدردشة على أنها في الخلفية وزيادات عداد حيث يتم إرسال الأحداث إليها. مثال.
  • إخطارات سطح المكتب - يستخدم API إخطار HTML5 لإرسال تحديثات "محمصة".
  • دعم الرموز التعبيرية - يستخدم الصور كاحتياطي للأجهزة التي قد لا تدعم بعد؟
  • حالة الحدث وقراءة الإيصالات - تنبعث من الأحداث الإضافية عندما يقرأ شخص ما و/أو يقرأ رسالة.
  • Gravatar Support - يستخدم خدمة Gravatar لإنشاء الصورة الرمزية بناءً على معلومات حالة المستخدم.
  • أسماء المستخدمين العشوائية- مكون إضافي يمنح كل مستخدم اسم مستخدم عشوائي يجمع بين اللون والحيوان.

مقاطع الفيديو

  • مقدمة chatengine
  • 5 دقائق تعليمي Chatengine
  • الدردشة في 30 سطر من الكود عبر الإنترنت

دروس

جافا سكريبت

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

React Native + Mobile

  • رد فعل مثال أصلي-مصنوع مع create-react-app .
  • React Components الأصلي - مكونات مسبق لتقديم الدردشات والرسائل والمستخدمين والمزيد.
  • الاندماج في تطبيق iOS الحالي - دليل على إضافة تطبيق Chatengine React الأصلي في iOS.
  • الاندماج في تطبيق Android الحالي - دليل على إضافة تطبيق Chatengine React الأصلي في Android.

رد فعل

  • React - Bare Bones Review مثال على الويب.

Vue

  • دليل VUE - دليل على استخدام Chatengine و Vue معًا. يستخدم الموارد التالية.
  • مثال VUE - مثال على chatengine vue الكامل.
  • VUE Plugin - Plugin chatengine لـ Vue.

زاوي

  • Angular Simple - Angular "Hello World". التطبيق البسيط الذي يستخدم المكون الإضافي الزاوي المخصص لتقديمه عند التحديثات.
  • Angular Kitchen Sink - أكبر تطبيق تجريبي هناك ، تقريبًا استنساخ دردشة فريق سطح المكتب (Slack ، Stride ، FlowDock). عناوين URL المستمرة وتقدم تطبيق سطح مكتب حقيقي مع الإلكترون!

jQuery

  • JQuery Simple - JQuery Chatengine "Hello World". تطبيق بسيط حيث يتحدث الجميع معًا.
  • Juquery Kitchen Sink - مثال ضخم يستخدم معظم ميزات Chatengine. يحتوي على قائمة عبر الإنترنت تولد دردشات جديدة عند النقر فوق أسماء المستخدمين.

مصادقة الطرف الثالث

  • تسجيل الدخول على Facebook - استخدم ملفات تعريف Facebook مع Chatengine.

Nodejs + chatbot

  • Nodejs chatbot - مثال على الروبوت الذي يستجيب للرسائل ويحاكي الكتابة. يعمل مع مثال على حوض المطبخ jQuery بشكل افتراضي.

تطوير

استنساخ

استنساخ repos (محرك الدردشة والمكونات الإضافية).

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

 chat-engine
chat-engine-desktop-notifications
chat-engine-emoji
chat-engine-examples
//...

إعداد البيئة 

 nvm use v6

قم بتشغيل http-server من دليل /development الذي يحتوي على جميع عمليات محرك الدردشة:

cd chat-engine

node server.js

تحميل http: // localhost: 8080 في المتصفح وانتقل إلى/chat-engine-examples/jQuery/kitchen-sink

التجميع

قم بتشغيل gulp للتجميع ، ولكن ربما يجب عليك تشغيل gulp watch للحصول على تغييرات ثابتة.

إجراء اختبارات

ستحتاج إلى تعيين متغيرات البيئة PUB_KEY_0 و SUB_KEY_0 إلى مفاتيح PubNub الخاصة بك. أضف هذه المتغيرات إلى .bashrc أو .zshrc . 

 # pubnub chatengine keys
export PUB_KEY_0= " YOUR PUBNUB PUBLISH KEY "
export SUB_KEY_0= " YOUR PUBNUB SUBSCRIBE KEY "

ثم ، في المجلد الجذري: 

 gulp test

إطلاق تصحيح (محرك الدردشة والمكونات الإضافية) 

 npm version patch && git push origin master --tags

يدعم

  • إذا كنت بحاجة إلى مساعدة ، لديك سؤال عام ، أو لتقديم خطأ ، اتصل [email protected]
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل