node.js - 无法连接到 socketio/express 服务器

Question

我正在关注关于使用 nodejs 进行缩放克隆的教程，但出现错误（在 Web 控制台中）：

websocket.js:87 WebSocket connection to 'ws://localhost:3030/socket.io/?EIO=4&transport=websocket&sid=on90y1WuFetxiRq0AAAC' failed: Invalid frame header

和

Failed to load resource: net::ERR_CONNECTION_REFUSED

（服务器.js）：

    const express = require("express");
    const app = express();
    // const cors = require('cors')
    // app.use(cors())
    const server = require("http").Server(app);
    const io = require("socket.io")(server);
    const { ExpressPeerServer } = require("peer");
    const peerServer = ExpressPeerServer(server, {
      debug: true,
    });
    const { v4: uuidV4 } = require("uuid");
    
    app.use("/peerjs", peerServer);
    
    app.set("view engine", "ejs");
    app.use(express.static("public"));
    
    app.get("/", (req, res) => {
      res.redirect(`/${uuidV4()}`);
    });
    
    app.get("/:room", (req, res) => {
      res.render("room", { roomId: req.params.room });
    });
    
    io.on("connection", (socket) => {
      socket.on("join-room", (roomId, userId) => {
        socket.join(roomId);
        socket.to(roomId).broadcast.emit("user-connected", userId);
        // messages
        socket.on("message", (message) => {
          //send message to the same room
          io.to(roomId).emit("createMessage", message);
        });
    
        socket.on("disconnect", () => {
          socket.to(roomId).broadcast.emit("user-disconnected", userId);
        });
      });
    });
    
    server.listen(3030);

I am really new to nodejs so any constructive criticism or help would be greatly appreciated :)

编辑：

这是运行peerjs和套接字的script.js（该文件还处理相机功能和消息功能。我假设这是发生错误的地方，因为它没有给我一个确切的错误发生位置）（脚本。 js)

const socket = io("/");
const videoGrid = document.getElementById("video-grid");
const myPeer = new Peer(undefined, {
  path: "/peerjs",
  host: "/",
  port: "432",
});
let myVideoStream;
const myVideo = document.createElement("video");
myVideo.muted = true;
const peers = {};
navigator.mediaDevices
  .getUserMedia({
    video: true,
    audio: true,
  })
  .then((stream) => {
    myVideoStream = stream;
    addVideoStream(myVideo, stream);
    myPeer.on("call", (call) => {
      call.answer(stream);
      const video = document.createElement("video");
      call.on("stream", (userVideoStream) => {
        addVideoStream(video, userVideoStream);
      });
    });

    socket.on("user-connected", (userId) => {
      connectToNewUser(userId, stream);
    });
    // input value
    let text = $("input");
    // when press enter send message
    $("html").keydown(function (e) {
      if (e.which == 13 && text.val().length !== 0) {
        socket.emit("message", text.val());
        text.val("");
      }
    });
    socket.on("createMessage", (message) => {
      $("ul").append(`<li class="message"><b>user</b><br/>${message}</li>`);
      scrollToBottom();
    });
  });

socket.on("user-disconnected", (userId) => {
  if (peers[userId]) peers[userId].close();
});

myPeer.on("open", (id) => {
  socket.emit("join-room", ROOM_ID, id);
});

function connectToNewUser(userId, stream) {
  const call = myPeer.call(userId, stream);
  const video = document.createElement("video");
  call.on("stream", (userVideoStream) => {
    addVideoStream(video, userVideoStream);
  });
  call.on("close", () => {
    video.remove();
  });

  peers[userId] = call;
}

function addVideoStream(video, stream) {
  video.srcObject = stream;
  video.addEventListener("loadedmetadata", () => {
    video.play();
  });
  videoGrid.append(video);
}

const scrollToBottom = () => {
  var d = $(".main__chat_window");
  d.scrollTop(d.prop("scrollHeight"));
};

const muteUnmute = () => {
  const enabled = myVideoStream.getAudioTracks()[0].enabled;
  if (enabled) {
    myVideoStream.getAudioTracks()[0].enabled = false;
    setUnmuteButton();
  } else {
    setMuteButton();
    myVideoStream.getAudioTracks()[0].enabled = true;
  }
};

const playStop = () => {
  console.log("object");
  let enabled = myVideoStream.getVideoTracks()[0].enabled;
  if (enabled) {
    myVideoStream.getVideoTracks()[0].enabled = false;
    setPlayVideo();
  } else {
    setStopVideo();
    myVideoStream.getVideoTracks()[0].enabled = true;
  }
};

const setMuteButton = () => {
  const html = `
    <i class="fas fa-microphone"></i>
    <span>Mute</span>
  `;
  document.querySelector(".main__mute_button").innerHTML = html;
};

const setUnmuteButton = () => {
  const html = `
    <i class="unmute fas fa-microphone-slash"></i>
    <span>Unmute</span>
  `;
  document.querySelector(".main__mute_button").innerHTML = html;
};

const setStopVideo = () => {
  const html = `
    <i class="fas fa-video"></i>
    <span>Stop Video</span>
  `;
  document.querySelector(".main__video_button").innerHTML = html;
};

const setPlayVideo = () => {
  const html = `
  <i class="stop fas fa-video-slash"></i>
    <span>Play Video</span>
  `;
  document.querySelector(".main__video_button").innerHTML = html;
};

标签： node.jsexpresssocket.iopeerjs