时间戳

首页 > 解决方案 > 为什么在设备中找不到 socket.io.js？

javascript - 为什么在设备中找不到 socket.io.js？

问题描述

我正在开发一个将 p5.js 连接到 Reaper 的项目，以便向其他一些设备（iPad 或其他 pc）发送一个乐谱，该乐谱会随着 Reaper 读取的音乐自动更改页面。

我在 Reaper 中激活了 OSC，我可以在 p5.js 项目中接收时间线，因此我可以使用它来显示分数和更改，但是当我尝试连接到另一台设备时，我什么也看不到。错误是加载资源失败，特别是找不到http://localhost:8081/socket.io/socket.io.js 。

我首先使用 node.js 打开这个名为 bridge.js 的文件，以打开与 OSC Reaper 的连接并将服务器托管在：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 + '/');
});

在公共文件夹中，我有 .js 文件和 index.html，我将 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>

而已！有人能弄清楚我该如何解决我的情况吗？我是一名音乐家，所以不是真正的程序员。预先感谢您的帮助！

标签： javascriptnode.jsprocessingp5.jsreaper

解决方案

我相信您的错误可能在于您告诉浏览器在本地主机上查找 socket.io.js 文件。你看，“ localhost:8081/file.js”告诉浏览器在本地机器上查找运行在端口 8081 上的服务器并获取名为 file.js 的文件。但是，当您在 iPad 上打开网页时，该 iPad 上没有运行服务器，因此浏览器不知道如何处理您提供的文件路径。

考虑将您的代码更改为：

  <script src="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>

推荐阅读