关于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)
   }
 }