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