关于vue.js:在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(() => {
          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)
   }
 }