客户端找不到"socket.io.js"文件



我正在用Express、Handlebars和Socket做一个个人项目。IO。我把Express和Handlebars部分设置得很好,但当我试图将客户端连接到socket.IO(通过像页面上所说的那样放置脚本标记(时,它找不到它;socket.io客户端";但它也不起作用,和socket.io网站上的CDN安装一样。

这是我的服务器:

const express = require('express');
const app = express();
const port = 3000;
const exphbs = require('express-handlebars');
const engine = exphbs.engine;
const http = require('http');
const socketio = require('socket.io');
const server = http.createServer(app);
const io = socketio(server);
app.engine('handlebars', engine());
app.set('view engine', 'handlebars');
app.set('views', './views');
app.use(express.static('public')); //Expongo al lado cliente la carpeta "public"

io.on('connection', socket => {
console.log(`Socket ${socket.id} connected`)
})
app.get('/', (req, res) => {
res.render("home");
})
app.get('/Hola', (req, res) => {
res.render("hola");
})

app.listen(port, ()=> console.log(`App listening to port ${port}`));

我把脚本标签放在主布局上:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Game</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>

<h1 id="titulo">Card Game</h1>
{{{body}}}
<script src="/socket.io/socket.io.js"></script>
<script src="/js/main.js"></script>
</body>
</html>

该程序在公共文件夹中查找main.js文件没有问题,但似乎找不到socket.io.js.

当我运行程序时,控制台错误的屏幕截图

任何帮助都会得到回报!

问题是您正在创建两个http服务器,将socket.io和Express连接到其中一个服务器,但从未启动该服务器。另一个只有Express连接。

你创建了一个http服务器,并将socket.io连接到它上,如下所示:

const server = http.createServer(app);
const io = socketio(server);

但是,该服务器从未启动,因此没有运行。所以,socket.io没有运行。

您使用以下内容创建另一个http服务器:

app.listen(port, ()=> console.log(`App listening to port ${port}`));

这个已经启动,但没有连接socket.io,因此没有安装任何东西来服务/socket.io/socket.io.js,因此浏览器在请求时会得到404


要修复,请更改这行代码:

app.listen(port, ()=> console.log(`App listening to port ${port}`));

到此:

server.listen(port, ()=> console.log(`App listening to port ${port}`));

作为进一步解释的一点,在app.listen()内部,它是这样做的:

app.listen = function listen() {
var server = http.createServer(this);
return server.listen.apply(server, arguments);
};

因此,您可以看到它正在创建另一个http服务器,而不是您附加socket.io的服务器。显然,您不需要创建另一台服务器,只需要在您已经创建的http服务器上调用.listen()即可。

最新更新