提示：这篇文章问ws协议的，在vuex中的使用，大家看好标题哦
文章目录
- 在Vuex中使用websocket协议
- 前言
- 一、store仓库中
- 二、vue中调用
前言
博主这边最近的公司做的都是物联网的项目，涉及到要和机器的COM口数据进行对接，后台的话我们公司是用的java，实时发送ws协议这边来接受，所以研究了一下这个ws协议的使用，实测管用！
提示：以下是本篇文章正文内容，下面案例可供参考
一、store仓库中store/index.js代码如下示例
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//推送消息
data: {}
},
getters: {
},
mutations: {
//websocket初始化
initWebsocket(state, itemId, userId) {
const wsUrl = 'ws://192.168.1.156:80/ws'
const ws = new WebSocket(wsUrl)
//建立连接
ws.onopen = function() {
console.log('通讯开始')
// 发送心跳防止ws协议自动断联
setInterval(() => {
state.webSocket.send(1)
}, 1000 * 60)
}
//接收服务端消息
ws.onmessage = function(e) {
// console.log('收到的数据：', e.data)
let data = JSON.parse(e.data)
state.data = e.data
console.log(data)
}
ws.onerror = function() {
console.log('通讯异常')
}
ws.close = function() {
console.log('连接已断开')
}
}
},
actions: {},
modules: {}
})
二、vue中调用
App.vue中代码如下（示例）：
created() {
//初始化websocket
this.initSocket()
},
methods: {
//websocket初始化
initSocket(itemId, userId) {
this.$store.commit('initWebsocket', itemId, userId)
}
}
