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

Question

我是 nodejs 的新手，每次我运行我的服务器使用 nodemon server.js 时，我都会收到未捕获的引用错误：io is not defined at script.js:1，我不知道出了什么问题

任何帮助将不胜感激！！

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

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

那是我的 room.ejs 文件

<!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>

Answer 1

解决方案 1) 您应该使用

启动服务器

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

而不是 app.listen，以便从 /socket.io/socket.io.js 路径中获取 socket.io.js 文件.

解决方案 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>

Answer 2

你需要像这样在脚本中添加它

<!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>

并开始使用套接字作为它现在的全局变量

Answer 3

请确保 socket.io.js 文件是否在 html 文件中可访问（您可以在“检查”菜单下检查“网络”选项卡一次）。

尝试将您的脚本标签中的 URL 替换为下面的 re-run。

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

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

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

javascript

ejs

node.js

socket.io

reactjs