使用Socket.io搭建实时聊天项目时遭遇服务器连接错误

问题描述 #

• 执行node server.js后页面可正常渲染，但终端未打印预期的Socket连接ID
• 前端添加connect_error监听后，控制台显示“server error”
• 尝试更换Socket.io的CDN链接、修改端口，问题仍未解决

问题根源 #

服务器代码中错误使用了Express的app.listen()启动服务，但Socket.io是挂载在http.createServer()创建的server实例上的，必须通过该server实例启动服务，否则Socket.io的连接监听逻辑无法生效。

修复方案 #

修改server.js的最后一行代码：

原代码：

app.listen(3000);

替换为：

server.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

修复后的完整server.js代码 #

const express = require('express');
const path = require('path');
const cors = require('cors');

const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);

app.use(cors());
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'public'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.use('/', (req, res) => {
    res.render('index.html');
});

io.on('connection', socket => {
    console.log(`Socket conectado: ${socket.id}`);
});

server.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

验证修复 #

1. 重启服务器：执行node server.js
2. 刷新前端页面，终端会打印出Socket连接ID，前端不再出现连接错误

内容的提问来源于stack exchange，提问作者Everton Pontes