oa项目经验描述_项目经验总结

项目中前端开发问题经验总结

ie下websocket的安全限制问题

问题描述：

数据看板中的数据大部分都是实时数据或前一天统计的历史数据，因此这边后端考虑采用websocket来实时和定时推送数据来保证数据的实时性和有效性。而前端开发这边为了提高前端开发的复用性，采用了在各个组件中开发成一个个的小部件，然后在门户通过vue异步动态加载的方式来实现，小部件的组装拼接。 因此在组件中开发的小部件都是单vue页面。因此出现了有几个小部件就有几个websocket,目前我这边就出现了7个websocket。

问题现象：

在ie浏览器下，打开时就会发现报错。IE控制台会报SecurityError错误。

解决方法：

造成上述现象的原因是ie下websocket连接做了安全限制，如果websocket连接超过6个时，那么就会连接失败。默认最大连接数为6个。

那么如何避免报错呢？

当然ie下的限制我们是不好修改的，如果真的强制修改，那么可以通过修改注册表来修改最大连接数(当然这边是不建议的，不可能让客户区修改浏览器注册表的)。

那么我们需要的就是避免多个websocket的连接。

2个思路：

使用websocket之前先思考，是否真的有必要使用wesocket??

如果是实时推送，定时推送这些场景，那么完全没有必要使用websocket，前端可通过定时器来实现相同的功能。因此能避免使用就避免使用。

如果是报警等未知的推送，那么我们就是必须要使用websocket的，而且如果正好应用在了看板小部件上。那么还是会出现7个websocket的情况。所以这种情况下就需要和后端沟通，一个项目采用一个websocket服务，通过type来区分。那么看板就只有一个websocket了。可是现在看板的小部件都是独立，如何去实现一个websocket？那么需要借助一下事件通信。如下：

a.vue

created () {

this.$root.eventBus = new Vue()

this.init()

},

methods: {

init (i) {

let ws = new WebSocket()

ws.onmessage = (data) => {

this.$root.eventBus.$emit('websocket', data)

}

}

}

b.vue

created () {

this.$root.eventBus.$on('websocket', () => {

// 处理推送的数据

})

}

我们知道我们的小部件都是通过在门户，通过vue动态加载组件的方式来形成看板的，那么所以小部件就都会在门户这个vue实例对象下。所以可以采用this.$root下挂在一个vue实例来实现事件的传递

备注&