Need help with dmx set function

Wappler General Need Help
1

I have a custom javascript function linked to my page and I want to emit a socket inside this function
socket expression:

<dmx-socket id="resize"></dmx-socket>

I've tried adding the following to the javascript function:

  let resize_data = [
    obj.getWidth(),
    obj.getHeight(),
    serializedObjects,
    obj.viewportTransform
  ];
  dmx.app.set('resize_data', resize_data);

And then tried to emit the socket when resize_data variable updated but of course it doesn't work!
Note: serializedObjects is an array.

2

Hi.

This is how we do it:

dmx.parse(`resize.emit('socket_message_name',{key: value})`);

If you need to bind resize_data as the value in key/value, you will have to stringify it here.
Also, assuming here that socket is created on the main layout page. If its in a content page, you need to do content.resize.

1 Like
3

Thank you so much for helping me Sid. I appreciate it.
Also can I know how can I use dmx.app.set properly if I want to access arrays in app connect. The tutorial on the docs weren't enough for me. And in general, are there good tutorials about dmx codes?
Thanks again

4

We primarily just use dmx.app.data and dmx.parse only for all our custom JS needs.

Using App Connect with JavaScript Functions - this is one of the docs about using dmx in JS that I know of. Probably you have seen it too.

If you are trying to set some Wappler array named resize_data from JS, you can try this:
dmx.app.data.resize_data.items = resize_data;
resize_data on right is the JS array.

1 Like
5

Is this right?

  dmx.app.data.resize_data.items = resize_data;

 dmx.parse("content.resize.emit('resize', {id:" + dmx.app.query.id + ", data: " + dmx.app.data.resize_data + "})");

Edit: Actually it gives me an error saying resize_data is undefined even though I've declared it using "Array" of the app connect "Data"

Cannot set properties of undefined (setting 'items')
6

Here's my updated code so far!

// function to be called on resize event
function resize(obj) {
  let resize_data = [
    obj.getWidth(),
    obj.getHeight(),
    serializedObjects,
    obj.viewportTransform
  ];
dmx.app.data.content.resize_data.items.length = 0;

  resize_data.forEach((item) => {
    dmx.app.data.content.resize_data.items.push(item);
  })
  dmx.parse("content.resize.emit('resize', {boid:" + dmx.app.data.query.boid + ", data: " + dmx.app.data.content.resize_data + "})");

}

In console I see this error:
Screenshot 2025-01-24 165920

7

:point_up:
JSON.stringify()

Additionally, Not sure why you are trying to push the resize_data to a Wappler array. For the user case of doing an emit, you can directly stringify and bind the JS resize_data object.. not need to push the items to Wappler array and then bind the Wappler array.

1 Like
8

Here's my updated code after using JSON.stringify()

let resize_data = [
    obj.getWidth(),
    obj.getHeight(),
    serializedObjects,
    obj.viewportTransform
  ];
  dmx.parse("content.resize.emit('resize', {boid:" + dmx.app.data.query.boid + ", data: " + JSON.stringify(resize_data) + "})");

Yes, you are correct. No need here for creating a dmx array here. Except that I don't want to use JSON.stringify() a lot in my app because it's synchronous.

But It worked. Thank you so much @sid

1 Like
9

But now I want to use the response that's coming from the server to this socket emit. How to use it with the same dmx.parse() structure above?
I used to do the following with js:

      socket.emit("resize", [
            obj.getWidth(),
            obj.getHeight(),
            serializedObjects,
            obj.viewportTransform
          ], (response) => {
            console.log(response);
                if (response && response.status === "ok") {
                    // do stuff here
                  }
            }
      )
10

I've found a solution.
Using request method instead of emit.
The request method will return a promise.