1、文件上传
背景:
项目基于jquery
,文件列表中有文件上传功能,点击上传按钮,弹出模态框,在模态框的形式选择文件,进行上传。
遇到的问题:
- 无法关闭模态框,进而无法切换页面,无法进行其他操作(关闭模态框,无法查看文件上传的进度)
- 大文件上传时,中间如果失败了,需要重头开始上传,使用不友好
解决方法:
- 将模态框改为普通弹框,显示在页面最上方,可以进行拖拽、放大和缩小
在盒子里拖拽:
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
在父元素内拖拽:
$( "#draggable5" ).draggable({ containment: "parent" });
- 对大文件进行切片上传和断点续传,见文件上传笔记
- 后期将
juqery
改为vue
,单页面应用,切换页面,不回影响上传弹框
2、websocket
背景: 开发一个站内信的功能,要求要实时通讯,选择使用 websocket
进行前后端通信。
步骤:
- 实例化一个 WebSocket:
new WebSocket(url)
,url 中,如果是 http 协议就使用 ws,如果是 https 就使用 wss - 使用
onopen
方法建立连接 - 通过
onmessage
获取后端传给前端的数据 - 通过
send
给后端传递数据 - 通过
onerror
onclose
去做其他的一些处理
问题: 经测试,某些情况下连接会断开
解决: 使用心跳检查,协定好前后端传递的数据、前后端穿数据的时间间隔、连接最大次数
- 每隔一定的时间,前端给后端传递一个协定好的字段,如
ping
- 后端接收到这个字段后,给前端返回一个协定好的字段,如
pong
- 在上面的过程中,如果超过指定的时间,后端还没有返回需要的字段,前端就要尝试重新连接
- 如果超过最大的连接次数,就不在进行重连,否则接续尝试连接,直到连上为止
connectWebSocket () {if(window.webSocket == undefined || window.webSocket == null) {// socket 地址var url = 'ws://' + websocketUrl + account;// 实例化 WebSocket 对象window.webSocket = new WebSocket(url);// 建立 WebSocket 连接window.webSocket.onopen = () => {_that.longstart(); // 成功建立连接后,创建心跳检测};// 前端获取到后端通过 onmessage 返回到数据window.webSocket.onmessage = (evt) => {_that.longstart(); //心跳重置}// 监听连接失败window.webSocket.onerror = () => {this.websocketonerror("webSocket.onerror")};// 监听连接关闭window.webSocket.onclose = () => {this.websocketonerror("webSocket.onclose")}} else {this.retryNum ++;window.webSocket = nullthis.websocketonerror() //连接失败时,进行重连}
}websocketonerror() {this.retryNum <= 6 && this.connectWebSocket(); //失败、关闭重连
},
// 心跳检测
longstart() {//1、通过关闭定时器和倒计时进行重置心跳this.retryNum = 0;clearInterval(this.timeoutObj)clearTimeout(this.serverTimeoutObj);// 2、每隔10s向后端发送一条商议好的数据this.timeoutObj = setInterval(()=>{if(this.retryNum <= 6) { //只允许重试6// console.log('监测心跳')let data='{"body": "pong","direct":"request"}'window.webSocket && window.webSocket.send(data);// 3、发送数据 5s后没有接收到返回的数据进行关闭websocket重连this.serverTimeoutObj = setTimeout(()=>{this.lockReconnect = true;this.retryNum ++;// console.log("后台挂掉,没有心跳了....,重试了"+this.retryNum+"次");if(window.webSocket) {window.webSocket.close();}}, 5000);} else {clearInterval(this.timeoutObj)clearTimeout(this.serverTimeoutObj);}},10000)
},
destroySocket() {if (window.webSocket) {window.webSocket.close(); // 离开路由之后断开websocket连接}clearInterval(this.timeoutObj);clearTimeout(this.serverTimeoutObj);
}