Angular Socket.io 更新现有发出的消息

Question

我很难理解这一点。我希望有人可以帮助得出解决方案的结论。我有一个正在开发的聊天应用程序。如果人们能够更新已经发出的消息，我会很高兴。

这是聊天的 html 代码。

<div id="message-box-container" class="message-container">
  <div class="message-box" *ngFor="let message of messages">
    <div class="plus-minus">
      <div class="vote-plus" (click)="vote(message.messageid, 1)">
      </div>
      <div class="vote-minus" (click)="vote(message.messageid, -1)">
      </div>
    </div>
    {{message.message}} {{message.rank}}
  </div>
</div>

当用户点击投票时，消息的排名会更新。

component.ts

  ngOnInit() {
    this.chatService.joinMainChat('');

    this.chatService
      .getMessages()
      .subscribe((message: MessageObj) => {
        this.messages.push(message);
      });
  }
      vote(id: number, yn: number) {
        this.chatService.vote(id, yn);
      }

该投票发送到我的组件类，然后发送到我的服务类，在那里投票被发送到我的节点服务器。

  public vote(id, num) {
    var voted = {id: id, vote: num};
    this.socket.emit('vote', voted);
  }

这是此操作的节点服务器代码：

socket.on('vote', (ballet) => {
  console.log(messageList[ballet.id].message, messageList[ballet.id].rank);
  messageList[ballet.id].rank += ballet.vote;
  console.log(messageList[ballet.id].message, messageList[ballet.id].rank);
  io.to('main room').emit('new-message', messageList[ballet.id]);
});

现在投票方面在后端工作。正确的消息是收到正确的投票。

问题是前端 html 代码没有更新消息的排名。

老实说，我不知道该怎么做，也无法理解它。

我希望返回新排名并使用新排名更新指定消息。我只是不确定该怎么做。任何帮助将不胜感激。

Answer 1

据我了解，在服务器端，您不是单独维护投票，您只是添加现有投票，新投票来自前端。为了能够更新发出的消息，您的服务器必须知道旧投票中提供的旧投票。所以要实现更新已发出的投票，您的客户端必须提供旧投票和要更新的新投票，因此服务器可以减去旧投票并添加新投票。

下面是客户端的额外类，你需要在 Angular 中添加。

public vote(id, oldNum, newNum) {
  var voted = { id: id, oldVote: oldNum, newVote:newNum };
  this.socket.emit('updateVote', voted);
}

此服务需要调用与发送新投票相同，但需要提供oldVote和newVote。

以下是接受此已发出投票编辑的服务器端代码。在这里您需要再添加一个事件监听器来编辑已发出的投票。

socket.on('updateVote', (ballet) => {
  messageList[ballet.id].rank -= ballet.oldVote;
  messageList[ballet.id].rank += ballet.newVote;
  io.to('main room').emit('new-message', messageList[ballet.id]);
});

上面的代码，减去已经发出的投票并添加新的投票。