uniapp插件@i5920/uni-socket的使用

安装插件

npm i @i5920@uni-socket -S

使用方法

1. 在根目录下新建文件websocket.ts(js自己改一下)

import UniSocket from '@i5920/uni-socket'
import store from '@/store'
const websocket = new UniSocket({
  url: process.env.VUE_APP_BASE_SOCKET,
  onSocketMessage (_: any) {
    if (!_ || !_.event || _.event.indexOf('.') === -1) return
    const events = _.event.replace('\.', '\/')
    store.commit(events, _.data || null)
  }
})

interface SendMessageOption {
  event: string,
  data?: object
}

export const sendMessage = (data: SendMessageOption) => {
  websocket.sendSocketMessage({
    event: data.event,
    data: data.data
  })
}

export default websocket

2. main.ts引入websocket

import Websocket from './websocket'
Vue.prototype.$websocket = Websocket

3. App.vue初始化

onShow() {
    // @ts-ignore
    this.$websocket.initSocket()
}

4. store文件调用webscoket

import { sendMessage } from '@/websocket'
const actions = {
  // 获取轮播图
  getBanners(context: any, cid: number = 0) {
    sendMessage({
      event: 'bannerList',
      data: { cid }
    })
  }
}