@hlf01/vue3-socket.io

Description

• Socket.io implementation for Vue.js 3.0.
• Based on MetinSeylan/Vue-Socket.io.
• Only Support Vue3.

Installation

npm install @hlf01/vue3-socket.io

Example

Register

Using Connection String

import { createApp } from 'vue'
import App from '@/App.vue'
import Vue3SocketIO from '@hlf01/vue3-socket.io';

const vue3SocketIO = new Vue3SocketIO({
    debug: true,
    connection: 'https://example.com',
    options: { path: "/my-app/" } //Optional options
});

const app = createApp(App)

app.use(vue3SocketIO)

app.mount('#app')

Using socket.io-client Instance

import { createApp } from 'vue'
import App from '@/App.vue'
import SocketIO from 'socket.io-client';
import Vue3SocketIO from '@hlf01/vue3-socket.io';

const options = { path: "/my-app/" };
const vue3SocketIO = new Vue3SocketIO({
    debug: true,
    connection: SocketIO('https://example.com', options),
});

const app = createApp(App)

app.use(vue3SocketIO)

app.mount('#app')

Usage

<script setup>
import { onMounted, inject } from "vue";
import { useSocketIO } from "@hlf01/vue3-socket.io";

const socketIO = useSocketIO();
const socket = inject("socket");

onMounted(() => {
    socketIO.subscribe("connect", () => {
        console.log("Socket connected:", socket.id);
    });

    // Custom event name
    socketIO.subscribe("getMessages", (messages) => {
        console.log("Received messages:", messages);
    });
});

// All event listeners will be unsubscribed automatically once the component is unmounted

function unsubscribeEvent(eventName) {
    // Unsubscribe event for current instance
    socketIO.unsubscribe(eventName);
}

function removeEvent(eventName) {
    // Unsubscribe event for all instance
    socketIO.removeEvent(eventName);
}

function sendMessage(message) {
    // Emit event
    socket.emit("sendMessage", message);
}
</script>

Parameters