CODEWITHSUNDEEP
node.jsangularsocket.io
Nov
Nov

Reputation: 99

Angular Socket.io Update existing emitted message

I'm having a hard time wrapping my head around this. I hope someone can help get to the conclusion of the solution. I have a chat app that I'm working on. I'd like it if people were able to update a message that was already emitted.

Here is the html code for the chat.

<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>

When the user clicks on vote, the rank of the message is updated.

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

that vote goes to my component class which is then send to my Service class where the vote is emitted to my node server.

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

Here is the node server code for this action: 

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

Now the voting aspect works on the backend. The correct message is receiving the correct vote.

The problem is that the front end html code is not updating the message's rank.

I honestly don't know how to do that and I can't wrap my head around it.

I was hoping to return the new rank and update the specified message with the new rank. I'm just not sure how to do this. Any help would be greatly appreciated.

Upvotes: 0

Views: 283

Answers (1)

Mehul Prajapati
Mehul Prajapati

Reputation: 1260

As of I understand, In server side, You are not maintaining the votes individually, You are just adding existing vote with the new vote came from front end. To be able to update the emitted message, Your server must know which was old vote provided in old Vote. So To implement updating emitted vote, Your client must provide old vote and also new vote to be updated, So server can subtract old vote and add new Vote.

Below is client side extra Class which you need to add in angular.

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

This service you need to call same as sending new vote, But need to provide oldVote and newVote.

Below is server side code for accepting this editing of emitted vote. Here you need to add one more event listener for editing emitted vote.

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

Above code, Subtracts already emitted vote and adds new vote.

Upvotes: 1

Related Questions