Vue-Socket.io-Extended 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00086/article/details/139852834

Vue-Socket.io-Extended 使用教程

vue-socket.io-extended :v::zap: Socket.io bindings for Vue.js and Vuex (inspired by Vue-Socket.io) 项目地址: https://gitcode.com/gh_mirrors/vu/vue-socket.io-extended

1. 项目介绍

Vue-Socket.io-Extended 是一个为 Vue.js 和 Vuex 设计的 Socket.io 绑定库。它受到 Vue-Socket.io 的启发，但提供了更多的功能和改进，包括轻量级、依赖自由、响应式属性、动态事件监听、Vuex 集成等。该库旨在简化在 Vue.js 项目中使用 Socket.io 的过程，并提供更好的 TypeScript 支持。

2. 项目快速启动

安装

首先，通过 npm 安装 vue-socket.io-extended 和 socket.io-client：

npm install vue-socket.io-extended socket.io-client

初始化

在 Vue 项目中初始化 Vue-Socket.io-Extended。以下是 ES2015 模块的初始化示例：

import VueSocketIOExt from 'vue-socket.io-extended';
import { io } from 'socket.io-client';

const socket = io('http://socketserver.com:1923');

Vue.use(VueSocketIOExt, socket);

使用

在 Vue 组件中使用 Socket.io 事件监听器：

new Vue({
  sockets: {
    connect() {
      console.log('socket connected');
    },
    customEmit(val) {
      console.log('this method was fired by the socket server, eg: io.emit("customEmit", data)');
    }
  },
  methods: {
    clickButton(val) {
      // this.$socket.client is `socket.io-client` instance
      this.$socket.client.emit('emit_method', val);
    }
  }
});

3. 应用案例和最佳实践

动态事件监听

在某些情况下，你可能需要在特定条件下动态创建事件监听器。以下是一个示例：

// 创建事件监听器
this.$socket.$subscribe('event_name', payload => {
  console.log(payload);
});

// 移除现有监听器
this.$socket.$unsubscribe('event_name');

Vuex 集成

Vue-Socket.io-Extended 支持与 Vuex 的集成，可以自动分发 Vuex 的 actions 和 mutations。以下是一个示例：

import VueSocketIOExt from 'vue-socket.io-extended';
import { io } from 'socket.io-client';
import store from './store';

const socket = io('http://socketserver.com:1923');

Vue.use(VueSocketIOExt, socket, { store });

在 Vuex store 中，你可以定义与 Socket.io 事件对应的 mutations 和 actions：

export default new Vuex.Store({
  state: {
    messages: []
  },
  mutations: {
    SOCKET_CHAT_MESSAGE(state, message) {
      state.messages.push(message);
    }
  },
  actions: {
    socket_chatMessage({ commit }, message) {
      commit('SOCKET_CHAT_MESSAGE', message);
    }
  }
});