не удается получить доступ к данным в typescript

#javascript #typescript #sockets #websocket #frontend

#javascript #typescript #сокеты #websocket #интерфейс

Вопрос:

Я пытаюсь создать класс модели для sockette, чтобы я мог использовать эту модель sockette везде, где это требуется.

Я пытаюсь использовать экземпляр этого класса модели sockette в других файлах.
Я могу сделать это успешно.

otherFiles.js

 import Sockette from '../utilities/otherFiles';

const Sockete = new Sockette(url,Id) // creating the instance and passing the parameter values to that instance class
 

Sockette.ts

 import sockette from 'sockette';
    
    export default class Sockette {
    
        public ws : any;
        public Id : string;
        public pingInterval : any;
        public dataReceived : any;
        public url : string;
        
        constructor(url: string,Id: string){
            this.Id = Id;
            this.url = url;
            this.ws = new sockette(`${url}?Id=${this.Id}`,{onclose: this.onClose,onerror: this.onError,onopen: this.onOpen,onmessage: this.onMessage});
        }
        
    
        public onClose(events: any){
            console.log('Closed!', events);
        }
    
        public onError(events:any){
            console.log('Error!', events);
        }
    
        public onOpen(events:any){
            console.log("Id :",this.Id) // gives me error that Id is undifined
            console.log('Open!', events);
    
            this.ws.json({action:'GET_STATUS', Id: this.Id});
    
            this.pingInterval = setInterval(function(){
                this.ws.json({action:'PING'});
            },1000);
        }
    
        public onMessage(events:any){
            try{
                this.dataReceived = JSON.parse(events.data);
            } catch(err){
                console.log('Data received not a JSON');
            }
    
            if(this.dataReceived amp;amp; this.dataReceived.action === 'ORDER_STATUS'){
                console.log("dataReceived :",this.dataReceived)
                return this.dataReceived.value
            }
        }
    }
 

но если я попытаюсь получить доступ this.id или this.ws в public onOpen() внутри модели Sockette указано, что она не определена

Ошибка :

 TypeError: Cannot read property 'Id' of undefined
onOpen
  28 | }
  29 | 
  30 | public onOpen(events:any){
> 31 |  console.log("Id :",this.Id)
  32 |  console.log('Open!', events);
 

Комментарии:

1. Вы смотрели this на строку, в которой возникает эта ошибка?

2. Я попробовал ваш код в typescriptlang.org/play и это работает, за исключением this.ws.json({action:'PING'}); того, что здесь вам нужна функция со стрелкой, чтобы держаться this подальше от экземпляра класса

Ответ №1:

Попробуйте использовать функцию со стрелкой

   public onOpen(events:any) => {
        console.log("Id :",this.Id) 
        console.log('Open!', events);

        this.ws.json({action:'GET_STATUS', Id: this.Id});

        this.pingInterval = setInterval(function(){
            this.ws.json({action:'PING'});
        },1000);
    }
 

Ответ №2:

вы должны привязать свои функции к этому классу Sockette, добавив эти строки в конструктор

 this.onError = this.onError.bind(this);
this.onClose = this.onClose.bind(this); 
this.onOpen= this.onOpen.bind(this); 
this.onMessage= this.onMessage.bind(this);