تنزيل ng chat - تنزيل رمز مصدر ng chat

ng chat

كود الذكاء الاصطناعي

3.1.0

تنزيل

️ تم أرشفة هذا المشروع ولم يعد يتم الحفاظ عليه

نانوغرام-الدردشة

وحدة دردشة بسيطة على Facebook/LinkedIn للتطبيقات الزاوية.

العرض التوضيحي عبر الإنترنت
رمز المصدر التجريبي عبر الإنترنت (ASP.NET Core و Azure SignalR)
node.js مثال

ابدء

تثبيت

 npm install ng-chat

يثبت

استيراد ngchatmodule على appmodule الخاص بك (على سبيل المثال: app.module.ts):

 ...
import { NgChatModule } from 'ng-chat';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    NgChatModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

أضف المكون إلى قالب AppComponent الخاص بك:

 <ng-chat [adapter]="adapter" [userId]="userId"></ng-chat>

وفي app.component.ts:

 import { Component } from '@angular/core';
import { ChatAdapter } from 'ng-chat';
import { MyAdapter } from 'my-adapter';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  userId = 999;

  public adapter: ChatAdapter = new MyAdapter();
}

الإعدادات المطلوبة

[Adapter] {Object}: سيشير هذا إلى تطبيق المحول الخاص بك ('myadapter' في المثال أعلاه).
[userId] {any}: المعرف الفريد للمستخدم الذي سيستخدم مثيل الدردشة.

إعدادات إضافية

[العنوان] {String}: العنوان المراد عرضه في قائمة الأصدقاء. الافتراضي هو "الأصدقاء".
[isDisabled] {Boolean}: يشير إلى ما إذا كان ينبغي إخفاء Ng-Chat. هذا يتوقف عن طلبات الاستطلاع إلى قائمة الأصدقاء. الافتراضي كاذب.
[isCollapsed] {Boolean}: إذا تم ضبط قائمة الأصدقاء على True ، فسيتم تقديم قائمة الأصدقاء على أنها تنهار افتراضيًا. الافتراضي كاذب.
[PollfriendSlist] {Boolean}: إذا تم تعيينه على True ، فستقوم الوحدة بإجراء استطلاع طويل على طريقة "Adapter.ListFriends" للحفاظ على تحديث قائمة الأصدقاء. الافتراضي كاذب.
[PollingInterval] {number}: تكوين فاصل الاقتراع الطويل بالمللي ثانية. الافتراضي هو 5000.
[SearchEnabled] {Boolean}: يتيح شريط البحث في قائمة الأصدقاء. الافتراضي صحيح.
[HistoryEnabled] {Boolean}: يحدد ما إذا كان يجب على المكون استدعاء "getMessageHistory" من adapter الدردشة. الافتراضي صحيح.
] الافتراضي هو 10.
[Emojisenabled] {Boolean}: يتيح تحليل الرموز التعبيرية على الرسائل. الافتراضي صحيح.
[LinkFyEnabled] {Boolean}: يحول الروابط داخل الرسائل إلى روابط HTML صالحة. الافتراضي صحيح.
[AudioEnabled] {Boolean}: يتيح إشعارات الصوت على الرسائل المستلمة. الافتراضي صحيح.
[Audiosource] {String}: مصدر WAV لإخطار الصوت. الافتراضي هو محتوى wav github الخام من مستودع NG-Chat.
[PRESISTWINDOWSSTATE] {Boolean}: يحفظ حالة النوافذ المفتوحة الحالية على التخزين المحلي. الافتراضي صحيح.
[BrowserNotificationSenabled] {Boolean}: تمكين إشعارات المتصفح على الرسائل المستلمة. الافتراضي صحيح.
[browsernotificationiconsource] {String}: عنوان URL المصدر للرمز المعروض على إشعار المتصفح. الافتراضي هو محتوى GitHub PNG الخام من مستودع NG-Chat.
[MaximizEwIndOwonnewMessage] {Boolean}: إذا تم ضبطها على Windows Noven New Scal ، فسيتم الانهيار عند تلقي رسائل جديدة. الافتراضي صحيح.
[HidefriendSlist] {Boolean}: يخفي قائمة الأصدقاء. لا يزال من الممكن فتح نوافذ الدردشة وإغلاقها وتبديلها باستخدام IChatController . الافتراضي كاذب.
[HidefriendSlistonunsupportedViewport] {Boolean}: يخفي قائمة الأصدقاء إذا لم يكن هناك مساحة كافية لنافذة دردشة واحدة على الأقل على منفذ العرض الحالي. الافتراضي صحيح.
[fileUploadadapter] {IfileUploadAdapter}: تنفيذك المخصص لـ IfileUploadAdapter لتحميل الملفات.
[FileUploadurl] {String}: يحدد عنوان URL لـ CORS صالح يمكنه معالجة ملف نموذج الطلب وإرجاع FileMessage للمستخدم destinatary.
[السمة] {ng-chat/core/theme.enum: theme}: يحدد موضوع التصميم. هناك ضوء (افتراضي) وموضوع مظلم متاح. يمكنك أيضا تزويد هذا كسلسلة.
[CustomTheMe] {String}: عنوان URL لأصل ورقة الأنماط لاستخدامه في أنماط CSS المخصصة. يعمل مع الأصول بالنسبة للمشروع باستخدام NG-Chat.
[showmessagedate] {boolean}: يوضح التاريخ الذي تم فيه إرسال رسالة. الافتراضي صحيح.
[MessagedAtePipeformat] {String}: تنسيق الأنبوب الذي يتم استخدامه عند تقديم التاريخ الذي تم فيه إرسال الرسالة. الافتراضي هو "قصير".
[GroupAdapter] {ichatgroupadapter}: تطبيق محول المجموعة لتمكين الدردشة الجماعية.
[isViewPortonMobileEnabled] {Boolean}: السماح لـ NG-Chat بالعرض والعرض على الأجهزة المحمولة. الافتراضي كاذب.

