在Vuex中使用websocket协议
提示:这篇文章问ws协议的,在vuex中的使用,大家看好标题哦
前言
博主这边最近的公司做的都是物联网的项目,涉及到要和机器的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(() => {
ws.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)
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。