错误 404 socket.io 试图在 P5.js 草图上显示文本 [关闭]

Question

我已经尝试了好几天，但不知何故我一定遗漏了一些东西。如果你们中的一些人可以帮助我的初学者，那就太棒了！ :)

我正在尝试从聊天 gpt api 获取一些文本数据并将其传递给 p5.js 草图，以便在 html 页面上以图形方式显示。当我运行 index.js 文件时，我在终端中获取数据，并通过在我的终端中使用 http-server -p 3000 在端口 3000 上运行服务器，我可以访问 p5.js 草图，但我得到一个“GET /socket .io/?EIO=3&transport=polling&t=OSFaXVX&b64=1" Error (404): "Not found" 并且我的任何日志中都没有数据出现。

这是我的 github 仓库https://github.com/noiramschneider/stonepoem

你能看看我的代码看看你是否看到了什么吗？ 我尝试禁用我的防火墙并重新启动我的电脑但没有运气......

索引.js

// Declare variables outside of functions so they can be accessed throughout the sketch
//let socket;
var message;
var data;
message = "";
let currentLine = 0;
let currentCharacter = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER, CENTER);
  textSize(32);

  socket = io.connect('http://localhost:3000');
  socket.on('message', function (data) {
    console.log("Received message data:", data);
    message = data;
  });
console.log("message at setup"+ message + data);
  // Call drawPoem() in the setup() function
  drawPoem();

}

// Define the lines array once with the message variable
let lines = [message];

function drawPoem() {
  background(220);
  translate(width/2, height/2);
  rotate(HALF_PI);
  fill(0);
console.log("message at drawPoem"+ message);
  // split message into an array of lines
  lines = message.split('\n');

  textLeading(40);
  for (let i = 0; i < lines.length; i++) {
    let line = lines[i];
    let x = 0;
    let y = -(lines.length / 2 - i) * 40;
    if (i < currentLine) {
      text(line, x, y);
    } else if (i == currentLine) {
      let substring = line.substring(0, currentCharacter);
      text(substring, x, y);
    }
  }
  if (currentLine < lines.length - 1 || currentCharacter < lines[currentLine].length) {
    if (frameCount % 4 == 0) {
      if (currentCharacter < lines[currentLine].length) {
        currentCharacter++;
      } else {
        currentLine++;
        currentCharacter = 0;
      }
    }
  }

  // Call drawPoem() recursively to continuously update the poem
  requestAnimationFrame(drawPoem);
}

和 Mysketch.js

// Declare variables outside of functions so they can be accessed throughout the sketch
//let socket;
var message;
var data;
message = "";
let currentLine = 0;
let currentCharacter = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER, CENTER);
  textSize(32);

  socket = io.connect('http://localhost:3000');
  socket.on('message', function (data) {
    console.log("Received message data:", data);
    message = data;
  });
console.log("message at setup"+ message + data);
  // Call drawPoem() in the setup() function
  drawPoem();

}

// Define the lines array once with the message variable
let lines = [message];

function drawPoem() {
  background(220);
  translate(width/2, height/2);
  rotate(HALF_PI);
  fill(0);
console.log("message at drawPoem"+ message);
  // split message into an array of lines
  lines = message.split('\n');

  textLeading(40);
  for (let i = 0; i < lines.length; i++) {
    let line = lines[i];
    let x = 0;
    let y = -(lines.length / 2 - i) * 40;
    if (i < currentLine) {
      text(line, x, y);
    } else if (i == currentLine) {
      let substring = line.substring(0, currentCharacter);
      text(substring, x, y);
    }
  }
  if (currentLine < lines.length - 1 || currentCharacter < lines[currentLine].length) {
    if (frameCount % 4 == 0) {
      if (currentCharacter < lines[currentLine].length) {
        currentCharacter++;
      } else {
        currentLine++;
        currentCharacter = 0;
      }
    }
  }

  // Call drawPoem() recursively to continuously update the poem
  requestAnimationFrame(drawPoem);
}