uniApp两种WebSocket的全局实现方式

时间：2025-01-30 07:43:37

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

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

1、首先看下Vuex实现方式

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

const store = new ({
    state: {
        socketTask: null
    },
    mutations: {
        WEBSOCKET_INIT (state, url) {
             = ({
                url,  // url是websocket连接ip
                success () {
                    ('websocket连接成功')
                }
            })
            ((res) => {
                ('WebSocket连接正常打开中...！')
                // 注：只有连接正常打开中 ，才能正常收到消息
                (res => {
                    ('收到服务器内容：' + )
                });
            })
        },
        WEBSOCKET_SEND (state, data) {
            ({
               data,
               async success() {
                   ('消息发送成功')
               },
           })
        },
        CLOSE_SOCKET (state) {
            if (!) return
            ({
                success (res) {
                    ('关闭成功', res)
                },
                fail (err) {
                    ('关闭失败', 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之后就需要在文件没引入

import store from './store'


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

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

初始化

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

 发送socket数据 

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

关闭WebSocket

this.$('CLOSE_SOCKET')

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

在文件内编写socket方法

 = null;

.$webSocketInit = function (ip){
     = ({
        url: ip, // socket链接IP
        success(){
            ('webSocket链接成功')
        }
    })
}

.$webSocketSend = function (data){
    ({
        data,
        sync success (res){
            ('webSocket消息发送成功')
        }
    })
}

.$closeWebSocket = function (){
    if(!){
        return
    }
    ({
        success (res) {
            ('webSocket关闭成功', res)
        },
        fail (err) {
            ('webSocket关闭失败', err)  
        }
    })
}

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

初始化

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

 发送socket数据  

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

关闭WebSocket

this.$closeWebSocket()

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

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

相关文章