Retrieve the attributes of a class beyond the mqtt callback limitation

Question

Retrieve the attributes of a class beyond the mqtt callback limitation

Currently, I am utilizing npm-mqtt to retrieve information from a different mqtt broker.

My objective is to add the obtained data to the array property of a specific class/component every time a message is received.

However, I'm facing an issue where I don't have access to the class or its properties. Instead, it seems like I'm within the scope of the mqtt client class object.

Below you can find a snippet of the code:

this.mydata: Array<any> = [];

private fetchWithMqtt(){
    var client = mqtt.connect('ws://' + this.ip + ":" + Number(this.port) + "/mqtt");
        // set callback handlers
        client.on('close', this.onConnectionLost);
        client.on('message', this.onMessageArrived);
        client.on('connect', this.onConnect);
}

private onMessageArrived(topic, message) {
    let tempDataset = JSON.parse(message).dataset;
            this.mydata.push({ //this.mydata is undefined because this = mqtt-client
                x: tempDataset[0],
                y: tempDataset[1]
            });

My question is: How can I push data to my class property outside of this current scope?

javascript angular typescript scope mqtt

Answer 1

Answer №1

When using .bind(this), you ensure that the value of this remains unchanged when your events are triggered.

Your updated code will appear as follows:

this.mydata: Array<any> = [];

private fetchWithMqtt(){
    var client = mqtt.connect('ws://' + this.ip + ":" + Number(this.port) + "/mqtt");
    // set callback handlers
    client.on('close', this.onConnectionLost.bind(this));
    client.on('message', this.onMessageArrived.bind(this));
    client.on('connect', this.onConnect.bind(this));
}

private onMessageArrived(topic, message) {
    let tempDataset = JSON.parse(message).dataset;
    this.mydata.push({
        x: tempDataset[0],
        y: tempDataset[1]
    });

However, if you need to access the client within the event handler, you can still utilize bind with a slight modification by adding mydata as an argument.

Here is the revised version of your code:

this.mydata: Array<any> = [];

private fetchWithMqtt(){
    var client = mqtt.connect('ws://' + this.ip + ":" + Number(this.port) + "/mqtt");
    // set callback handlers
    client.on('close', this.onConnectionLost.bind(client, this.mydata));
    client.on('message', this.onMessageArrived.bind(client, this.mydata));
    client.on('connect', this.onConnect.bind(client, this.mydata));
}

private onMessageArrived(mydata, topic, message) {
    let tempDataset = JSON.parse(message).dataset;
    mydata.push({ // this == client
        x: tempDataset[0],
        y: tempDataset[1]
    });

Answer 2

When using .bind(this), you ensure that the value of this remains unchanged when your events are triggered.

Your updated code will appear as follows:

this.mydata: Array<any> = [];

private fetchWithMqtt(){
    var client = mqtt.connect('ws://' + this.ip + ":" + Number(this.port) + "/mqtt");
    // set callback handlers
    client.on('close', this.onConnectionLost.bind(this));
    client.on('message', this.onMessageArrived.bind(this));
    client.on('connect', this.onConnect.bind(this));
}

private onMessageArrived(topic, message) {
    let tempDataset = JSON.parse(message).dataset;
    this.mydata.push({
        x: tempDataset[0],
        y: tempDataset[1]
    });

However, if you need to access the client within the event handler, you can still utilize bind with a slight modification by adding mydata as an argument.

Here is the revised version of your code:

this.mydata: Array<any> = [];

private fetchWithMqtt(){
    var client = mqtt.connect('ws://' + this.ip + ":" + Number(this.port) + "/mqtt");
    // set callback handlers
    client.on('close', this.onConnectionLost.bind(client, this.mydata));
    client.on('message', this.onMessageArrived.bind(client, this.mydata));
    client.on('connect', this.onConnect.bind(client, this.mydata));
}

private onMessageArrived(mydata, topic, message) {
    let tempDataset = JSON.parse(message).dataset;
    mydata.push({ // this == client
        x: tempDataset[0],
        y: tempDataset[1]
    });

Retrieve the attributes of a class beyond the mqtt callback limitation

Answer №1

Similar questions

Creating a basic jQuery button to switch an element's background color is a breeze

Cross-origin resource sharing problem (Backend developed in Express, Frontend in Angular)

Verification of three-dimensional password format with the use of AngularJS

Show the navigation bar only when the user is logged in using Angular 6

Issue with Discord.js reminder command: An expected numerical value was not provided

Office-Js Authentication for Outlook Add-ins

How can I use jQuery to add styling to my menu options?

What is the best way to show a dropdown menu list using my code and JSON response object?

I'm attempting to store the information from fs into a variable, but I'm consistently receiving undefined as the output

Choose a specific value from a drop-down menu

JavaScript and .NET Core: Implementing file uploads without the use of FormData or FromFrom

Having trouble getting your custom Angular directive to work properly with interpolation?

I'm curious if it's possible to set up both Tailwind CSS and TypeScript in Next.js during the initialization process

Grunt is throwing an error message of "Cannot GET/", and unfortunately ModRewrite is not functioning properly

Creating a sliding bottom border effect with CSS when clicked

Create boilerplate code easily in VS Code by using its feature that generates code automatically when creating a

Encountering a problem with the mock object in Angular 11 unit testing when converting a JSON object to a TypeScript interface

Tips for incorporating images into an `.mdx` file located outside of the `public/` directory with the `next-mdx-remote` package in Next JS

Angular now displays an unsupported Internet Explorer version message instead of showing a white screen

Searching for a specific data point within the latest entry of a JSON file using Javascript