我是 nodejs 的新手，我收到参考错误：io is not defined ，我想不通答案

【问题标题】：I am new to nodejs and I'm getting reference error: io is not defined ,I can't figure it out我是 nodejs 的新手，我收到参考错误：io is not defined ，我想不通
【发布时间】：2021-01-20 01:40:43
【问题描述】：

我是 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>

【问题讨论】：

难道不需要像在server.js文件中那样在script.js文件中导入socket.io吗？
怎么做——比如 const io=require('socket.io');我做了然后我得到一个错误说require is not defined
我想这是有道理的，因为脚本是通过浏览器呈现的。看看这个：socket.io/docs/client-installation 尝试添加 const socket = io();在 ejs 文件中的脚本标记中，应将其注册为全局变量。然后希望您可以在脚本文件中引用套接字
我试过但没用

标签： javascript node.js reactjs socket.io ejs

【解决方案1】：

请确保 socket.io.js 文件可在 html 文件中访问（您可以在 Inspect 菜单下检查 Network 选项卡一次）。

尝试将脚本标记中的 URL 替换为以下 URL 并重新运行。

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

【讨论】：

谢谢，但它可以通过将 app.listen(portNumber) 替换为 server.listen(portNumber)

【解决方案2】：

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

【讨论】：

是的，解决方案 1 有效！非常感谢它

【解决方案3】：

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

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

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

【讨论】：

按照你的方法，我得到一个错误：socket is already defined
@Sagarb 你可以直接用它作为它的全局变量
感谢您的帮助