使用声网的 RTM SDK 轻松给 angular 应用加上实时聊天功能

const rtmClient = AgoraRTM.createInstance('fd033b52ca5d40599efc96f6e2131639');

async function rtmClientLogin(user: User) {
try {
await rtmClient.login({ token: null, uid: user.id });
} catch(err) {
console.log('AgoraRTM client login failure', err);
}
}

// 在组件的 ngOnInit 方法中调用 rtmClientLogin
async ngOnInit() {
try {
  let user = await this.userServ.getUser().toPromise();
  if (user instanceof User) {
    this.user = user;
    rtmClientLogin(this.user);
  } else {
    throw new Error('无法获取用户数据');
  }
} catch(err) {
  this.notifyServ.error('初始化聊天组件失败', null);
  console.error('初始化聊天组件失败', err);
}
}

async sendMessage() {
if (!this.newMessage) {
return;
}
const spouseId = this.user.spouse.id;

try {
const result = await rtmClient.sendMessageToPeer({
  text: this.newMessage
}, spouseId);
if (!result.hasPeerReceived) {
  throw new Error('对方未接受消息');
} else {
  this.messages.push({
    text: this.newMessage,
    sender: this.user,
    receiver: this.user.spouse,
    dateSended: new Date()
  });
  this.newMessage = undefined;
}
} catch (err) {
this.notifyServ.error('发送消息失败', null);
console.log('发送消息失败', err);
}
}

async ngOnInit() {
try {
let user = await this.userServ.getUser().toPromise();
if (user instanceof User) {
  this.user = user;
  rtmClientLogin(this.user);
  监听接收到消息事件
  rtmClient.on('MessageFromPeer', (rtmMessage, peerId) => {
    this.messages.push({
      text: rtmMessage.text,
      sender: this.user.spouse,
      receiver: this.user,
      dateSended: new Date()
    });
  });
  
} else {
  throw new Error('无法获取用户数据');
}
} catch(err) {
this.notifyServ.error('初始化聊天组件失败', null);
console.error('初始化聊天组件失败', err);
}
}

<div id="container">
<div class="messages">
    <div class="message-item"
         *ngFor="let msg of messages">
        <div class="sendedMessage"
             *ngIf="msg.sender.id === user.id">
            <span class="message-text">{{msg.text}}</span>
            <span>
                <nz-avatar nzIcon="user"
                           [nzSrc]="msg.receiver.profileImageUrl"></nz-avatar>
            </span>
        </div>

        <div class="receviedMessage"
             *ngIf="msg.sender.id === user.spouse.id">
            <span>
                <nz-avatar nzIcon="user"
                           [nzSrc]="msg.sender.profileImageUrl"></nz-avatar>
            </span>
            <span class="message-text">{{msg.text}}</span>
        </div>
    </div>
</div>

<div class="new-message">
    <div nz-row
         nzJustify="end">
        <div nz-col
             nzSpan="18">
            <textarea nz-input
                      [(ngModel)]="newMessage"
                      [nzAutosize]="{ minRows: 1, maxRows: 6 }"></textarea>
        </div>
        <div nz-col
             nzSpan="6">
            <button nz-button
                    nzType="primary"
                    class="mx-auto"
                    style="width: 100%;"
                    (click)="sendMessage()">发送</button>
        </div>
    </div>
</div>
</div>

:host {
height: 100%;
display: block;
position: relative;
}

#container {
height: 100%;
display: flex;
flex-direction: column;
padding-top: 4px;
}

.messages {
flex-grow: 1;
}

nz-alert {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
text-align: center;
}

.sendedMessage {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 8px;
}

.receviedMessage {
margin-bottom: 8px;
}

.message-text {
background: #fff;
padding: 8px 4px;
}

.sendedMessage .message-text {
margin-right: 4px;
}

.receviedMessage .message-text {
margin-left: 4px;
}