在本文中，我们将深入探讨如何解决使用`vue-socket.io`在Vue应用程序中接收不到数据的问题。`vue-socket.io`是一个插件，它为Vue提供了对`socket.io-client`的封装，允许开发者轻松地在Vue组件中集成WebSocket通信。在实际开发中，可能会遇到无法接收到服务器发送的数据，这通常是由于配置不当或者使用方法错误导致的。
我们需要确保服务器端的`socket.io`配置正确。在提供的示例中，服务器端使用了`express`和`socket.io`创建了一个简单的WebSocket服务器，每隔2秒发送一次'hi'事件，携带数据'helllo'。同时，当客户端发送'hello'事件时，服务器会回应'get it'。
```javascript
let express = require('express');
let app = express();
let server = require('http').Server(app);
let io = require('socket.io')(server);
io.on('connect', (socket) => {
setInterval(() => {
socket.emit('hi', 'hello');
}, 2000);
socket.on('hello', (data) => {
console.log('hello', data);
socket.emit('hi', 'get it');
});
socket.on('disconnect', (data) => {
console.log('断开', data);
});
});
server.listen(8080);
```
接下来，我们在Vue CLI 3环境中配置`vue-socket.io`。在`main.js`中引入插件并设置连接到服务器的URL：
```javascript
import Vue from 'vue';
import App from './App.vue';
import VueSocketIO from 'vue-socket.io';
Vue.config.productionTip = false;
Vue.use(new VueSocketIO({
debug: true,
connection: 'http://127.0.0.1:8080',
}));
new Vue({
render: h => h(App),
}).$mount('#app');
```
然后，在Vue组件中监听特定的事件。这里使用`sockets`选项来定义事件监听器：
```javascript
<script>
export default {
sockets: {
connect() {
console.log('链接成功');
},
disconnect() {
console.log('断开链接');
},
reconnect() {
console.log('重新链接');
},
hi(res) {
console.log('VueSocketIO', res);
},
},
};
</script>
```
然而，即使服务器发送了数据，Vue组件也无法接收到。为了排查问题，我们使用原生的`socket.io-client`库创建一个监听器，发现可以接收到服务器的数据。这表明问题可能在于`vue-socket.io`的事件监听器设置。
通过查看`this`对象，我们发现`vue-socket.io`在Vue实例上添加了一个名为`sockets`的属性。在这个属性下有一个`listener`子属性，我们可以直接订阅这个`listener`来监听事件：
```javascript
mounted() {
this.$socket.$on('hi', (data) => {
console.log('++++++++++', data);
});
}
```
或者，使用`subscribe`方法来订阅事件：
```javascript
mounted() {
this.sockets.listener.subscribe('hi', (data) => {
console.log('++++++++++', data);
});
}
```
这样，我们就能成功地通过`vue-socket.io`接收到服务器发送的数据了。尽管文档中给出的`sockets`对象监听方式未生效，但我们找到了一种可行的替代方案。
解决`vue-socket.io`接收不到数据的问题通常需要检查服务器配置、客户端配置以及事件监听器的设置。在本例中，我们通过直接访问`vue-socket.io`内部的`listener`解决了这个问题。然而，对于生产环境，最好等待插件更新修复可能存在的bug，或者直接使用`socket.io-client`进行更底层的控制。记得在遇到问题时，深入理解所使用的工具和库的工作原理，这有助于找到合适的解决方案。
