Vite.js构建的Vue项目中socket.io-client连接断开如何解决

步骤1：校验两端版本匹配 #

socket.io对服务端和客户端的版本一致性要求极高，vue-cli的webpack内置了较多兼容垫片，会掩盖版本不兼容的问题，Vite无额外兼容处理就会触发连接失败。首先确保服务端socket.io和客户端socket.io-client大版本完全一致：

• 如果服务端安装的是socket.io@4.x，客户端必须安装socket.io-client@4.x
• 如果服务端是socket.io@2.x，客户端对应安装socket.io-client@2.x

你可以分别在服务端和前端项目下执行命令查看版本：

# 服务端执行
npm list socket.io
# 前端执行
npm list socket.io-client

版本不一致的话卸载重装对应版本即可，比如统一使用v4版本：

# 服务端操作
npm uninstall socket.io
npm install socket.io@4
# 前端操作
npm uninstall socket.io-client
npm install socket.io-client@4

步骤2：调整socket实例初始化逻辑 #

不要把socket实例放在data中，Vue的响应式代理会篡改socket内部的内置属性与事件监听，导致连接逻辑异常，改为在mounted钩子中初始化，直接挂载到vue实例上即可。同时建议初始化时强制指定传输协议为websocket，跳过默认的polling轮询阶段，避免Vite开发服务器对轮询请求的处理异常：

<template>
  <button @click="echo">Echo</button>
</template>

<script>
import { io } from "socket.io-client";
export default {
  mounted() {
    this.socket = io("http://localhost:3001", {
      transports: ["websocket"]
    });
    // 可添加状态监听方便排查
    this.socket.on("connect", () => {
      console.log("连接成功，socket id：", this.socket.id);
    });
    this.socket.on("disconnect", () => {
      console.log("连接断开");
    });
  },
  methods: {
    echo() {
      console.log("当前连接状态：", this.socket.connected ? "已连接" : "已断开");
      console.log("disconnected属性值：", this.socket.disconnected);
    },
  },
};
</script>

步骤3：服务端配置兜底 #

如果调整后还是连接失败，可以修改服务端的cors和传输协议配置做兼容：

const io = socket(server, {
  cors: {
    origin: "*",
    credentials: true
  },
  transports: ["websocket"]
});

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