WebSocket 失败，无效的帧头。

Question

我正在使用Socket.io和PeerJS创建视频会议应用程序。在本地主机上一切正常，但当我在Heroku上推送/主机它时，在浏览器的控制台中显示以下错误：index.js: 83 WebSocket连接到'wss://vidconsom.herokuapp.com/socket.io/?EIO=3&transport=websocket&sid=zbEGAHBj9w_dpcQfAAAF'失败：无效的帧头。请问有谁可以提供帮助吗？

更新：请查看下面的答案。

这是我的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);
}

- Somsubhra Das

---

任何解决方案都可以。 - Madhu

嘿，你解决了这个问题吗？ - Daryll

需要将代码中的socket.to(roomId).broadcast.emit("user-disconnected", userId);修改为socket.broadcast.to(roomId).emit("user-disconnected", userId); - Julio Spinelli

Answer 1

在部署到Heroku时，前端的script.js使用443端口：

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

- Somsubhra Das

---

对我不起作用，我做了完全相同的事情。有人能帮帮我吗？ - Pratyush Narain

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

Answer 2

你可以在不同的端口上运行express服务器和ExpressPeerServer。你可以在这里找到讨论https://github.com/peers/peerjs/issues/300。

server.js

//Express Server
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const { v4 : uuidV4} = require('uuid');

app.set('view engine','ejs');
app.use(express.static(__dirname+'/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,userName) => {
        // Do something
    });
});
server.listen(3000);

// Peer Server
var ExpressPeerServer = require('peer').ExpressPeerServer;
var peerExpress = require('express');
var peerApp = peerExpress();
var peerServer = require('http').createServer(peerApp);
var options = { debug: true }
var peerPort = 3001;
peerApp.use('/peerjs', ExpressPeerServer(peerServer, options));
peerServer.listen(peerPort);

client.js

var peer = new Peer(undefined, {
path: "/peerjs",
host: "/",
port: "3001",
config: {'iceServers': [
    { url: 'stun:stun.l.google.com:19302' }
  ]}
});

- Banny Vishwas

Answer 3

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

- Devansh Dubey

Answer 4

也许你需要在创建IO服务器时添加allowEIO3选项。

import { Server } from 'socket.io';
const io = new Server(server, {
  allowEIO3: true
});

参考资料：https://socket.io/docs/v3/troubleshooting-connection-issues/

- Eden Lu

Answer 5

使用socket io或peer server在不同的端口上，例如io.listen(4000);

- Paladiya Gautam

---

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