How do I connect my socket.io to my page?

Question

I am trying to clone a zoom meeting. It works on my localhost:3000 but I don't know how to make it point at my webpage.

I tied modifying what "const socket = io('/')" pointed at but it didn't work.

I also tried using different html files that implemented this script but still didn't work.

this is my room.js file:

const socket = io('/');

const videoGrid = document.getElementById('video-grid');
const myVideo = document.createElement('video'); 
myVideo.muted = true; 
const peers = {};


const myPeer = new Peer(undefined , {
    host: '/',
    port: '3001'
});
myPeer.on('open', id =>{
    socket.emit('join-room', ROOM_ID, id);
})

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-disconnect', userId =>{
    if(peers[userId]) peers[userId].close();
});

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

    videoGrid.append(video);
}

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

this is my ejs.file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Asistencia Online</title>
    <style>
        #video-grid{ display: grid;  grid-template-columns: repeat(auto-fill, 640px);  grid-auto-rows: 480px;}
        video{ width: 640px; height: 480px; object-fit: cover;}
    </style>
    <script> const ROOM_ID = " <%= roomId %> " </script>
    <script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js" defer></script> 
    <script src="/socket.io/socket.io.js" defer></script>
    <script src="room.js" defer></script>

</head>
<body>
    <div id="video-grid"></div>
</body>
</html>

this is my server.js file

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('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).emit('user-connected', userId); 
            socket.on('disconnect', ()=>{
            socket.to(roomId).emit('user-disconnect', userId);
        })
    });
});

server.listen(3000);

How do I connect my socket.io to my page?

0 Answers0