一个简单的Facebook/LinkedIn Lookalike聊天模块,用于角度应用程序。
npm install ng-chat
...
import { NgChatModule } from 'ng-chat';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
NgChatModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<ng-chat [adapter]="adapter" [userId]="userId"></ng-chat>
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();
}
所需的设置
其他设置
IChatController打开,关闭和切换。默认值为false。FileMessage 。本土化
事件
为了指示此模块如何在软件中发送和接收消息,您将必须实现自己的chatadapter。您将要实现的类是您必须作为实例提供的一个类别的[适配器]设置的类别。
此软件包公开了chataDapter摘要类,您可以在新类文件定义上导入该类别:
import { ChatAdapter } from 'ng-chat';
将其导入您的自定义适配器实现(例如:Myadapter.ts)之后,您必须实现至少3种在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
请注意,无需覆盖上述2种方法。您必须在适配器实现中调用它们,以便将收到消息或朋友列表更新的模块通知模块。如果您决定使用“ Pollfriendslist”功能,则可以忽略第二个。
如有疑问,这里有2个适配器示例实现:
IChatParticipant可以是用户或组,但为了启用组聊天,您必须实现并向NG-Chat提供IChatGroupAdapter实例。您将必须执行以下合同:
groupCreated(group: Group): void;
每当创建新组并调用上述方法时,NG-CHAT都会生成GUID,以便您可以在应用程序上处理它,以持续新生成的组(ID,参与者等)。
一旦实现了IChatGroupAdapter ,只需将其提供给您的NG-Chat实例:
<ng-chat [groupAdapter]="myGroupAdapterInstance" ... ></ng-chat>
NG-Chat支持任何类型的文件的附件。为此,您需要在应用程序上实现API端点,该端口可以接收带有表单文件的帖子。
在您的NG-CHAT实例上,请确保为fileUploadUrl参数提供有效的URI。这将启用默认文件上传适配器,每个聊天窗口将在右下方渲染一个附件操作,该操作将触发type = file的输入。
除请求表格文件外,NG-CHAT还将发送一个名为ng-chat-destinatary-userid的字段,其中包含将将文件发送到的用户的ID。确保使用此值构成响应消息,因为您的API端点必须返回FileMessage 。一旦文件上传成功结束,该FileMessage实例将通过NG-Chat自动发送到Destinatory用户。
您可以在此处查看一些后端文件上传实现示例:
通过使用导出的IchatController接口,可以从您的应用程序触发某些NG-Chat操作。
假设您在模板文件上声明了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()
};
在报告错误和功能请求时,请遵循本指南:
感谢您的理解!
麻省理工学院许可证(有关全文请参阅许可证文件)