Vue3 setup(Composition API)中使用vue-socket.io-extended发消息问题

方案一：使用vue-socket.io-extended提供的useSocket钩子（推荐） #

这是适配Vue3 Composition API的官方用法，直接通过钩子获取全局注入的socket实例：

修改组件的<script>部分：

<script lang="ts">
import { useSocket } from 'vue-socket.io-extended';

export default {
  methods: {
    async sendMessage_1() {
      console.log('Sending message 1');
      this.$socket.client.emit('message','TEST');
      console.log('Sent message 1');
    },    
  },

  setup () {
    // 获取全局socket实例
    const socket = useSocket();

    function sendMessage_2 () {
      console.log('Sending message 2');
      // 和methods中的调用逻辑保持一致
      socket.client.emit('message','TEST1');
      console.log('Sent message 2');
    }
    return {sendMessage_2}
  },
};
</script>

方案二：直接复用main.ts中创建的socket实例 #

如果不想使用钩子，也可以将main.ts中的socket实例导出，在组件中直接导入使用：

1. 修改main.ts，导出创建的socket实例：

import App from './App.vue';
import VueSocketIOExt from 'vue-socket.io-extended';
import io from 'socket.io-client';
import { createApp } from 'vue';
import { Quasar, Notify } from 'quasar';
import router from './router/routes.js';

import '@quasar/extras/material-icons/material-icons.css'
import 'quasar/src/css/index.sass'

// 创建并导出socket实例
export const socket = io('', {path: '/absproxy/3000/socket.io/'});

const app = createApp(App);
app.use(VueSocketIOExt, socket);
app.use(Quasar, {plugins: {Notify},});
app.use(router);
app.mount('#app');

2. 在组件中导入并使用：

<script lang="ts">
// 根据项目结构调整路径
import { socket } from '../main';

export default {
  methods: {
    async sendMessage_1() {
      console.log('Sending message 1');
      this.$socket.client.emit('message','TEST');
      console.log('Sent message 1');
    },    
  },

  setup () {
    function sendMessage_2 () {
      console.log('Sending message 2');
      // 直接调用原始socket实例的emit方法
      socket.emit('message','TEST1');
      console.log('Sent message 2');
    }
    return {sendMessage_2}
  },
};
</script>

两种方案都能解决Setup中无法通过this.$socket调用的问题，方案一更符合Vue3 Composition API的生态规范。

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