Question

我正在为一个网站创建一个非常基本的聊天室，它使用socket.io来接收和发送聊天消息（socket.io因为后端，nodejs是使用它编写的）。
几乎一切都有效，只有：
当用户发送消息时，该消息将显示在他的聊天列表中，但在刷新页面之前，其他任何人的列表都不会更新。

它是如何工作的：用户键入一条消息，该消息与socket.io一起发送到服务器然后，服务器将消息发送回每个人使用socket.io，并且消息显示在everyones聊天列表中。

服务器会发回聊天消息，但仅发送给发件人。

我的代码（仅代码）：

chat.component.ts：

Usersonline: number;
socketio;
messages = [] = [];

constructor(private socket: SocketconnectorService) {
this.socketio = socket.socket;
this.socketio.on('getOldChat', (data) => {
  this.messages.push(data);
});
this.socketio.on('getChat', (data) => {
  this.messages.push(data);
});
}

sendChat(chatmessage) {
console.log('Sending new message: ' + chatmessage);
this.socketio.emit('sendChat', chatmessage);
}

socketconnector.service.ts：

  public socketurl = 'http://serverip:8080';
  public socket;

constructor() {
  this.socket = io(this.socketurl);

}

chat.component.html：

<div id="message" style="color: white">
    <div *ngFor="let message of messages">
        <li class="chatmessage">{{ message }}</li>
    </div>
</div>
<div class="input-box">
    <input class="input-box-inside" #chatmessage (keyup.enter)="sendChat(chatmessage.value);chatmessage.value='' ">
  <button id="input-box-send" (click)="sendChat(chatmessage.value)" type="button"><i class="fa fa-paper-plane"></i></button>
</div>

Angular 5 DOM在阵列推送时没有更新

0 个答案: