Socket.io 页面永远加载
Socket.io Page Loading Forever
注意 - 我正在使用 Pug 呈现我的页面。
我的页面在包含 script(src="/socket.io/socket.io.js")
时不会停止加载。
这是我的 app.js
.
的相关内容
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
所有软件包都已正确安装。
在我的头上标签:
script(src="/socket.io/socket.io.js")
script.
var socket = io();
然而,我的页面并没有停止加载。我在这里做错了什么?
更新:
app.js
const path = require('path');
const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const AppError = require('./utils/appError');
const globalErrorHandler = require('./controllers/errorController');
const userRouter = require('./routes/userRoutes');
const viewRouter = require('./routes/viewRoutes');
const projectRouter = require('./routes/projectRoutes');
const app = express();
app.set('view engine', 'pug')
app.set('views', path.join(__dirname, 'views'));
//MIDDLEWARES
if (process.env.NODE_ENV === 'development') {
app.use(morgan('dev'));
}
app.use(express.urlencoded({extended: true}));
app.use(express.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use((req, res, next) => {
req.requestTime = new Date().toISOString();
next();
});
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'overview'));
})
//ROUTES
app.use('/', viewRouter);
app.use('/api/1/users', userRouter);
app.use('/api/1/projects', projectRouter)
app.all('*', (req, res, next) => {
next(new AppError(`Can't find ${req.originalUrl}.`, 404));
});
app.use(globalErrorHandler);
module.exports = app;
server.js(运行 按节点)
const mongoose = require('mongoose');
const dotenv = require('dotenv');
// mongoose.set('debug',true);
dotenv.config({path: './config.env'})
const app = require('./app');
const DB = process.env.DB.replace('<PASSWORD>', process.env.DBPASS);
mongoose.connect(DB, {
useNewUrlParser: true,
useCreateIndex: true,
useFindAndModify: false,
useUnifiedTopology: true
}).then(con => {console.log(' Connected.')})
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(` Running on ${port}.`)
});
const http = require('http').Server(app);
const io = require('socket.io')(http);
io.on('connection', socket => {
socket.on('greeting', msg => {
console.log(msg);
})
});
http.listen(80);
既然你已经展示了你的代码,这部分是错误的:
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(` Running on ${port}.`)
});
const http = require('http').Server(app);
const io = require('socket.io')(http);
您正在那里创建两个单独的服务器并将 socket.io 绑定到不是 运行 的服务器。将上面的代码更改为:
const port = process.env.PORT || 3000;
const server = app.listen(port, () => {
console.log(` Running on ${port}.`)
});
const io = require('socket.io')(server);
在 OP 显示其实际代码之前的早期尝试。
我的猜测是您的环境中出现了问题,或者您的 OS 中出现了问题,或者某些内容阻止了某些请求。要判断事情是否可行,我建议您试试这个对我来说效果很好的简单应用程序:
// app.js
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const path = require('path');
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "temp.html"));
});
io.on('connection', socket => {
socket.on("greeting", msg => {
console.log(msg);
});
});
server.listen(80);
和 HTML 文件 temp.html
:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="/socket.io/socket.io.js"></script>
<style>
</style>
</head>
<body>
<button id="myButton">Press Me</button>
<script>
const socket = io();
document.getElementById("myButton").addEventListener("click", () => {
socket.emit("greeting", "hi from client");
});
</script>
</body>
</html>
您将这两个文件放在同一个项目中,并且您在该项目中安装了服务器端 socket.io 库(根据正常安装,它应该在 node_modules 中)。
使用 node app.js
以具有服务器控制台的方式启动服务器,您可以从中看到输出。然后,从同一台计算机上的浏览器转到 http://localhost
。它应该加载一个带有单个按钮的网页。按下那个按钮。每次按下该按钮时,您应该会在服务器控制台中看到一条消息,内容为 hi from client
。
如果这有效,那么我们需要查看您的所有项目代码,以了解您的实际项目有什么问题。
如果这不起作用,那么我们需要知道您遇到了什么错误。您可以尝试将此项目移动到不同的端口,以防您在特定端口上遇到某些问题。您可以重新启动计算机,以防网络或文件系统出现问题。
注意 - 我正在使用 Pug 呈现我的页面。
我的页面在包含 script(src="/socket.io/socket.io.js")
时不会停止加载。
这是我的 app.js
.
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
所有软件包都已正确安装。
在我的头上标签:
script(src="/socket.io/socket.io.js")
script.
var socket = io();
然而,我的页面并没有停止加载。我在这里做错了什么?
更新:
app.js
const path = require('path');
const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const AppError = require('./utils/appError');
const globalErrorHandler = require('./controllers/errorController');
const userRouter = require('./routes/userRoutes');
const viewRouter = require('./routes/viewRoutes');
const projectRouter = require('./routes/projectRoutes');
const app = express();
app.set('view engine', 'pug')
app.set('views', path.join(__dirname, 'views'));
//MIDDLEWARES
if (process.env.NODE_ENV === 'development') {
app.use(morgan('dev'));
}
app.use(express.urlencoded({extended: true}));
app.use(express.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use((req, res, next) => {
req.requestTime = new Date().toISOString();
next();
});
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'overview'));
})
//ROUTES
app.use('/', viewRouter);
app.use('/api/1/users', userRouter);
app.use('/api/1/projects', projectRouter)
app.all('*', (req, res, next) => {
next(new AppError(`Can't find ${req.originalUrl}.`, 404));
});
app.use(globalErrorHandler);
module.exports = app;
server.js(运行 按节点)
const mongoose = require('mongoose');
const dotenv = require('dotenv');
// mongoose.set('debug',true);
dotenv.config({path: './config.env'})
const app = require('./app');
const DB = process.env.DB.replace('<PASSWORD>', process.env.DBPASS);
mongoose.connect(DB, {
useNewUrlParser: true,
useCreateIndex: true,
useFindAndModify: false,
useUnifiedTopology: true
}).then(con => {console.log(' Connected.')})
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(` Running on ${port}.`)
});
const http = require('http').Server(app);
const io = require('socket.io')(http);
io.on('connection', socket => {
socket.on('greeting', msg => {
console.log(msg);
})
});
http.listen(80);
既然你已经展示了你的代码,这部分是错误的:
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(` Running on ${port}.`)
});
const http = require('http').Server(app);
const io = require('socket.io')(http);
您正在那里创建两个单独的服务器并将 socket.io 绑定到不是 运行 的服务器。将上面的代码更改为:
const port = process.env.PORT || 3000;
const server = app.listen(port, () => {
console.log(` Running on ${port}.`)
});
const io = require('socket.io')(server);
在 OP 显示其实际代码之前的早期尝试。
我的猜测是您的环境中出现了问题,或者您的 OS 中出现了问题,或者某些内容阻止了某些请求。要判断事情是否可行,我建议您试试这个对我来说效果很好的简单应用程序:
// app.js
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const path = require('path');
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "temp.html"));
});
io.on('connection', socket => {
socket.on("greeting", msg => {
console.log(msg);
});
});
server.listen(80);
和 HTML 文件 temp.html
:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="/socket.io/socket.io.js"></script>
<style>
</style>
</head>
<body>
<button id="myButton">Press Me</button>
<script>
const socket = io();
document.getElementById("myButton").addEventListener("click", () => {
socket.emit("greeting", "hi from client");
});
</script>
</body>
</html>
您将这两个文件放在同一个项目中,并且您在该项目中安装了服务器端 socket.io 库(根据正常安装,它应该在 node_modules 中)。
使用 node app.js
以具有服务器控制台的方式启动服务器,您可以从中看到输出。然后,从同一台计算机上的浏览器转到 http://localhost
。它应该加载一个带有单个按钮的网页。按下那个按钮。每次按下该按钮时,您应该会在服务器控制台中看到一条消息,内容为 hi from client
。
如果这有效,那么我们需要查看您的所有项目代码,以了解您的实际项目有什么问题。
如果这不起作用,那么我们需要知道您遇到了什么错误。您可以尝试将此项目移动到不同的端口,以防您在特定端口上遇到某些问题。您可以重新启动计算机,以防网络或文件系统出现问题。