Websocket failed Invalid frame header - node.js

Question

I'm using socket.io with peerjs to create a video conference app. Everything works fine on localhost. but when i push/host it on heroku it shows me this error in the console of browser :
index.js:83 WebSocket connection to 'wss://vidconsom.herokuapp.com/socket.io/?EIO=3&transport=websocket&sid=zbEGAHBj9w_dpcQfAAAF' failed: Invalid frame header.
Can anyone please help?
UPDATE: CHECK BELOW FOR ANSWER
Here is my server.js code:
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);
});
});
});
Here is my frontend script.js code:
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);
}

Answer 1

On the frontend script.js use port 443 while deploying to heroku:
const myPeer = new Peer(undefined, {
host: "/",
port: 443,
path: "/peer",
});

Answer 2

server.js file
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 file
const socket = io().connect("/");
let peer = new Peer(undefined, {
path: "/peerjs",
host: "/",
port: 443,
});

Answer 3

You can run express server and ExpressPeerServer on different port. You can find the discussion here 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' }
]}
});

Answer 4

maybe you need to add the allowEIO3 option when creating the io server
import { Server } from 'socket.io';
const io = new Server(server, {
allowEIO3: true
});
reference: https://socket.io/docs/v3/troubleshooting-connection-issues/

Answer 5

use either socket io or peer server on different port something like
io.listen(4000);