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);
      }

этот голос поступает в мой класс компонентов, который затем отправляется в мой класс Service, где голос отправляется на мой сервер узлов.

  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

Насколько я понимаю, на стороне сервера Вы не поддерживаете голоса по отдельности, Вы просто добавляете существующее голосование с новым голосом, полученным из внешнего интерфейса. Чтобы иметь возможность обновить отправленное сообщение, ваш сервер должен знать, какой был старый голос, предоставленный в старом Голосовании. Таким образом, чтобы выполнить обновление по результатам голосования, ваш клиент должен предоставить старый голос, а также новый голос, который будет обновлен, чтобы сервер мог вычесть старый голос и добавить новый голос.

Ниже приведен дополнительный класс на стороне клиента, который необходимо добавить в угловую.

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]);
});

Выше кода: вычитается уже выбранное голосование и добавляется новый голос.