I'm working on a project that connect p5.js to Reaper in order to send to some other devices (iPad or other pc) a score that automatically changes pages with the music read by Reaper.
I activated OSC in Reaper and I can receive the timeline in a p5.js project so I can use that to show the score and change, but when I'm trying to connect to another device I can not see anything. The error is that is failed to load resources, particularly the http://localhost:8081/socket.io/socket.io.js is not found.
I use node.js first to open this file called bridge.js to open the connection with OSC Reaper and host the server on :3000.
var osc = require('node-osc');
var io = require('socket.io')(8081);
var oscServer, oscClient;
var isConnected = false;
io.sockets.on('connection', function(socket) {
console.log('connection');
socket.on("config", function(obj) {
isConnected = true;
oscServer = new osc.Server(obj.server.port, obj.server.host);
oscClient = new osc.Client(obj.client.host, obj.client.port);
oscClient.send('/status', socket.sessionId + ' connected');
oscServer.on('message', function(msg, rinfo) {
socket.emit("message", msg);
});
socket.emit("connected", 1);
});
socket.on("message", function(obj) {
oscClient.send.apply(oscClient, obj);
});
socket.on('disconnect', function() {
if (isConnected) {
oscServer.kill();
oscClient.kill();
}
});
});
var path = require('path');
var express = require('express');
var app = express();
var jsPath = path.join(__dirname, '/public');
app.use(express.static(jsPath));
var server = app.listen(3000, function() {
var host = 'localhost';
var port = server.address().port;
console.log('listening on http://' + host + ':' + port + '/');
});In the public folder I've got the .js files and index.html, I put in here the index.html:
<html>
<head>
<meta charset="UTF-8">
<script src="http://localhost:8081/socket.io/socket.io.js"></script>
<script language="javascript" src="libraries/p5.js"></script>
<script language="javascript" src="sketch.js"></script>
<script language="javascript" src="functions.js"></script>
<style>
body {
padding: 0;
margin: 0;
display: flex;
/* This centers our sketch horizontally. */
justify-content: center;
/* This centers our sketch vertically. */
align-items: center;
background-color: black;
}
</style>
</head>
<body>
</body>
</html>That's it! Can someone figure out how can I solve my situation? I'm a musician so not really a programmer. Thank you in advance for the help!
I believe your error may be in the fact that you are telling the browser to look for the socket.io.js file on localhost. You see, "
localhost:8081/file.js" tells the browser to look on the local machine for a server running on port 8081 and get the file named file.js. However, when you open the web page on an IPad there is no server running on that IPad so the browser doesn't know what to do with the file path you gave it.Consider changing your code to this: