websocket通信 vuex 全局封装
最近公司要用weboscket,但是要全局用,因为我们是想把导航上加上小红点,所以相对来讲比较简单,本人属于socket研究阶段
// import Cookies from 'js-cookie'
//后端给的端口号
const wsuri = ‘ws:/xxxxxxxx’
const websocket = {
state: {
websock: null,
websockData: [],
system: [],
comment: []
},
mutations: {
STAFF_UPDATEWEBSOCKET(state, websock) {
state.websock = websock
},
STAFF_websocketonmessage(e) { // 数据接收
const redata = JSON.parse(e.data)
// console.log('111')
console.log(redata)
},
STAFF_red(e) { // 数据接收
// const redata = JSON.parse(e.data)
// console.log('111')
console.log(e)
// alert('55')
}
// websocketonmessage
// STAFF_SEND (state, text) {
// state.websock.send(text)
// }
},
actions: {
STAFF_WEBSOCKET({ commit }) {
// alert('55')
commit('STAFF_UPDATEWEBSOCKET', new WebSocket(wsuri))
// console.log('453453')
// const token = encodeURI('Bearer ' + store.state.token)
// console.log(websocket.state.websock, 'this.state.websock--')
// 只有定义了onopen方法,才能继续实现接收消息,即在使用的地方调用onmessage方法。
websocket.state.websock.onopen = function() {
var data = {}
data['auth'] = ''
data['type'] = ''
// data['uid'] = Cookies.get('uid') - 0
data['uid'] = 4
data['project'] = ''
console.log(JSON.stringify(data), '--------datga')
// this.websocketsend(JSON.stringify(data))
websocket.state.websock.send(JSON.stringify(data))
}
websocket.state.websock.onmessage = function(e) {
// alert('444')
const redata = JSON.parse(e.data)
websocket.state.websockData.push(redata)
if (redata.message.type === 'system') {
websocket.state.system.push(redata._id)
}
if (redata.message.type === 'comment') {
websocket.state.comment.push(redata._id)
}
}
// 心跳包,30s左右无数据浏览器会断开连接Heartbeat
// setInterval(function() {
// websocket.state.websock.send(JSON.stringify({
// 'heart': true
// }))
// }, 30000)
},
FUN_send({ commit }) {
// alert('55')
commit('STAFF_red')
// websocket.state.websock.send(JSON.stringify(data))
setTimeout(function() {
var data = {}
data['auth'] = ''
data['type'] = 'read_message'
data['project'] = ''
data['_id'] = websocket.state.comment.join(',') // 测试建议修改服务端传过来的id
// console.log(websocket.state.comment.join(','), '-commentcomment----')
websocket.state.comment = []
websocket.state.websock.send(JSON.stringify(data))
}, 100)
},
FUN_sendsystem({ commit }) {
// alert('666')
commit('STAFF_red')
// websocket.state.websock.send(JSON.stringify(data))
setTimeout(function() {
var data = {}
data['auth'] = ''
data['type'] = 'read_message'
data['project'] = ''
data['_id'] = websocket.state.system.join(',') // 测试建议修改服务端传过来的id
console.log(websocket.state.system.join(','), '-system----')
websocket.state.system = []
websocket.state.websock.send(JSON.stringify(data))
}, 100)
}
}
}
// const
// const
// 实现websocket的连接,需要携带参数token
// const
// 该部分为了获取websocket的相关方法。会发现此处跟mutations 里的写法是类似的,但是,想使用return,需要将相关数据写在getters里面。
// const getters = {
// STAFF_UPDATE(state) {
// return state.websock
// }
// }
// export default {
// state,
// mutations,
// actions,
// getters
// }
export default websocket