Socket.io implementation for Vue.js 3.0
MIT License
npm install @hlf01/vue3-socket.io
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')
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')
<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 | Types | Default | Required | Description |
---|---|---|---|---|
connection | String/Socket | null |
Required | Websocket server url or socket.io-client instance. |
debug | Boolean | false |
Optional | Enable logging for debug. |
options | Partial<ManagerOptions & SocketOptions> | null |
Optional | Socket.io options for connection and configuration. See socket.io-client options documentation for more information. |