websocket在vue中的应用

项目中刚好碰到需要用到websocket的需求，便整理了一下，就当做是笔记吧~~一句话介绍一下需求能让人更直接的明白websocket的用意。例：用户使用的app提交一条数据，管理员所用的电脑在不执行刷新的情况下页面新增出来刚刚用户提交的数据，因为有的时候可能你做的项目比较特殊，警情啊，火灾啊什么的，消息必须实时同步提醒，get？

1.什么是websocket？

简单介绍一下websocket是HTML5出的一个类同于http协议，因为HTTP是不支持持久连接的（长连接，循环连接的不算）像我们普通的开发中后端定义好的接口都是一次一次请求的，websocket的作用是持久性的连接某一个接口

2.websocket在vue项目中的应用

1.这里说一个很重要的点，我在项目中是不管在哪个页面，哪个路由下都要实时进行socket连接，所以我这段代码我是写在app.vue文件中的，这也是下面为什么要存vuex的原因

methods: {
     initWebSocket(){ //初始化weosocket
        const wsuri = `ws://192.168.18.169:8059/websocket/${localStorage.getItem('userId')}`//这个地址由后端童鞋提供
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //连接建立之后执行send方法发送数据
        this.websocketsend(this.user)
        console.log(111);
      },
      websocketonerror(){//连接建立失败重连
        this.initWebSocket()
      },
      websocketonmessage(e){
        let _this = this //数据接收
        if (e.data == '连接成功') {//这个判断是我业务需求才加的
          return
        }
        //业务需求，将socket接收到的值存进vuex
        _this.$store.store.dispatch('RESET_ID') //先调用reset方法置空vuex > store里面的scorketId（为什么置空，下面标题3解释）
        _this.$store.store.dispatch('SAVE_ID', JSON.parse(e.data).areaId) //重新给store中的scorketId赋值（数据格式问题先转了json）
        // console.log(_this.$store.store.state.scorketId);
      },
      websocketsend(Data){//数据发送
        this.websock.send(Data)
      },
      websocketclose(e){  //关闭
        console.log('断开连接', e)
      }
    }

2.在app.vue中连接了websocket之后，每当一条新的socket传过来之后，我们都要让项目自动更新数据（这也是websocket存在的意义），那我已经把socket接收到的数据存进vuex中了，所以我们接下来就是去监听store中的数据变化

3.单个组件监听vuex仓库中的数据变化

在需要执行数据实时更新那个组件中写一个watch监听

  watch: {
      '$store.store.state.scorketId': {
        handler: function(newer, older) {
          //解释一下为什么这里我放了判断，因为我的需求使然，我存在vuex中的是userID，一个用户只有一个id，但可能会提交多条数据，watch只在数据发生变动的时候才执行操作，所以上面我每次都将store里面的数据置空操作。
          if (newer == null) {
            return
          } else {
            this.getList() // methods中定义好的获取数据列表的方法
            console.log(newer);
          }
        },
        deep: true // 开启深度监听
      }
    }

注意：watch不能鉴听非vue机制存放的数据，所以webscorket获取到的数据不能存在localStorage或者sessionStorage里面
写下来到这里你就会发现你已经达到你要的效果了！！！

顺带放一下我vuex下的两行代码吧emmmm.......

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    scorketId: ''
  },
  mutations: {
    SCORKETID (state, obj) {
      state.scorketId = obj
    },
    RESET (state) {
      state.scorketId = null
    }
  },
  actions: {
    SAVE_ID ({commit}, obj) {
      commit('SCORKETID', obj)
    },
    RESET_ID ({commit}) {
      commit('SCORKETID')
    }
  }
})
export default({
  store
})