التوطين

[MessagePlaceHolder] {String}: العنصر النائب الذي يتم عرضه في إدخال النص في كل نافذة دردشة. الافتراضي هو "اكتب رسالة".
[SearchPlaceHolder] {String}: العنصر النائب الذي يتم عرضه في إدخال البحث في قائمة الأصدقاء. الافتراضي هو "البحث".
[الترجمة] {توطين}: العقد الذي يحدد جميع النصوص المقدمة بواسطة هذا المكون. قم بتزويد الكائن الخاص بك لتوطين/تخصيص النص الكامل. سيؤدي توفير هذا الإعداد إلى تجاوز جميع إعدادات التوطين الأخرى.

الأحداث

(OnPartiCtclicked) {ichatpartiCistant}: حدث ينبعث في كل مرة يتم فيها النقر على مستخدم/مجموعة على نافذة الدردشة ويتم فتح نافذة دردشة جديدة.
(onpartisterAntChatopened) {ichatpartisterant}: الحدث المنبعث في كل مرة يتم فتح نافذة الدردشة ، بغض النظر عما إذا كان ذلك بسبب وجود مستخدم/مجموعة انقر فوق قائمة الأصدقاء أو عبر رسالة جديدة تم استلامها.
(onpartisterAntChatClosed) {ichatpartisterant}: الحدث المنبعث في كل مرة يتم إغلاق نافذة الدردشة.
(onMessagesseen) {message []}: الحدث المنبعث في كل مرة يتم فيها رؤية جزء من الرسائل غير المقروءة من قبل المستخدم.

تنفيذ chatadapter الخاص بك:

من أجل توجيه هذه الوحدة حول كيفية إرسال واستقبال الرسائل داخل البرنامج الخاص بك ، سيتعين عليك تنفيذ ChatAdapter الخاص بك. الفصل الذي ستنفذه هو الفئة التي يجب عليك توفيرها كمثيل لإعداد [المحول] للوحدة النامية التي تمت مناقشتها أعلاه.

تكشف هذه الحزمة فئة مجردة ChatAdapter والتي يمكنك استيرادها على تعريف ملف الفصل الجديد الخاص بك:

 import { ChatAdapter } from 'ng-chat';

بعد استيراده إلى تطبيق المحول المخصص الخاص بك (على سبيل المثال: myadapter.ts) ، يجب عليك تنفيذ ما لا يقل عن 3 طرق مجردة في فئة Base Chatadapter التي هي:

 public abstract listFriends(): Observable<ParticipantResponse[]>;
    
public abstract getMessageHistory(destinataryId: any): Observable<Message[]>;

public abstract sendMessage(message: Message): void;

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

 public onMessageReceived(participant: IChatParticipant, message: Message): void
public onFriendsListChanged(participantsResponse: ParticipantResponse[]): void

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

إذا كنت في شك ، فإليك تطبيقان مثال محولان:

محول بوت غير متصل
محول SignalR

أضف دعمًا للدردشة الجماعية:

