无法连接Socket.IO Admin UI 寻求技术解决方案

连接Socket.IO Admin UI时出现异常（截图：），服务端代码如下：

const io = require('socket.io')(3001,{cors:
    {origin:["https://admin.socket.io","http://localhost:8080","http://192.168.227.1:8080"]},
    credentials:true  } )
const {instrument}  = require("@socket.io/admin-ui")

instrument(io,{auth:false});

已尝试浏览器CORS启用扩展，但问题仍未解决，需正常访问Socket.IO Admin UI。

解决方案 #

• 检查版本兼容性
  不同版本的socket.io和@socket.io/admin-ui可能存在兼容问题，比如socket.io@4.x需搭配对应版本的Admin UI。执行npm list socket.io @socket.io/admin-ui查看当前版本，对照官方文档调整至匹配版本。

• 优化CORS配置
  当前CORS仅配置了源地址，需补充允许的请求方法和头部，确保WebSocket握手请求能通过：

  const io = require('socket.io')(3001, {
    cors: {
      origin: ["https://admin.socket.io", "http://localhost:8080", "http://192.168.227.1:8080"],
      methods: ["GET", "POST"],
      allowedHeaders: ["*"],
      credentials: true
    }
  })
  

• 验证服务端运行状态
  在服务端添加日志确认服务正常启动：

  io.on('connection', (socket) => {
    console.log('客户端已连接:', socket.id);
  });
  console.log('Socket.IO服务运行在http://localhost:3001');
  

  启动服务后访问http://localhost:3001/socket.io/，若返回JSON格式内容（如{"code":0,"message":"Transport unknown"}），说明服务运行正常。

• 确认Admin UI连接地址
  在Admin UI页面输入的连接地址应为http://localhost:3001（本地运行时），不要添加/socket.io这类多余路径。

• 排查浏览器干扰
  禁用所有浏览器扩展后重启浏览器，同时清除缓存和Cookie，避免旧配置残留影响连接。

内容的提问来源于stack exchange，提问作者محمد الضحيك