Socket.io Bindings for Vue.js and Vuex

4.2.0 · active · verified Sun Apr 19

Vue-Socket.io-Extended is a robust library that provides seamless integration of Socket.io with Vue.js applications, including comprehensive support for Vuex state management. The current stable version is `4.2.0`, which targets Vue 2.x. Development is active for `v5.0.0-alpha` releases, which introduce support for Vue 3.x. The project aims to offer a more stable, tested, and feature-rich alternative to its inspiration, Vue-Socket.io, focusing on aspects like reactive properties for connection status, automatic dispatching of Vuex actions/mutations based on socket events, and strong TypeScript support. Its release cadence shows periodic updates, with significant work being done for the next major Vue 3 compatible version. It differentiates itself with lightweight design, good TypeScript support (including decorators), and flexibility in handling Socket.io client versions.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart initializes Vue-Socket.io-Extended with a Socket.io client, demonstrates listening for connection status and custom events, and shows how to emit events from a Vue component. It targets Vue 2.x, the stable version.

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>
  `
});

view raw JSON →