uniapp全局使用websocket

我们通过vuex来实现全局状态管理，uniapp中内置了vuex，可以直接引入使用。
在根目录下新建store文件夹，在底下建一个index.js，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        socketTask: null
    },
    mutations: {
        WEBSOCKET_INIT (state, url) {
            state.socketTask = uni.connectSocket({
                url,  // url是websocket连接ip
                success () {
                    console.log('websocket连接成功')
                }
            })
            state.socketTask.onOpen((res) => {
                console.log('WebSocket连接正常打开中...！')
                // 注：只有连接正常打开中 ，才能正常收到消息
                state.socketTask.onMessage(res => {
                    console.log('收到服务器内容：' + res.data)
                });
            })
        },
        WEBSOCKET_SEND (state, data) {
            state.socketTask.send({
               data,
               async success() {
                   console.log('消息发送成功')
               },
           })
        },
        CLOSE_SOCKET (state) {
            if (!state.socketTask) return
            state.socketTask.close({
                success (res) {
                    console.log('关闭成功', res)
                },
                fail (err) {
                    console.log('关闭失败', err)
                }
            })
        }
    },
    actions: {
        WEBSOCKET_INIT({
            commit
                       }, url) {
            commit('WEBSOCKET_INIT', url)
        },
        WEBSOCKET_SEND({
            commit
                       }, data) {
            commit('WEBSOCKET_SEND', data)
        },
        CLOSE_SOCKET({
            commit
                     }) {
            commit('CLOSE_SOCKET')
        }
    }
})

export default store

然后在根目录的main.js文件开头引入：

import store from './store'

再在vue上挂载：

Vue.prototype.$store = store
const app = new Vue({
    ...App,
    store
})

在任意页面都可以全局使用，初始化websocket：

this.$store.dispatch('WEBSOCKET_INIT', 'websocket ip')

发送websocket数据：

this.$store.dispatch('WEBSOCKET_SEND', '发送的数据')

关闭websocket连接：

this.$store.dispatch('CLOSE_SOCKET')