在上一篇《uniapp全局使用websocket》中有人提出没有写websocket
接收数据,现在继续完善优化一下我们store
文件夹底下的index.js
文件,代码如下:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
socketTask: null,
websocketData: {}, // 存放从后端接收到的websocket数据
},
mutations: {
setWebsocketData (state, data) {
state.websocketData = data
}
},
actions: {
websocketInit ({ state, dispatch }, url) {
state.socketTast = uni.connectSocket({
url, // url是websocket连接ip
success: () => {
console.log('websocket连接成功!')
},
fail: e => {
console.log('连接失败' + e)
}
})
state.socketTast.onOpen(() => dispatch('websocketOnOpen'))
state.socketTast.onMessage(res => dispatch('websocketOnMessage', res))
state.socketTast.onClose(e => dispatch('websocketOnClose'))
state.socketTast.onError(e => dispatch('websocketOnError'))
},
websocketOnOpen ({ commit }) {
console.log('WebSocket连接正常打开中...!')
},
// 收到数据
websocketOnMessage ({ commit }, res) {
console.log('收到服务器内容:' + res.data)
if (res.data !== '连接成功') {
commit('setWebsocketData', (res && JSON.parse(res.data) || null))
}
},
websocketOnClose ({ commit, dispatch }) {
console.log('WebSocket连接关闭')
},
websocketOnError ({ commit, dispatch }) {
console.log('WebSocket连接错误')
},
websocketClose ({ state }) {
if (!state.socketTast) return
state.socketTast.close({
success (res) {
console.log('关闭成功', res)
},
fail (err) {
console.log('关闭失败', err)
}
})
},
// 发送数据
websocketSend ({ state }, data) {
uni.sendSocketMessage({
data,
success: res => {
console.log('发送成功', res)
},
fail: e => {
console.log('发送失败', e)
}
})
}
}
})
export default store
在任意页面都可以全局使用,初始化websocket
:
this.$store.dispatch('websocketInit', 'websocket ip')
发送websocket
数据:
this.$store.dispatch('websocketSend', '发送的数据')
关闭websocket
连接:
this.$store.dispatch('websocketClose')
需要使用接收到的websocket
数据就在任意页面调用this.$store.state.websocketData
即可。
本文主要还修改了websocket
相关方法的位置,从mutations
统一都移到了actions
,以上涉及到vuex
的使用就不在赘述了,具体可以看我另一篇博客《Vuex学习笔记》,有问题可以评论指出