Websocket 失败 帧头无效

Posted 2023-03-07

【中文标题】Websocket 失败 帧头无效

【英文标题】：Websocket failed Invalid frame header

【发布时间】：2020-11-17 04:43:24

【问题描述】：

我正在使用 socket.io 和 peerjs 来创建一个视频会议应用程序。在本地主机上一切正常。但是当我在heroku上推送/托管它时，它会在浏览器的控制台中显示这个错误：

index.js:83 WebSocket connection to 'wss://vidconsom.herokuapp.com/socket.io/?EIO=3&transport=websocket&sid=zbEGAHBj9w_dpcQfAAAF' failed: Invalid frame header.

有人可以帮忙吗？

更新：检查下面的答案

这是我的 server.js 代码：

const express = require("express");
const app = express();
const path = require("path");
// const  PeerServer  = require("peer");
const  ExpressPeerServer  = require("peer");
const  v4: uuidV4  = require("uuid");

const server = require("http").Server(app);
const io = require("socket.io")(server);

const PORT = process.env.PORT || 3000;
const expServer = server.listen(PORT, () =>
  console.log(`Server started on port $PORT`)
);

const peerServer = ExpressPeerServer(expServer, 
  path: "/peer",
);

app.set("view engine", "ejs");
app.use(express.static(path.join(__dirname, "/public")));

app.use(peerServer);

app.get("/", (req, res) => 
  res.redirect(`/$uuidV4()`);
);

app.get("/:room", (req, res) => 
  res.render("room", 
    roomId: req.params.room,
    PORT,
    host: process.env.host | "/",
  );
);

io.on("connection", (socket) => 
  socket.on("join-room", (roomId, userId) => 
    socket.join(roomId);
    socket.to(roomId).broadcast.emit("user-connected", userId);

    socket.on("disconnect", () => 
      socket.to(roomId).broadcast.emit("user-disconnected", userId);
    );
  );
);

这是我的前端 script.js 代码：

const socket = io("/");
const videoGrid = document.getElementById("video-grid");
const myPeer = new Peer(undefined, 
  host: "/",
  port: PORT,
  path: "/peer",
);
const myVideo = document.createElement("video");
myVideo.muted = true;
const peers = ;
navigator.mediaDevices
  .getUserMedia(
    video: true,
    audio: true,
  )
  .then((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);
    );
  );

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);

【问题讨论】：

对此的任何解决方案

你解决了这个问题

socket.to(roomId).broadcast.emit("user-disconnected", userId);需要socket.broadcast.to(roomId).emit("user-disconnected", userId);

【参考方案1】：

在前端 script.js 部署到 heroku 时使用端口 443：

const myPeer = new Peer(undefined, 
  host: "/",
  port: 443,
  path: "/peer",
);

【讨论】：

不为我工作的情况完全一样。谁能帮帮我

我运行相同的代码，它没有显示其他用户的视频。 @Pratyush Narain 到现在为止你有同样的问题吗

【参考方案2】：

server.js 文件

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const  ExpressPeerServer  = require("peer");
const io = require("socket.io")(server, 
    cors: 
        origin: "*",
    ,
);
const peerServer = ExpressPeerServer(server, 
    debug: true,
    port: 443
);

app.set("view engine", "ejs");
app.use("/peerjs", peerServer);
app.use(express.static(path.join(__dirname, "public")));

app.get("/", (req, res) => 
    res.render("home");
);

io.on("connection", (socket) => 
    socket.on("event", () => 
        // do something
    );
    socket.on("disconnect", () => 
        // do something
    );
);

server.listen(process.env.PORT || 3000);

script.js 文件

const socket = io().connect("/");

let peer = new Peer(undefined, 
        path: "/peerjs",
        host: "/",
        port: 443,
    );

【参考方案3】：

在不同的端口上使用套接字 io 或对等服务器，例如 io.listen(4000);

【讨论】：

这个答案需要更好的格式、示例和进一步的阐述。谢谢。