socket连接失败 权限_websocket长连接和公共状态管理方案（vuex + websocket or redux + websocket ）...

 一 为什么将websocket和公共状态管理扯到一起

我们都知道在vue和react这种单页面组件化项目中，建立socket连接会遇到:重复连接，切换页面连接中断 ,状态丢失等问题，而且如果想要在任何页面接受到来自socket传递的信息，所以在建立socket连接时候就要考虑是否要把连接实例化放在公共state里边统一管理，这样可以方便在任何组件中调用socket方法。这里会介绍socket与Vuex和redux进行连接实时接受信息改变数据的方案。

此方案根本解决问题:

① 根本上解决单页面组件重复连接，切换页面组件连接中断，状态丢失等问题。

② 状态统一管理，统一调度中心。任意页面共享数据源，任意页面实现推送数据。

③ socket连接层面和组件层面的耦合程度降到最低。

二 websocket与公共状态管理逻辑图

总结

本方案的大体思路就是如上图所示，现在页面初始化的时候根据需要向vuex或者redux发起dispatch触发初始化的方法，初始化的时候触发websocket,js构造函数或者类的实例，并且要把改变公共状态方法的commit作为参数传递给socket实例 ， 而真正建立起socket连接的方法实在webosocket实例中进行的，websocket实例会暴露出两个方法，一个subscribe用来监听服务端传递的信息来改变管理状态，当然这里的触发是根据调用commit函数来触发的，另一个是又任意组件调用的emit方法 ，来把信息传递给服务端，从而实现了双向通信，并把通信回执内容放在公共状态管理，避免切换组件信息丢失，重新连接，丢失连接等情况发生。下面会拿vuex例子具体讲一下流程。

三 成功案例(websocket与vue及vuex为例子)

1 方案结构及其初始化流程

目录文件

以上就是文件的格式(这里简化了)， websocket.js就是socket调度中心(此方案的核心)，里边集成了订阅器，发布器，失败调度，心跳机制的等等 ， vuex下边的socket.js就是一个vuex模块, 在dva中可以理解成一个model, 

socket.vue就是要用到socket连接的组件，废话不说，下面一一解释。

在页面组件中初始化

首先我们来看socket初始化。

 if (!socket.ws) {
                //在socket.vue文件中初始化socket连接     this.$store.dispatch('socketInit') }

这是只是单独触发了一个dispatch ,  在调用了一个socketInit方法，然后我们来看vuex中socket.js中的socketInit方法。

import Socket from '../websocket' //socket 方法类import socketAction from '../../config/socket' //这个是对服务端