在Vuex中使用websocket协议

在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)
   }
 }

---