vue-socket.io的使用

ts + vue

import store from '@/store'
import { Module, VuexModule, Mutation, Action, getModule } from 'vuex-module-decorators'
import App from '@/main'
import { UserModule } from '@/store/modules/user'

@Module({ dynamic: true, store, name: 'WebSocket' })
class WebSocket extends VuexModule {
  connect_status: Boolean = false // 连接状态
  message: any // 全局消息
  env = process.env.NODE_ENV === 'development'

  @Mutation
  private SOCKET_CONNECT() {
    this.connect_status = true
    if (this.env) console.log('socket连接成功==========>', this.connect_status)
  }
  @Mutation
  private SOCKET_CONNECT_ERROR() {
    this.connect_status = false
    if (this.env) console.log('socket连接失败==========>', this.connect_status)
  }
  @Mutation
  private SOCKET_DISCONNECT() {
    this.connect_status = true
    if (this.env) console.log('socket连接断开==========>', this.connect_status)
  }

  @Mutation
  private SOCKET_NOTIFICATION(message: any) {
    this.message = message
  }

  @Mutation
  private SOCKET_JOINACCOUNTROOM(data: any) {
    App.$socket.emit('joinAccountRoom', {
      accountId: data.accountId,
      userId: data.userId,
    })
  }

  @Action
  socket_connect() {
    this.context.commit('SOCKET_CONNECT')
  }
  @Action
  socket_disconnet() {
    this.context.commit('SOCKET_DISCONNECT')
  }
  @Action
  socket_reconnect() {
    console.log('重连成功')

    // 服务器重启 重新加入私有房间
    const accountId = UserModule.accountId
    const userId = UserModule.userId
    console.log(accountId, userId)
    if (accountId && userId)
      this.context.commit('SOCKET_JOINACCOUNTROOM', {
        accountId,
        userId,
      })
  }
  @Action
  socket_connect_error() {
    this.context.commit('SOCKET_CONNECT_ERROR')
  }

  @Action // notification 与后端 通知的方法名称一致
  socket_notification(message: any) {
    this.context.commit('SOCKET_NOTIFICATION', message)
  }
  @Action // 加入私有房间
  socket_joinAccountRoom(data: any) {
    if (this.connect_status) this.context.commit('SOCKET_JOINACCOUNTROOM', data)
  }
}

export const WebSocketModule = getModule(WebSocket)

在 main.js

Vue.use(
  new VueSocketIO({
    debug: process.env.NODE_ENV === "development",
    connection: process.env.VUE_APP_SOCKET_UEL || "",
    vuex: {
      store,
      actionPrefix: "socket_",
      mutationPrefix: "SOCKET_",
    },
  })
);

在 app.vue 导入 就可以用了

import "@/store/modules/websocket";