websocket在vue中的应用

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…

```javascript
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
})