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

Question

我不断收到错误 /socket.io/socket.io.js 404 (Not Found) 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>

问题是什么？？？

欢迎任何帮助！

score 81 · Accepted Answer

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

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

代码示例
Express 3.x - Express 3 要求您首先实例化 ahttp.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);

快乐编码:)

score 12 · Accepted Answer

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

score 9 · Accepted Answer

似乎这个问题可能从未得到回答（尽管对于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'。

score 3 · Accepted Answer

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

来自书 Socket.IO 实时 Web 应用程序开发，第 56 页

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

如果您正在关注 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（可以在 url 的控制台网络中找到http://localhost:3000/socket.io/socket.io.js）。

score 1 · Accepted Answer

您只需按照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');
});

score 1 · Accepted Answer

调试步骤

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()再次使用该方法以及您需要的回调逻辑。检查数据是否在流动。

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

score 0 · Accepted Answer

如果这是在开发过程中发生的。那么原因之一可能是您正在运行客户端文件（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 文件中给定的端口并运行它。

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

score 0 · Accepted Answer

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

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

11 回答 11

Related

Reference