项目中遇到的问题

1、文件上传

背景:

项目基于jquery,文件列表中有文件上传功能,点击上传按钮,弹出模态框,在模态框的形式选择文件,进行上传。

遇到的问题:

  1. 无法关闭模态框,进而无法切换页面,无法进行其他操作(关闭模态框,无法查看文件上传的进度)
  2. 大文件上传时,中间如果失败了,需要重头开始上传,使用不友好

解决方法:

  1. 将模态框改为普通弹框,显示在页面最上方,可以进行拖拽、放大和缩小

在盒子里拖拽:
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });

在父元素内拖拽:
$( "#draggable5" ).draggable({ containment: "parent" });

  1. 对大文件进行切片上传和断点续传,见文件上传笔记
  2. 后期将 juqery 改为 vue ,单页面应用,切换页面,不回影响上传弹框

2、websocket

背景: 开发一个站内信的功能,要求要实时通讯,选择使用 websocket 进行前后端通信。

步骤:

  • 实例化一个 WebSocket: new WebSocket(url),url 中,如果是 http 协议就使用 ws,如果是 https 就使用 wss
  • 使用 onopen方法建立连接
  • 通过 onmessage 获取后端传给前端的数据
  • 通过 send 给后端传递数据
  • 通过 onerror onclose 去做其他的一些处理

问题: 经测试,某些情况下连接会断开

解决: 使用心跳检查,协定好前后端传递的数据、前后端穿数据的时间间隔、连接最大次数

  • 每隔一定的时间,前端给后端传递一个协定好的字段,如ping
  • 后端接收到这个字段后,给前端返回一个协定好的字段,如pong
  • 在上面的过程中,如果超过指定的时间,后端还没有返回需要的字段,前端就要尝试重新连接
  • 如果超过最大的连接次数,就不在进行重连,否则接续尝试连接,直到连上为止
js 复制代码
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 = null
	    this.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);
}
相关推荐
xiaoyalian3 小时前
R语言绘图过程中遇到图例的图块中出现字符“a“的解决方法
笔记·r语言·数据可视化
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
Red Red5 小时前
网安基础知识|IDS入侵检测系统|IPS入侵防御系统|堡垒机|VPN|EDR|CC防御|云安全-VDC/VPC|安全服务
网络·笔记·学习·安全·web安全
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
贰十六6 小时前
笔记:Centos Nginx Jdk Mysql OpenOffce KkFile Minio安装部署
笔记·nginx·centos
知兀6 小时前
Java的方法、基本和引用数据类型
java·笔记·黑马程序员
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
醉陌离7 小时前
渗透测试笔记——shodan(4)
笔记