CODEWITHSUNDEEP
javascriptnode.jsreactjssocket.ioejs
Sagarb
Sagarb

Reputation: 9

I am new to nodejs and I'm getting reference error: io is not defined ,I can't figure it out

I'm new to nodejs, every time I'm running my server using nodemon server.js , I'm getting an uncaught reference error: io is not defined at script.js:1, I have no idea what's going wrong

any help will be appreciated!!

Thats my script.js file

const socket = io('/');
const videoGrid = document.getElementById('video-grid');

const myVideo = document.createElement('video');
myVideo.muted = true;

socket.emit('join-room');

let myVideoStream;

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

navigator.mediaDevices
  .getUserMedia({
    video: true,
    audio: true,
  })
  .then((stream) => {
    myVideoStream = stream;
    addVideoStream(myVideo, stream);
  });

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.use(express.static('public'));

app.set('view engine', 'ejs');

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', () => {
    console.log('join room');
  });
});

app.listen(8000, () => {
  console.log('server is running');
});
that's my room.ejs file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Streamy!!</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <h1>bello</h1>
    <div id="video-grid"></div>
    <script src="script.js"></script>
  </body>
</html>

Upvotes: 0

Views: 588

Answers (3)

sasha romanov
sasha romanov

Reputation: 485

You need to add it in script like this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Streamy!!</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="/socket.io/socket.io.js"></script>
    <script>
       const socket = io();
    </script>
  </head>
  <body>
    <h1>bello</h1>
    <div id="video-grid"></div>
    <script src="/script.js"></script>
  </body>
</html>

and start using socket as its now a global variable

Upvotes: 0

suraj.datta
suraj.datta

Reputation: 99

Pls ensure if socket.io.js file is accessbile in html file (you can check Network tab once under Inspect menu).

Try to replace the URL in your script tag with the below one & re-run it.

<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>

Upvotes: 1

Rajeshwaran P
Rajeshwaran P

Reputation: 69

Solution 1) You should start server using

server.listen(8000, () => {
  console.log('server is running');
});

instead of app.listen, in order to require the socket.io.js file from /socket.io/socket.io.js path.

Solution 2) If Can't use solution 1 change the socket.io.js path with CDN to require socket.io.js file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Streamy!!</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    
  </head>
  <body>
    <h1>bello</h1>
    <div id="video-grid"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
    <script src="/script.js"></script>
  </body>
</html>

Upvotes: 0

Related Questions