vuex与websocket结合使用实现消息更新推送

 

项目描述：一个价格实时更新案例。每一次有人出价，服务端推送最新价格，通过websocket拿到最新价格，渲染到前台页面。

问题：1.如何在页面刷新后还保持上一次最新价格的显示

解决方法：

新建文件目录store：并建立各个js文件

main.js中引入

import vuex from 'vuex'
import store from './store'

Vue.use(vuex);


new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

store文件下的index.js

import Vue from 'vue'
import Vuex from 'vuex'

import state from './state'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'

Vue.use(Vuex);

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
})

state.js文件：

//存储数据
const state={
    //推送消息
    imMessages:{}
};
export default state;

mutations.js

注意：在使用localStorage存值的时候注意值的类型，这个地方建议去看一下从vuex取出的值打印到前台是什么格式的。关于vuex取值的格式推荐博客：https://blog.csdn.net/qq_20757489/article/details/84930466。注意值的格式的转换

const mutations= {
    //websocket初始化
    initWebsocket(state,itemId,userId){
        const wsUrl='websocket链接地址';
        const ws=new WebSocket(wsUrl);
        //建立连接
        ws.onopen=function () {
            let communicationMessage=new Socket.CommunicationMessage(null,itemId, userId, null, null);
            let dataContent=new Socket.DataContent(Socket.MsgActionEnum.CONNECT,communicationMessage,null);
            //调用send向服务器发送数据
            if(ws.readyState===1){
                ws.send(JSON.stringify(dataContent));
            }
        };
        //接收服务端消息
        ws.onmessage=function (e) {
            state.imMessages=JSON.parse(e.data);
            console.log('state中数据已更新');
            window.localStorage.setItem('imMsg',JSON.stringify(state.imMessages));
        };
        ws.close=function () {
            console.log('连接已断开');
        }
    },
};
export default mutations;

getters.js

注意：1.从localStorage取值时格式问题。

          2.这个地方为什么要判断？因为第一次没人出价，是原始价格，就不存在当前价格消息的推送。如果不判断，在前台取值时会报错

const getter={
    //当前推送值
   getLocalData(state){
       if(state.imMessages){
           state.imMessage=JSON.parse(window.localStorage.getItem('imMsg'));
       }else{
           state.imMessage='';
       }
       return state.imMessage;
   }
    
};
export default getter;

item.vue页面

 <div class="currentFlag" v-else-if="itemDetails.itemStatus==currentStatus">
                            <div class="countDown">
                                剩余竞价时间
                                <CountDown
                                        @start_callback="countDownS_cb(1)"
                                        @end_callback="countDownE_cb(1)"
                                        :currentTime="new Date().getTime()"
                                        :startTime="startTime"
                                        :endTime="endTime"
                                        :dayTxt="'天'"
                                        :hourTxt="'小时'"
                                        :minutesTxt="'分钟'"
                                        :secondsTxt="'秒'">
                                </CountDown>
                            </div>
                            <div class="currentPrice">当前价：<span>{{updateLocalData?updateLocalData.extend.data.price:itemDetails.startPrice}}元</span></div>

 created() {
            //初始化websocket
            this.initSocket(this.itemId,null); 
        },
        computed:{
            //获取推送消息内容
            updateLocalData(){
                return this.$store.getters.getLocalData;
            },
        },
        methods:{   
            //websocket初始化
            initSocket(itemId,userId){
                this.$store.commit('initWebsocket',itemId,userId)
            },
        },

注意：1.mutation中的方法要通过commit提交

          2.Vuex在组件中computed中使用的时候，计算属性不能和state的数据项同名（同名了也不会报错，就是获取不了数据了）

总结：过程中细节点比较多，如数值格式转化问题，computed和函数生命周期钩子函数执行先后的问题，再就是不理解还是去看看官方文档，很多细节解释的很清楚