Question

我继续收到错误 /socket.io/socket.io.js 404（未找到）未捕获的ReferenceError：未定义io

我的代码是

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

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

如果Socket.io服务器正确地侦听您的HTTP服务器，它会自动通过http://localhost:<port>/socket.io/socket.io.js向客户端文件提供服务，您无需查找或复制到可公开访问的服务器文件夹为resources/js/socket.io.js＆amp;手动提供。

代码示例
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 2

如何找到客户端的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>

Answer 3

似乎这个问题可能从来没有得到过回答（尽管对于OP来说可能为时已晚，但是对于今后遇到它并且需要解决问题的人来说，我会回答它。）

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

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

Answer 4

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

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

Answer 5

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

确保您在正确的目录中建立了index.html

Answer 6

调试步骤

npm install socket.io --save在静态文件（index.html）中，则可能是全局安装的，而当您查看调试器时，文件路径为空。
更改脚本文件并实例化套接字，以显式添加在服务器文件中设置的本地主机
```
 <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数据
仔细检查服务器的设置是否正确，是否出现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));
```
作为最后检查，请确保您的服务器已与用于分配端口的http.listen()方法连接，第一个arg是您的端口号，例如，我在此处使用了5000。
```
 const server = http.listen(5000, () => {
   console.log("your-app listening on port", server.address().port);
 });
```
当您的io.on()方法正在工作，并且套接字数据已连接到客户端时，请使用您需要的回调逻辑添加io.emit()方法，并在前端JavaScript文件中使用再次使用socket.on()方法和所需的回调逻辑。检查数据是否在流动。

我还编辑了上面的注释，因为这对我来说最有用-但是我还有一些其他步骤可以使客户端-服务器连接正常工作。

Answer 7

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

Answer 8

您必须关注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 9

如果您正在遵循socket.io教程https://socket.io/get-started/chat/，则应如下添加此行。

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

这是因为在本教程中， Express 仅会捕获网址 /并发送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中路由（可以找到它）在控制台网络中，网址为http://localhost:3000/socket.io/socket.io.js）。

Answer 10

如果您想手动下载“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 11

如果这是在开发过程中出现的。那么原因之一可能是您正在运行客户端文件（index.html）。但是您应该做的是运行您的服务器（例如在 localhost:3000）并让服务器处理该静态文件（index.html）。这样socket.io包就会自动make
<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 文件中的给定替换端口并运行它。

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

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

11 个答案: