Socket.io 页面永远加载

Question

注意 - 我正在使用 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);

Answer 1

既然你已经展示了你的代码，这部分是错误的：

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。

如果这有效，那么我们需要查看您的所有项目代码，以了解您的实际项目有什么问题。

如果这不起作用，那么我们需要知道您遇到了什么错误。您可以尝试将此项目移动到不同的端口，以防您在特定端口上遇到某些问题。您可以重新启动计算机，以防网络或文件系统出现问题。

Socket.io 页面永远加载

Socket.io Page Loading Forever

javascript

node.js

sockets

socket.io

pug