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

لا يتم الحفاظ عليها. انظر ما بعد الوفاة

ريبو بانر

أضف دردشة سريعة الزوال في الوقت الفعلي إلى أي صفحة ويب.


ملخص

يضيف Disco.Chat دردشة سريعة الزوال في الوقت الفعلي إلى أي صفحة ويب. إنها مزيج من Twitch's Chat and Intercom's Customer Service That Widget.

مثال ديسكو

لماذا؟

  • الناشرون يائسون لطرق جديدة لزيادة المشاركة/وجهات النظر
  • قامت Reddit و Facebook و Twitter بتركيز الويب (للأسف) ، لكن المناقشات (أي التعليقات) لا تزال غير متزامنة فعليًا على منصات الويب الأساسية الخاصة بهم
  • تمكنت خدمات الدردشة مثل Discord من زراعة المجتمعات (بعضها حول محتوى الناشر) عبر الدردشة في الوقت الفعلي
  • لدى الناشرين طرق محدودة لتحقيق الدخل من هؤلاء المهارات اليدوية و/أو أن يكونوا جزءًا من المناقشة

القواعد

الدردشة بشكل مجهول وفقير مع القراء الآخرين.

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

بعد الوفاة

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

كانت هذه هي المرة الأولى التي أكتب فيها JS في الطرف الثالث ، حيث عملت مع iframes و WebSockets. هناك بعض أجزاء الكود التي أفتخر بها بشكل خاص والتي قد تجدها مفيدة:

  • تغييرات web/sdk/disco.js المنسقة عبر التطبيق والعنصر الأضلاع (تطبيقات React و PREACT منفصلة)
  • web/src/App.tsx Twitter Lite's Div + Flexbox Technique لتخطيط الدردشة

الرؤية / خريطة الطريق

  • أضف المزيد من الرسوم المتحركة للدخول اللاستر
  • أضف "دردشة مع قراء آخرين هنا" أو "انضم إلى المحادثة" فقاعة الكلام فوق عنصر واجهة المستخدم حتى يعرف الناس ما يفعله هذا الشيء
  • ربما 1: 1 من غرفة الدردشة إلى url ليست النموذج الصحيح ، وربما يجب أن يكون هناك مجرد موضوعات مثل إعداد الركود
  • أضف القدرة على تصفح وتحويل الغرف / عناوين URL
  • اختبار المتصفح. مضحك جداً؟
  • انظر إلى شيء IOT الخاص بـ AWS يمكن إعادة استخدامه كحافلة رسائل آمنة للدردشة
  • بناء واجهة مستخدم ناشر لإدارة الموضوعات/عناوين URL/الدردشة
  • المدفوعات؟
  • التحليلات؟
  • ستكون مؤشرات الكتابة لطيفة.
  • الانتقال إلى GraphQL؟

النمو محليا

بناء

جذر المشروع هو واجهة برمجة التطبيقات في الوقت الحالي. يمكن العثور على المصدر في ./src .

في ./web ، ستجد تطبيق React X TypeScript Chat وفي web/sdk/disco.js ، ستجد طرفًا ثالثًا. ستؤدي مهمة Watch Watch (Yarn sdk ) ، إلى إخراج SDK JS بشكل مريح في دليل ./web/public (هذا هو الدليل public لتطبيق Create-React-App) ، وبالتالي يتم تقديمه بواسطة خادم WebPack Dev الخاص بـ react-scripts-ts في localhost:3000/disco.dev.js أثناء التطوير.

تثبيت 

yarn install && cd web && yarn install && cd ..

تشغيل التطبيق (التطبيقات)

افتح 3 علامات تبويب طرفية .... 

yarn start # 1. start the API
cd web
yarn start # 2. start the application (chat UI)
yarn sdk # 3. develop the sdk (./web/sdk/disco.js)

يمكنك إما تطوير تطبيق الدردشة على localhost:3000 . ومع ذلك ، يمكنك الحصول على تجربة المستخدم النهائي الكامل من خلال الذهاب إلى localhost:5000 و localhost:5000/about أثناء التطوير. هذه تخدم صفحات HTML 2 ./public/about.html و ./public/index.html هذه تهدف إلى تقليد كيفية استخدام SDK بواسطة موقع الطرف الثالث. لا تتردد في تغييرها كما ترغب في محاكاة المزيد من استخدام العالم الحقيقي.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل