vue socket

// Vue Socket 示例代码

// 引入 Vue 和 VueSocketIO
import Vue from 'vue';
import VueSocketIO from 'vue-socket.io';

// 创建 Vue 实例并使用 VueSocketIO 插件
Vue.use(new VueSocketIO({
    // 连接的 WebSocket 服务器地址
    connection: 'http://localhost:4000',
}));

new Vue({
    el: '#app',
    data() {
        return {
            message: '',
            messages: [],
        };
    },
    methods: {
        // 发送消息到 WebSocket 服务器
        sendMessage() {
            this.$socket.emit('message', this.message);
            this.messages.push(this.message);
            this.message = '';
        },
        // 监听来自 WebSocket 服务器的消息
        listenMessage() {
            this.$options.sockets.onmessage = (data) => {
                this.messages.push(data);
            };
        }
    },
    mounted() {
        // 组件挂载后开始监听消息
        this.listenMessage();
    }
});

解释说明：

1. 引入依赖：首先引入 Vue 和 VueSocketIO，确保在项目中已经安装了这些依赖。
2. 创建 Vue 实例：通过 Vue.use() 方法将 VueSocketIO 注册为插件，并指定 WebSocket 服务器的连接地址。
3. 发送消息：定义 sendMessage 方法，通过 $socket.emit() 向 WebSocket 服务器发送消息，并更新本地消息列表。
4. 监听消息：定义 listenMessage 方法，通过 $options.sockets.onmessage 监听来自 WebSocket 服务器的消息，并将其添加到本地消息列表中。
5. 组件挂载：在组件挂载完成后调用 listenMessage 方法，开始监听来自服务器的消息。