置顶微信小程序全局使用websocket精选热门

2022-08-16

7468浏览

0评论

微信小程序全局使用websocket

这里说点题外话: 服务器必须要wss,不然推送不了.

我们通过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