1

I am making a web app that can send and receive OSC data via a node.js server. That's all working fine. But I want to use Vue.js for the front and here I get a problem with declaring a function. When I am using only JavaScript it's working well.

Javascript:

import osc from "osc";
var port = new osc.WebSocketPort({
  url: "ws://localhost:8083" //localhost:8083 online server 178.62.209.37:8083
});
port.open();

var message = []

OSCMessage();

function OSCMessage() {
  port.on("message", function(oscMessage) {
    //console.log(oscMessage);
    OSCMessages(oscMessage);
  });
}

function OSCMessages(oscMessage) {
  message = oscMessage;
  console.log(message);
}

But when I try to put it into Vue, I get an error in the console, even when I try it with this.OSCMessages:

OSCMessages is not defined

Vue code:

import osc from "osc";
var port = new osc.WebSocketPort({
  url: "ws://localhost:8083" //localhost:8083 online server 178.62.209.37:8083
});
port.open();

export default {
  data() {
    return {
      value: 60,
      message: [],
    }
  },
  computed: {
    OSCMessage: function() {
      port.on("message", function(oscMessage) {
        //console.log(oscMessage); // this console log is working great.
        this.OSCMessages(oscMessage)
      });
    },
    OSCMessages: function(oscMessage) {
      this.message = oscMessage
      console.log(this.message.address);
    },
  },
}

My goal is to make the Vue variable message equal to the oscMessage, so that I can continue to use the oscMessage data in Vue. I think it has something to do with scoping in Vue. I hope someone can help me, thanks in advance!

Dan
  • 59,490
  • 13
  • 101
  • 110
Dominique
  • 35
  • 1
  • 5

1 Answers1

0

There are two issues.

1) If you don't use an es6 arrow function as a callback, then this will not refer to the Vue instance.

Change this:

port.on("message", function (oscMessage) {    
   this.OSCMessages(oscMessage)
});

to:

port.on("message", (oscMessage) => {    
   this.OSCMessages(oscMessage)
});

2) These both appear to be methods, not computeds. Or at least OSCMessages is being called like a method. You can't pass arguments to computeds.

Change:

computed: {

to

methods: {
Dan
  • 59,490
  • 13
  • 101
  • 110
  • Let me know if you have any questions about this. You'll need to run `this.OSCMessage()` to register the port listener. You can do that in the `created()` lifecycle hook. – Dan Apr 19 '20 at 00:41
  • Hi Dan, Thanks for your help! it's working now exactly as I want. I can make the OSC data visible via Vue.js. I used "" beforeMount()"" but maybe is it via ""created()"" a better option? – Dominique Apr 19 '20 at 11:24
  • Hi Dominique, you're welcome- I'm glad it's working. To your question, `created` is a good place to do things that are purely data related, whereas `mounted` and `beforeMount` often have more to do with DOM-related manipulations. They are specially related to the status of the DOM after the data is ready. – Dan Apr 19 '20 at 11:46
  • Hi, Dan. Yeah I already read something about that I will change it to `created()` maybe it works even better than ;) Thanks again for your help! – Dominique Apr 20 '20 at 07:49