Vue.js使用socket.io-client连接成功但连接回调方法未执行怎么解决？

问题根因1：监听事件写错 #

你写的io.on('connection', socket => { ... })是Socket.IO服务端的专属监听事件，作用是服务端感知到新客户端接入时触发，客户端侧根本不存在该事件，所以永远不会回调。
客户端监听连接成功的事件为connect，正确的全局监听写法如下：

const io=SocketIO('https://example.com:8443');
// 直接在创建的客户端实例上绑定connect事件
io.on('connect', () => {
  console.log("hai，连接成功");
})

客户端其他常用原生事件：

• connect_error：连接失败时触发
• disconnect：连接断开时触发

问题根因2：sockets配置放置位置错误 #

sockets是Vue组件的专属配置项，需要写在组件选项的根层级，和data、methods等配置同级，不能直接全局声明。示例如下：

// 任意Vue单文件组件内，比如App.vue
export default {
  name: 'App',
  // sockets配置和data、methods平级
  sockets: {
    connect() {
      console.log('socket connected')
    },
    // 可直接在这里注册服务端推送的自定义事件监听
    receiveMessage(content) {
      console.log('收到新消息：', content)
    }
  },
  data() {
    return {
      messageList: []
    }
  },
  mounted() {
    // 也可以通过this.$socket访问全局socket实例，手动绑定事件
    console.log('全局socket实例：', this.$socket)
  }
}

可选排查方案 #

如果修改后仍不生效，大概率是依赖版本不兼容导致，vue-socket.io@3.x仅适配socket.io-client@2.x版本，和4.x版本的socket.io-client存在兼容问题，你可以执行以下命令重装指定版本依赖：

npm uninstall vue-socket.io socket.io-client
npm install vue-socket.io@3.0.10 socket.io-client@2.5.0

你也可以打开浏览器控制台的「网络」面板，切换到「WS」标签，确认对应WebSocket连接的状态为101 Switching Protocols，确认连接确实已经建立成功。

内容的提问来源于stack exchange，提问作者Emzyn pvt ltd