node.js /socket.io/socket.io.js 未找到

Question

我不断收到错误 /socket.io/socket.io.js 404（未找到） Uncaught ReferenceError: io is not defined

我的代码是

var express = require('express'), http = require('http');
var app = express();
var server = http.createServer(app);
var io = require('socket.io').listen(server);

server.listen(3000);

和

<script src="/socket.io/socket.io.js"></script>

什么问题？？？

欢迎任何帮助！

Answer 1

如果这发生在开发过程中。那么原因之一可能是您正在运行客户端文件（index.html）。但是您应该做的是运行您的服务器（例如在 localhost:3000）并让服务器处理该静态文件（index.html）。这样，socket.io 包会自动使
<script src="/socket.io/socket.io.js"></script> 在客户端可用。

插图（文件名：index.js）：

const path = require('path');
const express = require('express');
const socketio = require('socket.io');
const port = 3001 || process.env.PORT;
const app = express();
const server = http.createServer(app);
const io = socketio(server);

//MiddleWares
app.use(express.json());
app.use(
  express.urlencoded({
    extended: false,
  })
);
app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
  res.sendFile('index.html');
});

io.on('connect', (socket) => {
console.log('New user joined');
}
server.listen(port, () => {
  console.log(`App has been started at port ${port}`);
});

之后通过命令运行你的服务器文件 node index.js 然后打开localhost:${port}，将端口替换为 index.js 文件中给出的端口并运行它。

它解决了我的问题。希望它也能解决你的问题。

Answer 2

如果您想手动下载“socket.io/socket.io.js”文件并附加到 html（并且不想从服务器运行时获取），您可以使用https://cdnjs.com/libraries/socket.io

喜欢

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js" integrity="sha512-eVL5Lb9al9FzgR63gDs1MxcDS2wFu3loYAgjIH0+Hg38tCS8Ag62dwKyH+wzDb+QauDpEZjXbMn11blw8cbTJQ==" crossorigin="anonymous"></script>

Answer 3

调试步骤

1. npm install socket.io --save 例如在静态文件（index.html）中，你可能已经全局安装了它，当你查看调试器时，文件路径是空的。

2. 更改您的脚本文件并实例化套接字，显式添加您在服务器文件中设置的本地主机

    <script src="http://localhost:5000/socket.io/socket.io.js"></script>
        <script>
          const socket = io.connect("localhost:5000");
           $(() =>
   

   通过打开一个新的浏览器选项卡并粘贴 http://localhost:5000/socket.io/socket.io.js 来仔细检查数据是否在流动，您应该会看到 socket.io.js 数据

3. 仔细检查您的服务器是否已正确设置，如果您收到 CORs 错误 npm install cors，则将其添加到 server.js（或 index.js，无论您选择如何命名您的服务器文件）

    const cors = require("cors");
    const http = require("http").Server(app);
    const io = require("socket.io")(http);
   

   然后使用Express中间件app.use()方法来实例化cors。将中间件放在与静态根文件的连接上方

    app.use(cors());
    app.use(express.static(__dirname));
   

4. 作为最后的检查，确保您的服务器连接到您分配端口的http.listen() 方法，第一个参数是您的端口号，例如我在这里使用了 5000。

    const server = http.listen(5000, () => {
      console.log("your-app listening on port", server.address().port);
    });
   

5. 由于您的 io.on() 方法正在工作，并且您的套接字数据已连接到客户端，请添加您的 io.emit() 方法和您需要的回调逻辑，并在前端 JavaScript 文件中再次使用 socket.on() 方法您需要的回调逻辑。检查数据是否在流动。

我还编辑了上面的评论，因为它对我最有用 - 但我需要采取一些额外的步骤来使客户端-服务器连接正常工作。

Answer 4

请检查您的代码中提到的目录路径。默认为res.sendFile(__dirname + '/index.html');

确保 index.html 在正确的目录中

Answer 5

如果您正在关注 socket.io 教程https://socket.io/get-started/chat/，您应该添加以下这一行。

app.use(express.static(path.join(__dirname, '/')))

这是因为在教程中，Express只会捕获url / 并发送index.html 的文件。

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html')
})

但是，在index.html中，有一个脚本标签（<script src="/socket.io/socket.io.js"></script>）请求socket.io-client的资源，在index.js中没有路由（可以在console-network中找到该url是http://localhost:3000/socket.io/socket.io.js)。

Answer 6

将socket.io.js 复制到公用文件夹（resources/js/socket.io.js）不是正确的做法。

如果Socket.io 服务器正确监听您的HTTP 服务器，它将自动通过http://localhost:<port>/socket.io/socket.io.js 将客户端文件提供给您，您无需找到它或将其复制到可公开访问的文件夹中作为resources/js/socket.io.js &手动送达。

代码示例
Express 3.x - Express 3 要求您实例化一个http.Server 以将socket.io 附加到第一个

var express = require('express')
  , http = require('http');
//make sure you keep this order
var app = express();
var server = http.createServer(app);
var io = require('socket.io').listen(server);

//... 

server.listen(8000);

快乐编码:)

Answer 7

您只需关注https://socket.io/get-started/chat/，一切都会奏效。

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
http.listen(3000, function(){
  console.log('listening on *:3000');
});

Answer 8

看来这个问题可能一直没有答案（虽然对于OP来说可能已经太晚了，但我会为以后遇到它并需要解决问题的人回答）。

您不必执行npm install socket.io，而是必须执行npm install socket.io --save，以便将socket.io 模块安装在您的Web 开发文件夹中（在基本位置/您的index.html 或index.php 所在的位置运行此命令）。这会将 socket.io 安装到命令运行的区域，而不是全局安装，此外，它会自动更正/更新您的 package.json 文件，以便 node.js 知道它在那里。

然后将源路径从'/socket.io/socket.io.js' 更改为'http://' + location.hostname + ':3000/socket.io/socket.io.js'。

Answer 9

...“您可能想知道 /socket.io/socket.io.js 文件在哪里 来自，因为我们既不添加它，也不存在于文件系统中。这是 io.listen 在服务器上完成的部分魔法。它在服务器上创建一个处理程序 为 socket.io.js 脚本文件提供服务。”

来自 Socket.IO Real-time Web 一书 应用程序开发，第 56 页

Answer 10

虽然这与 OP 没有任何关系，但如果您在维护他人代码的同时遇到此问题，您可能会发现问题是由应用程序脚本中的编码器设置 io.set('resource', '/api/socket.io'); 引起的，在这种情况下，您的 HTML 代码将是 <script>type="text/javascript" src="/api/socket.io/socket.io.js"></script>。

Answer 11

如何找到客户端的socket.io.js

安装socket.io

npm install socket.io

找到socket.io客户端

find ./ | grep client | grep socket.io.js

结果：

./node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js

将 socket.io.js 复制到您的资源中：

cp ./node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js /home/proyects/example/resources/js/

在您的 html 中：

<script type="text/javascript" src="resources/js/socket.io.js"></script>