colinbdclark / osc.js

An Open Sound Control (OSC) library for JavaScript that works in both the browser and Node.js
GNU General Public License v2.0
770 stars 117 forks source link

osc-browser.js:46 Uncaught TypeError: Cannot read properties of undefined (reading 'buffer') #208

Closed madredeuz closed 1 week ago

madredeuz commented 6 months ago

Hi, I am trying to send data to Supercollider from the web but I get this error when sending from web. I got the arguments from an example.

var oscPort = new osc.WebSocketPort({
      url: "ws://localhost:8081", // URL to your Web Socket server.
      metadata: true,
    });

oscPort.open();

oscPort.on("ready", function () {
      console.log("Ready");

      var msg = {
        address: "/hello/from/oscYe",
        args: [
          {
            type: "f",
            value: 440,
          }
        ]
      };

      //console.log(msgY);
      oscPort.send(msg);
    });

If I pass only the address I receive the message in Supercollider, but the args are giving the error, maybe the format?.

the error

osc-browser.js:46 Uncaught TypeError: Cannot read properties of undefined (reading 'buffer')
    at osc.isTypedArrayView (osc-browser.js:46:20)
    at osc.nativeBuffer (osc-browser.js:131:20)
    at p.send (osc-browser.js:1866:23)
    at osc.WebSocketPort.<anonymous> (ynsosc.js:41:15)
    at osc.WebSocketPort.emitEvent (osc-browser.js:1716:50)
    at osc.WebSocketPort.emit (osc-browser.js:1743:21)
    at p.listen (osc-browser.js:2098:14)
    at osc.WebSocketPort.emitEvent (osc-browser.js:1716:50)
    at osc.WebSocketPort.emit (osc-browser.js:1743:21)
    at socket.onopen (osc-browser.js:2080:18)
colinbdclark commented 6 months ago

A good place to start is to ensure that you're not sending messages until the Port is ready, as per the documentation:

https://github.com/colinbdclark/osc.js/?tab=readme-ov-file#creating-an-osc-web-socket-port-object

madredeuz commented 6 months ago

Sorry, I missed that part that I already have it in my code and edited. It sends it when ready. But somewhere in the process there is something happening. If I use this code from the examples, just copied from the examples.

 oscPort.on("ready", function () {
      oscPort.send({
          address: "/carrier/frequency",
          args: [
              {
                  type: "f",
                  value: 440
              }
          ]
      });
    });

I get this error in the terminal


node:events:491
      throw er; // Unhandled 'error' event
      ^

TypeError: Cannot read properties of undefined (reading 'writer')
    at Object.osc.writeArgument (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/osc/src/osc.js:762:46)
    at Object.osc.collectArguments (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/osc/src/osc.js:792:34)
    at Object.osc.collectMessageParts (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/osc/src/osc.js:845:20)
    at Object.osc.writeMessage (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/osc/src/osc.js:863:33)
    at Object.osc.writePacket (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/osc/src/osc.js:985:24)
    at osc.UDPPort.p.encodeOSC (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/osc/src/osc-transports.js:70:27)
    at osc.UDPPort.p.send (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/osc/src/osc-transports.js:56:28)
    at osc.WebSocketPort.listener (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/osc/src/osc-transports.js:143:28)
    at osc.WebSocketPort.emit (node:events:513:28)
    at osc.WebSocketPort.p.decodeOSC (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/osc/src/osc-transports.js:84:18)
Emitted 'error' event on  instance at:
    at osc.WebSocketPort.p.decodeOSC (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/osc/src/osc-transports.js:87:18)
    at osc.WebSocketPort.emit (node:events:513:28)
    at WebSocket.socket.onmessage (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/osc/src/platforms/osc-websocket-client.js:58:18)
    at WebSocket.onMessage (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/ws/lib/event-target.js:132:16)
    at WebSocket.emit (node:events:513:28)
    at Receiver.receiverOnMessage (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/ws/lib/websocket.js:970:20)
    at Receiver.emit (node:events:513:28)
    at Receiver.dataMessage (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/ws/lib/receiver.js:502:14)
    at Receiver.getData (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/ws/lib/receiver.js:435:17)
    at Receiver.startLoop (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/ws/lib/receiver.js:143:22)
colinbdclark commented 6 months ago

Now I'm confused; you've sent along a completely different error and stack trace, and the latter code appears to be running in Node.js. Your previous error and stack trace was clearly happening in the browser. So where is the issue you're actually experiencing?

madredeuz commented 6 months ago

I experienced the two issues but I am trying to reproduce the first one that happened in the browser but I can't, and it has to be with the format of the object args: [{x : 4}]. The second one is the one that I am having now the problem and happens in Node.js. I copied the args from an example so it looks to work fine in the browser when not in Node.js. I think is the format of the object. This is de js I use to connect the server. that I also copied from another example.

So the problem is really this one.

TypeError: Cannot read properties of undefined (reading 'writer')
    at Object.osc.writeArgument (/Applications/XAMPP/xamppfiles/htdocs/osc2sc/node_modules/osc/src/osc.js:762:46)

This is my code for connenting to Node.js and the server.


var osc = require("osc"),
  express = require("express"),
  WebSocket = require("ws");

var getIPAddresses = function () {
  var os = require("os"),
    interfaces = os.networkInterfaces(),
    ipAddresses = [];

  for (var deviceName in interfaces) {
    var addresses = interfaces[deviceName];
    for (var i = 0; i < addresses.length; i++) {
      var addressInfo = addresses[i];
      if (addressInfo.family === "IPv4" && !addressInfo.internal) {
        ipAddresses.push(addressInfo.address);
      }
    }
  }

  return ipAddresses;
};

var udpPort = new osc.UDPPort({
  // This is the port we're listening on.
  localAddress: "127.0.0.1",
  localPort: 57121,

  // This is where sclang is listening for OSC messages.
  remoteAddress: "127.0.0.1",
  remotePort: 57120,
  metadata: true,
});

// 
// Open the socket.
udpPort.open();

udpPort.on("ready", function () {
  var ipAddresses = getIPAddresses();
  console.log("Listening for OSC over UDP.");
  ipAddresses.forEach(function (address) {
    console.log(" Host:", address + ", Port:", udpPort.options.localPort);
  });
  console.log(
    "To start the demo, go to http://localhost:8081 in your web browser."
  );
});

// Create an Express-based Web Socket server to which OSC messages will be relayed.
var appResources = __dirname + "/public",
  app = express(),
  server = app.listen(8081),
  wss = new WebSocket.Server({
    server: server,
  });
console.log(appResources);

app.use(express.static(appResources));
wss.on("connection", function (socket) {
  console.log("A Web Socket connection has been established!");

  var socketPort = new osc.WebSocketPort({
    socket: socket,
  });

  var relay = new osc.Relay(udpPort, socketPort, {
    raw: true,
  });

});
colinbdclark commented 6 months ago

Have you tried running the example from the osc.js-examples repository directly, as opposed to cutting and pasting them? Do the examples work for you?

Otherwise, please commit a repository with all of your code in a form that I can run directly and try out myself. It's hard to piece together what you're experiencing from all the bits of code you've pasted here.

madredeuz commented 6 months ago

I tested de UDP-Browser example and it's working. I've notice that it also depends if you put the code inside a DOMloader, if it's inside a function, eventlistener... I can work with that version, so everything is fine thanks.