vue-socket.io-extended： setup（） 中的套接字 // 组合式 API

问：

在我的 vite/vue 应用程序中，我试图从 setup（） 部分/组合 API 中定义的函数中向 socket-io 发出消息。

我能够在 methods（） 部分中成功做到这一点，但我还没有弄清楚如何在 setup（） 部分中利用main.ts中指定的套接字。

我觉得我快到了......任何指针都非常感谢。 感谢大家抽出时间接受采访。

vue 文件：

<template>
  <q-page>
    <q-btn label="send Message via Methods (Works)" @click="sendMessage_1()" color="green"></q-btn>&nbsp;
    <q-btn label="send Message via Setup (not Working)" @click="sendMessage_2()" color="red"></q-btn>&nbsp;
  </q-page>
</template>

<script lang="ts">
export default {
  methods: {
    async sendMessage_1() {
      console.log('Sending message 1');
      this.$socket.client.emit('message','TEST'); // WORKS! Comes through to the backend
      console.log('Sent message 1');
    },    
  },

  setup () {
    function sendMessage_2 () {
      console.log('Sending message 2');
      this.$socket.client.emit('message','TEST1'); // DOES NOT WORK (obv. because "this" does not exist in setup().. could not figure out how to write it differently)
      console.log('Sent message 2');
    }
    return {sendMessage_2}
  },
};

</script>

main.ts：

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 icon libraries & Quasar css
import '@quasar/extras/material-icons/material-icons.css'
import 'quasar/src/css/index.sass'
 
const app = createApp(App);
app.use(VueSocketIOExt, io('', {path: '/absproxy/3000/socket.io/'}));
app.use(Quasar, {plugins: {Notify},});
app.use(router);
app.mount('#app');

相关套餐：

vite: 4.4.5
vue: 3.3.4
socket.io-client: 4.7.2
vue-socket.io-extended: 5.0.0-alpha.5