Интеграция Vue.js и Socket.io

Веб-сокеты — это мощный способ обеспечения двунаправленной связи между клиентом и сервером, а socket.io — одна из ведущих библиотек, упрощающая обработку соединений с помощью веб-сокетов и альтернативных транспортов. Давайте объединим его с Vue, чтобы иметь возможность использовать socket.io непосредственно в наших компонентах!

Монтаж

Сначала давайте установим socket.io-client и vue-socket.io с помощью Yarn или NPM.

# Yarn
$ yarn add socket.io-client vue-socket.io
# NPM
$ npm install socket.io-client vue-socket.io --save

Применение

Для целей этого руководства мы предполагаем, что у вас уже есть сервер, работающий с socket.io локально, скажем, на порту 4113.

Сначала включите подключаемый модуль vue-socket.io в файле запуска вашего приложения:

import Vue from 'vue';
import socketio from 'socket.io';
import VueSocketIO from 'vue-socket.io';

export const SocketInstance = socketio('http://localhost:4113');

Vue.use(VueSocketIO, SocketInstance)

// The usual app stuff goes here.
...

Теперь мы можем привязываться к событиям сокета непосредственно в наших компонентах:

<template>
  <div>
    <p v-if="isConnected">We're connected to the server!</p>
    <p>Message from server: "{{socketMessage}}"</p>
    <button @click="pingServer()">Ping Server</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isConnected: false,
      socketMessage: ''
    }
  },

  sockets: {
    connect() {
      // Fired when the socket connects.
      this.isConnected = true;
    },

    disconnect() {
      this.isConnected = false;
    },

    // Fired when the server sends something on the "messageChannel" channel.
    messageChannel(data) {
      this.socketMessage = data
    }
  },

  methods: {
    pingServer() {
      // Send the "pingServer" event to the server.
      this.$socket.emit('pingServer', 'PING!')
    }
  }
}
</script>

Интеграция с Vuex

Если вы используете Vuex, вы можете запустить мутации хранилища, когда каналы сокетов получают сообщения, просто добавив свое хранилище Vuex в инициализацию плагина в main.js.

...
import { MyVuexStore } from './my-vuex-store.js'

Vue.use(VueSocketIO, SocketInstance, MyVuexStore)
...

Все мутации, вызванные сокетами, имеют префикс SOCKET_.

Так, например, если ваш канал называется messageChannel, соответствующая мутация Vuex будет SOCKET_MESSAGECHANNEL. В конфигурации вашего магазина это будет выглядеть так:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isConnected: false,
    socketMessage: ''
  },

  mutations:{
    SOCKET_CONNECT(state) {
      state.isConnected = true;
    },

    SOCKET_DISCONNECT(state) {
      state.isConnected = false;
    },

    SOCKET_MESSAGECHANNEL(state, message) {
      state.socketMessage = message
    }
  }
})

Не плохо а?

Для получения более подробной информации ознакомьтесь с документацией по socket.io.