前端与后台交互
由于最近和大牛聊天,所得一些感悟,写下来,以勉励自己
- 交互方式
-
http请求(问答模式) 通过传统的发送请求接收相应,一问一答的模式获得数据,主要负责传递参数,接收数据模版,渲染数据,对数据几乎不操作
- 轮询(用于获取最新的数据)
- 对于数据的实时性有要求时,可以采用轮询的方式,隔几秒钟发送一次请求询问后台是否有最新的数据,如果接收到了最新的数据,便更新自己的视图层(推荐)
- 可以每次都请求后台获取最新的数据,查库(行为),之后在前端判断上次数据和这次接收数据是否一致,不一致便更新视图
- 每次请求后台获取最新数据,之后直接更新视图(不推荐)
- 注意
- 需设置轮询次数(最大轮询值) 当轮询100(假定值)次还未接收到最新的数据时,便可以将此条轮询去除
- 离开或销毁页面时需清理轮询
- 轮询(用于获取最新的数据)
-
websocket模式
通过websocket进行服务器长连接,服务器端负责判断是否有最新数据,当发现最新数据便向前端主动推送
-
数据实时性
由于是服务器端推送的消息,几乎是事件发生便将数据推送给了前端
-
键权
由于是长连接,对于web端的数据来源需要强验证,利用参数健全(地址+每次发送消息时携带信息),如果携带的secret / key不正确时,服务器端便主动中断连接
-
断网重连
由于受到网络或其他因素的影响,socket连接有时会中断,这个时候需要被断端主动发送一次请求用于重新建立连接(onError、onClose)
需要设置重新连接的次数,当超过limit时变将尝试连接取消
addWebsocket(token) { const URL = `wss://xxx.com` try { this.websocket = new WebSocket(`${URL}/monitor/real-time?token=${token}`) // this.websocket.binaryType = "arraybuffer"; this.websocket.addEventListener('open', (event) => { this.isReconnect = true this.recTimes = 0 }) this.websocket.addEventListener('error', () => { if (this.recTimes < 3) { setTimeout(() => { this.addWebsocket(token) },1000) this.recTimes = this.recTimes + 1 } else { this.isReconnect = false; } }) this.websocket.addEventListener('close', () => { if (this.isReconnect) { if (this.recTimes < 59) { this.recTimes = this.recTimes +1 this.addWebsocket(token) } else { this.isReconnect = false; } } }) this.websocket.addEventListener('message', this.handleMessage) } catch(e) { this.addWebsocket(token) } 复制代码
-
-