如何实现websocket多页面长连接

最近做即时通信app出现了websocket无法在多页面长连接，找了下网上还没有一个方案解决类似问题，很是头疼，很多人可能会在页面用到时新建一个websocket，然后不用时直接销毁掉，这是一种办法，但是随之而来会导致一个项目多页面创建了多个websocket对象，这样肯定对违背数据请求和性能优化，那么在只创建一个websocket的情况下如何实现多页面的长连接呢？
1 通过iframe去嵌套页面，事实上这种逻辑和把多页面压缩成单页面应用差不多，如果是PC端项目，iframe出现的bug可能比较少，但是如果做移动端项目，可能会踩很多坑，那么有没有较好的方法实现多页面共享websocket连接？
2 在vue框架下，用户通过路由跳转新页面, 根组件被重新创建, 此时在根目录下的钩子函数created可以拿来判断是否断开websocket，比如A->B->C->D页面，同时可以B->E->F页面，都是通过路由跳转，此时B，C，E，F都需要调用同一个websocket接口，我们可以采用这种方法，我的根组件是app.vue

我在A页面直接创建一个判断是否新建websocket的布尔值connSocket,因为B页面要用到，所以我在A页面跳转B页面时直接把connSocket设为true储存到本地，这样在跳转B实现了websocket的第一次新建，此时最重要的一步，把新建的websocket对象ws提升到全局windows当中，目的为了方便我在C，E，F页面都可以拿到ws对象，在B页面跳向别的页面时，因为会出发到根目录的钩子函数，我们必须把connSocket设为false,避免再次新建websocket对象，同理，页面回退也会触发钩子函数，connSocket依旧设为false避免新建websocket,到此为止，你就可以在C，E，F上直接console.log(ws)了，然后根据参数封装数据开始实现功能啦。
最后要提醒的时，websocket不用时需要关闭，如B回退到A时，这时候不需要用到websocket了，我们可以ws.close()手动关掉。简单来说就是通过储存一个开关去控制websocket的生命周期并把他作用域全局，好了到此为止，大家如果有这个问题可以尝试这样解决。