يمكن أن يكون IChatParticipant مستخدمًا أو مجموعة ، ولكن من أجل تمكين الدردشة الجماعية ، يجب عليك تنفيذ وتزويد NG-Chat بمثلة IChatGroupAdapter . سيتعين عليك تنفيذ العقد التالي:

 groupCreated(group: Group): void;

يقوم NG-Chat بإنشاء GUID في كل مرة يتم فيها إنشاء مجموعة جديدة وتستدعي الطريقة أعلاه حتى تتمكن من التعامل معها في تطبيقك لاستمرار المجموعة التي تم إنشاؤها حديثًا (المعرف ، المشاركين ، إلخ).

بمجرد تنفيذ IChatGroupAdapter ، ما عليك سوى تزويده بمثيل NG-Chat الخاص بك:

 <ng-chat [groupAdapter]="myGroupAdapterInstance" ... ></ng-chat>

تحميل الملف:

يدعم NG-Chat مرفق أي نوع من الملفات. للقيام بذلك ، تحتاج إلى تنفيذ نقطة نهاية API على التطبيق الخاص بك يمكن أن تتلقى منشورًا بملف نموذج.

على مثيل NG-Chat الخاص بك ، تأكد من تقديم URI صالحة لمعلمة fileUploadUrl . سيمكن ذلك محول تحميل الملف الافتراضي وسيتم عرض كل نافذة دردشة في أسفل اليمين إجراء مرفق يثير إدخال نوع = ملف.

جنبا إلى جنب مع ملف نموذج الطلب ، سوف يرسل NG-Chat أيضًا حقلًا باسم ng-chat-destinatary-userid يحتوي على معرف المستخدم الذي سيتم إرسال الملف إليه. تأكد من استخدام هذه القيمة لتكوين رسالة استجابة حيث سيتعين على نقطة نهاية API إرجاع FileMessage . سيتم إرسال مثيل FileMessage هذا إلى مستخدم Destinatary تلقائيًا بواسطة NG-Chat بمجرد انتهاء تحميل الملف بنجاح.

يمكنك التحقق من بعض أمثلة تنفيذ تحميل ملفات الخلفية هنا:

NG-Chat-Netcoreapp
NG-Chat-Nodejs

إجراء إجراءات NG-Chat من مكان آخر:

يمكن تشغيل بعض إجراءات NG-Chat من تطبيقك باستخدام واجهة IChatController المصدرة.

على افتراض أن لديك مثيل NG-Chat معلنًا على ملف القالب الخاص بك ، أضف معرفًا فريدًا زاويًا له:

 <ng-chat #ngChatInstance ... />

ثم على رمز المكون الخاص بك ، أعلن خاصية ViewChild من أجل ربط مثيل NG-Chat الخاص بك:

 @ViewChild('ngChatInstance')
protected ngChatInstance: IChatController;

يمكنك الآن تشغيل بعض إجراءات NG-Chat مثل فتح نافذة الدردشة من مكان آخر باستخدام الكود التالي:

 this.ngChatInstance.triggerOpenChatWindow(user);

محول دردشة التاريخ المليون:

يشبه هذا المحول ChatAdapter ولكنه يوفر زر ترميم لتحميل الرسائل القديمة من سجل رسالتك. يجب عليك تنفيذ طريقة واحدة إضافية: getMessageHistoryByPage . يمكنك التحقق من تنفيذ نموذج لهذا المشروع التجريبي مع فئة DemoAdapterPagedHistory .

إذا كنت تحب هذه الميزة واعتقدت أنها يجب أن تكون السلوك والتنفيذ الافتراضي لـ NG-Chat ، فيرجى فتح مشكلة والتصويت عليها هنا حتى نتمكن من تقديمها كمحول الدردشة الافتراضي على الإصدارات اللاحقة من NG-Chat.

إظهار صورة كرسالة:

إذا كنت ترغب في عرض صورة مصغرة صورة على رسالة نافذة الدردشة ، فما عليك سوى تعيين نوع الرسالة على Image . يجب أن يشير محتوى الرسالة إلى عنوان URL للصورة الصحيح:

 const imageMessage: Message = {
    fromId: 1,
    toId: 999,
    type: MessageType.Image,
    message: "https://valid.url/image.jpg",
    dateSent: new Date()
};

استكشاف الأخطاء وإصلاحها

يرجى اتباع هذا المبدأ التوجيهي عند الإبلاغ عن الأخطاء وطلبات الميزات:

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

شكرا لتفهمها!