Receiving messages from node server with socket.io to vue-native / react-native client

Question

I have a setup where I am sending messages from a vue-native client app (vue.js wrapper for react-native) with socket.io to a node.js server. From the node.js server Im forwarding my messages with OSC to "another program" which receives the OSC messages.

This works fine but now I want to go the other way around.

I am successfully receiving the OSC messages in my node.js server from "the other application" using the code below but I cannot figure out how to forward this to my vue-native app.

VUE-NATIVE (the essential data):

<script>
import io from "socket.io-client";

export default {
  components: {
    io
  },

  data: function() {
    return {
      object: {
        oscAdress: "TheOscAdress",
        msg: ""
      },
      adress: "http://192.168.43.54:3000"
    };
  },

  mounted() {
    this.socket = io(this.adress);
    console.log("started");
  },

  methods: {
    sendMessage: function() {
      this.socket.emit("chat message", this.object);
    },

NODE.JS

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const io = require("socket.io").listen(server);
const port = 3000;

// OSC
const { Client } = require('node-osc');
this.client = new Client('127.0.0.1', 3333);

const { Server } = require('node-osc/lib');
var oscServer = new Server(10000, '127.0.0.1');

// SOCKET IO
io.on("connection", socket => {
  console.log("a user connected :D");

  // RECEIVING FROM APP WITH SOCKET.IO
  socket.on("chat message", msg => {
    console.log(msg.msg);

    // SENDING TO OSC
    this.client.send('/'+msg.oscAdress, parseInt(msg.msg, 10));
  });
});

// RECEIVING FROM OSC
oscServer.on('message', function (msg) {
  console.log(msg);
});

server.listen(port, () => console.log("server running on port:" + port));

Any ideas on how to forward the OSC messages to my app?

One approach would be to use this method in my node.js but I dont know how to receive it in vue so Im not sure if it works:

// RECEIVING FROM OSC
oscServer.on('message', function (msg) {
  console.log(msg);
  // SENDING TO VUE-NATIVE??
  io.emit("chat message to app", msg);
});

UPDATE I receive the messages in vue with adding the receive function below in mounted But it is not working correctly since I want something that is updating Vue all the time. Not only at startup.

  mounted() {
    this.socket = io(this.adress);
    console.log("started");

    // receive message from server
    this.socket.on("chat message to app", (data) => {
      console.log( data); 
    })
  },

At the moment my node.js app is constantly listening and OSC messages and is updated all the time. The same thing is it with vue-native application. Is it possible to only have it updating when it actually receives something or when some OSC value actually is changing?

Answer 1

I almost solved my own question. See update above. The problem is though that Im using mounted function. I want something that is updating Vue all the time. Not only at startup.

At the moment my node.js app is constantly listening and OSC messages and is updated all the time.Is it possible to only have it updating when it actually receives something or when some OSC value actually is changing?