vue-socket.io-extended

import Vue from 'vue'; import VueSocketIOExtended from 'vue-socket.io-extended'; import { io } from 'socket.io-client'; // Assuming a Socket.io server is running at http://localhost:3000 const socketInstance = io('http://localhost:3000'); // Optional: Import your Vuex store if you're using it // import store from './store'; Vue.use(VueSocketIOExtended, socketInstance, { // Pass your Vuex store here if needed // store: store, // Optional: Set custom event transformers for Vuex (e.g., to match custom naming conventions) // actionPrefix: 'SOCKET_', // Default // mutationPrefix: 'SOCKET_' }); new Vue({ el: '#app', data: () => ({ message: 'Waiting for messages...' }), sockets: { connect() { console.log('Socket connected successfully!'); this.message = 'Connected to server!'; }, disconnect() { console.log('Socket disconnected.'); this.message = 'Disconnected from server.'; }, // Listen for a custom 'chatMessage' event from the server chatMessage(data: string) { console.log('Received message:', data); this.message = `Received: ${data}`; } }, methods: { // Emit a 'sendMessage' event to the server sendMessage(payload: string) { if (this.$socket.connected) { this.$socket.emit('sendMessage', payload); console.log('Sent message:', payload); } else { console.warn('Socket not connected, message not sent.'); } } }, mounted() { this.sendMessage('Hello from Vue.js!'); }, template: ` <div id="app"> <h1>Vue-Socket.io-Extended Example</h1> <p>{{ message }}</p> <button @click="sendMessage('Ping from client!')">Send Ping</button> <p>Connection Status: {{ $socket.connected ? '🟢 Connected' : '🔴 Disconnected' }}</p> </div> ` });