uniApp两种WebSocket的全局实现方式

在正式项目中用到webSocket的时候大部分情境下都需要全局使用，几天就来封装一个全局使用的WebSocket。

目前两种方式可以实现，第一种是使用vuex来实现全局状态管理，第二种是js的原型来实现。无论用哪一种都实现方式都差别不大。

1、首先看下Vuex实现方式

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

编辑好store之后就需要在main.js文件没引入

import store from './store'


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

之后就可以全局使用了，无论在那个组件内都可以使用

初始化

this.$store.dispatch('WEBSOCKET_INIT', 'websocketIp')

 发送socket数据 

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

关闭WebSocket

this.$store.dispatch('CLOSE_SOCKET')

2、再来看一下使用原型实现方式

在main.js文件内编写socket方法

Vue.prototype.socketTask = null;

Vue.prototype.$webSocketInit = function (ip){
    this.socketTask = uni.connectSocket({
        url: ip, // socket链接IP
        success(){
            console.log('webSocket链接成功')
        }
    })
}

Vue.prototype.$webSocketSend = function (data){
    this.socketTask.send({
        data,
        sync success (res){
            console.log('webSocket消息发送成功')
        }
    })
}

Vue.prototype.$closeWebSocket = function (){
    if(!this.socketTask){
        return
    }
    this.socketTask.close({
        success (res) {
            console.log('webSocket关闭成功', res)
        },
        fail (err) {
            console.log('webSocket关闭失败', err)  
        }
    })
}

接下来就可以使用了，可以在任何页面使用一下方式调用

初始化

this.$webSocketInit(WebSocket); // 传入socket链接IP

 发送socket数据  

this.$webSocketSend('发送的数据');

关闭WebSocket

this.$closeWebSocket()

到此两种实现方式以及使用方式都已经完成了，两种方式也是基本相似。

本文章以学习交流为主，如有不同意见望大家指正