@

目录

首先在根目录下新建一个store文件夹，并新建一个websocket.js文件，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        socketTask: null,
        eventlist: {},
        unread: []
    },
    mutations: {
        WEBSOCKET_INIT(state, url) {
            // 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
            state.socketTask = uni.connectSocket({
                url,
                // 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
                success(data) {
                    console.log("websocket连接成功");
                },
            });
            // 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
            state.socketTask.onOpen((res) => {
                console.log("WebSocket连接正常打开中...！");
                state.is_open_socket = true;
                // 注：只有连接正常打开中 ，才能正常收到消息
                state.socketTask.onMessage((res) => {
                    console.log("收到服务器内容：" , JSON.parse(res.data));
                    state.eventlist = JSON.parse(res.data)
                    // state.unread.push(JSON.parse(res.data))
                });
            })
        },
        WEBSOCKET_SEND(state, p) {
            console.log("ws发送！");
            state.socketTask.send({
                data: p,
                async success() {
                    console.log("消息发送成功");
                },
            });
        },
    },

    actions: {
        WEBSOCKET_INIT({
            commit
        }, url) {
            commit('WEBSOCKET_INIT', url)
        },
        WEBSOCKET_SEND({
            commit
        }, p) {
            commit('WEBSOCKET_SEND', p)
        }
    }
})

然后在main.js里加入：

import store from './store/websocket.js'
Vue.prototype.$store = store


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

在要使用的页面：

首先引入，可通过 eventlist 获取到服务端推送过来的数据

import { mapState } from 'vuex';


computed: {
    ...mapState(['eventlist'])
}

创建链接

this.$store.dispatch('WEBSOCKET_INIT', 'websocket链接url')

注：（向服务端发送消息）

this.$store.dispatch('WEBSOCKET_SEND', 内容)

最后就大功告成了，工作时遇到了这个问题，就随手封装了一个，欢迎评论区指出不足