[英]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我是 nodejs 的新手,每次我使用 nodemon server.js 运行我的服务器时,我都会收到一个未捕获的引用错误:io is not defined at script.js:1,我不知道出了什么问题
any help will be appreciated!!任何帮助将不胜感激!!
Thats my script.js file那是我的 script.js 文件
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这是我的 server.js 文件
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'); });
<!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>
Pls ensure if socket.io.js file is accessbile in html file (you can check Network tab once under Inspect menu).请确保在 html 文件中是否可以访问 socket.io.js 文件(您可以在“检查”菜单下检查一次“网络”选项卡)。
Try to replace the URL in your script tag with the below one & re-run it.尝试用下面的 URL 替换脚本标签中的 URL 并重新运行它。
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
Solution 1) You should start server using解决方案 1)您应该使用
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.而不是app.listen ,以便从 /socket.io/socket.io.js 路径要求 socket.io.js 文件。
Solution 2) If Can't use solution 1 change the socket.io.js path with CDN to require socket.io.js file:解决方案 2)如果不能使用解决方案 1,请使用 CDN 更改 socket.io.js 路径以需要 socket.io.js 文件:
<!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>
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并开始使用套接字作为它现在的全局变量
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.