Express JS中WSS连接无报错但提示失败，通信正常如何解决？

我用Express JS搭建了WebSocket连接，相关配置代码如下：

前端socket.js代码 #

const ip_address = `${process.env.MIX_HTTPS_APP_URL}`;
const socket_port = `${process.env.MIX_EXPRESS_PORT}`;
const URL = ip_address + ":" + socket_port;
export const socket = io(URL, { autoConnect: true });
socket.onAny((event, ...args) => {
    // console.log(event, args);
});

后端index.js代码 #

const app = express();
// app settings
/** Create HTTP server. */
const privateKey = fs.readFileSync(env.privateKey, "utf8");
const certificate = fs.readFileSync(env.certificate, "utf8");
const options = {
  key: privateKey,
  cert: certificate,
};

const server = https.createServer(options, app).listen(port);

/** Create socket connection */
const socketio = new Server(server);
global.io = socketio.listen(server, {
  cors: {
    origin: env.url,
  },
});

global.io.on("connection", WebSockets.connection);

/** Listen on provided port, on all network interfaces. */
/** Event listener for HTTP server "listening" event. */
server.on("listening", () => {
  console.log(`Listening on port:: ${env.url}:${port}/`);
});

目前可以正常收发Socket消息，但控制台仍会出现WSS连接失败的错误提示，请问如何解决该问题，避免用户在控制台看到此错误？

• 修正前端连接URL的协议：后端使用HTTPS服务器时，前端需确保WebSocket连接使用wss://协议。如果MIX_HTTPS_APP_URL是https://开头，替换协议后再拼接端口：

  const ip_address = `${process.env.MIX_HTTPS_APP_URL}`.replace(/^https:/, 'wss:');
  const socket_port = `${process.env.MIX_EXPRESS_PORT}`;
  const URL = `${ip_address}:${socket_port}`;
  export const socket = io(URL, { autoConnect: true });
  

• 移除后端重复监听逻辑：后端代码中new Server(server)和socketio.listen(server)会重复创建WebSocket服务，简化初始化代码：

  // 替换原Socket.io创建代码
  global.io = new Server(server, {
    cors: {
      origin: env.url,
      credentials: true // 若需要携带Cookie等凭证则添加
    }
  });
  
  global.io.on("connection", WebSockets.connection);
  

• 静默处理前端连接错误：在前端添加错误监听，仅在开发环境打印日志，生产环境屏蔽错误输出：

  socket.on("connect_error", (error) => {
    if (process.env.NODE_ENV === 'development') {
      console.warn("Socket连接错误:", error);
    }
  });
  
  socket.on("disconnect", (reason) => {
    if (process.env.NODE_ENV === 'development') {
      console.warn("Socket断开连接:", reason);
    }
  });
  

• 校验端口与域名一致性：检查env.url和MIX_HTTPS_APP_URL的域名是否一致，port和MIX_EXPRESS_PORT的端口是否匹配，避免前端连接到错误地址。

内容的提问来源于stack exchange，提问作者Mr. Kenneth