Vuex中websocket协议的使用技巧:这篇文章问的是ws协议,是在vuex中使用的。每个人都看好这个称号。后台我们公司使用java实时发送ws协议接收,所以研究了一下这个ws协议的使用,实际测试有效!提示:以下为本文正文内容。以下案例供参考。1、store仓库中的store/index.js代码如下:importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)exportdefaultnewVuex.Store({state:{//推送消息data:{}},getters:{},mutations:{//websocket初始化initWebsocket(state,itemId,userId){constwsUrl='ws://192.168.1.156:80/ws'constws=newWebSocket(wsUrl)//建立连接ws.onopen=function(){/**连接成功**/console.log('communicationstarted')//发送心跳防止ws协议自动断开LinksetInterval(()=>{ws.send(1)},1000*60)}//接收服务器消息ws.onmessage=function(e){/**接收消息时的回调函数**///console.log('Datareceived:',e.data)letdata=JSON.parse(e.data)state.data=e.dataconsole.log(data)}ws.onerror=function(){/**通信异常**/console.log('通信异常')}ws.close=function(){/**关闭连接时的回调函数**/console.log('连接已断开')}}},actions:{},modules:{}})二、在vue中调用App.vue中的代码如下(示例):created(){//初始化websocketthis.initSocket()},methods:{//websocket初始化initSocket(itemId,userId){this.$store.commit('initWebsocket',itemId,userId)}}
