Express+Socket.io服务端单客户端双重连接问题排查求助

嘿，这绝对不是Socket.io的Bug啦，我之前做项目的时候也踩过这个坑！大概率是你的服务端路由配置有冗余，或者前端不小心发起了两次连接请求，咱们一步步来排查：

先看服务端的冗余配置 #

你现在同时用了express.static托管静态文件，又额外写了app.get("/")来返回index.html——其实express.static已经会自动把dist目录下的index.html作为根路径的默认页面了，重复的路由配置虽然不一定直接导致双重连接，但可能引发页面加载的异常，进而间接触发多次连接。

修改后的服务端代码 #

把多余的app.get("/")路由删掉就好，简化后的代码如下：

const express = require("express");
const path = require("path");
const socket = require("socket.io");
const port = process.env.PORT || 8080;
const app = express();
const server = app.listen(port);

// 静态文件托管已经自动处理根路径的index.html请求
app.use(express.static(__dirname + "/dist"));

// Socket setup
const io = socket(server);
io.on("connect", function (socket) {
  // 加上socket.id能更清晰区分是同一个连接还是真的两个连接
  console.log(`Made socket connection with ID: ${socket.id}`);
});

再排查前端的连接请求 #

如果修改服务端后还是有双重连接，那肯定是前端发起了两次Socket连接请求，你可以这么检查：

• 打开浏览器开发者工具的「Network」标签，过滤「WS」类型，看看是不是有两个ws://localhost:8080/socket.io/开头的连接请求
• 检查你的index.html，有没有重复引入Socket.io客户端脚本（比如<script src="/socket.io/socket.io.js"></script>写了两次）
• 查看前端的JS代码，是不是重复调用了io()来建立连接（比如在Vue的created和mounted里都调用了，或者代码逻辑导致连接被触发两次）

小技巧：区分连接事件重复还是真的双重连接 #

在服务端的connect事件里打印socket.id，如果是同一个ID出现两次，那是connect事件被重复监听了（不过你的代码里只监听了一次，这种概率低）；如果是两个不同的ID，那就是确实建立了两个独立连接，重点排查前端的连接逻辑就行。

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