проблема привязки данных на socket.on

Question

Я работаю над приложением чата и упомянул проблему ниже. Проблема:

1. Это относится к одному процессу коммуникации.
2. Из сообщения, отправляемого на B
3. Оба A и B подключены в одной комнате, и отображается сообщение для обоих. 4) После отправки сообщения From Angular4 (socket.io-client) запрос отправляется на NodeJs (socket.in). затем узел js отвечает сообщением и регистрирует идентификатор пользователя (идентификатор уникального пользователя A) для отправителя.
4. Теперь в angular4 я не могу связать значение переменной внутри функции socket.on. и возвращает неопределенное значение.

Код узла:

socket.on("sendMessage", (data) => {
    console.log(data.msg + "..." + data.to);
    socket.username = data.by;
    io.to(data.to).emit("msgReceived", { "msg": data.msg, "by": socket.username });     //response back to client
});

socket.on("joinRoom", (data) => {
    socket.join(data.sid);
    console.log('You have joined in ' + data.sid + ' room');
    ......

Код на стороне клиента:

/* Passing value to the server */
isMessageSent() {
    this.socket.emit('sendMessage', { "msg": this.umsg, "to": '123', "by": this.lgid, "lguser": this.lgid });
    this.socket.on("msgReceived", function (data) {
        console.log(data);
    });
    /* Response from the serve */
    this.socket.on("msgReceived", function (data) {

        console.log(data.by + "...." + this.lguser);
        if (data.by == this.lguser) {
            $("#chul").append("<li class='clr'> <p _ngcontent-c1 class='fu fl'>" + data.msg + "</p></li>");
        } else {
            $("#chul").append("<li class='clr'> <p _ngcontent-c1 class='fd fr'>" + data.msg + "</p></li>");
        }
        .....

Answer 1

Попробуй это. Вы должны связать контекст. Подробнее о привязке контекста читайте в здесь .

Я создал отдельную функцию для обработки события. И я использую bind метод для привязки контекста.

this.handleMessageReceivedEvent.bind(this)

---

Ваш код должен выглядеть следующим образом.

    this.socket.on("msgReceived", this.handleMessageReceivedEvent.bind(this));

    private handleMessageReceivedEvent(): void {
        console.log(data.by+"...."+this.lguser);
        if(data.by==this.lguser){
           $("#chul").append("<li class='clr'> <p _ngcontent-c1 class='fu fl'>"+data.msg+"</p></li>");
        }else{
           $("#chul").append("<li class='clr'> <p _ngcontent-c1 class='fd fr'>"+data.msg+"</p></li>");
        }
    }