Vue 3 Composition API + socket.io

Переходя с Vue 2 на Vue 3, вы, возможно, захотите начать использовать Composition API.

Если вы хотите использовать socket.io, вы можете поискать ‘vue 3 socket.io’ и найти vue-3-socket.io. В readme вы увидите следующее:

this.sockets.subscribe('EVENT_NAME', (data) => {
    this.msg = data.message;
});
Войти в полноэкранный режим Выход из полноэкранного режима

Но Vue 3 Composition API собирается использовать setup() или <script setup>, а this отсутствует.

Поэтому вы должны использовать socket.io напрямую, без плагина Vue:

socket.io.js

export const useSocketIO = () => {
    const socket = io('ws://localhost:3000')
    return {
        socket,
    }
}
Войти в полноэкранный режим Выход из полноэкранного режима

MyComponent.vue

<script>
import { defineComponent } from 'vue'
export default defineComponent({
    setup() {
        const { socket } = useSocketIO()
        socket.on('welcome', () => { console.log('welcome') })
    }
})
</script>
Войти в полноэкранный режим Выход из полноэкранного режима

Но почему бы просто не экспортировать socket из socket.io.js и не импортировать его в компонент? Если я это сделаю, я могу испускать события, но не могу на них подписаться. Возможно, это потому, что я использую Quasar 2 с режимом SSR.

Оцените статью
Procodings.ru
Добавить комментарий