做过的工作
    
    
        
     
AIZOO 可视化机器学习平台
        
     
2020.01-2020.12
        
     
      
            项目介绍：实现用户自定义上传算法模型和数据资源，通过可视化界面拖拽组件构建模型，提交任务，使用 Slurm 集群管理自动部署模型训练，查看训练结果以及分析图表等的一站式机器学习平台。
        
     
        
     
            
      
项目内容
            
      
                
       
前端开发：采用 Vue 框架+iview 组件库，基于 WebSocket 即时通讯和 Echarts 图表库绘制动态折线图，通过 API 接口与 Java 后台交互。
                
       
可视化构建模型：使用 SVG 绘图和 Cytoscape.js 图库，通过拖拽(H5的原生拖拽事件)组件构建模型图。
            
      
        
     
        
     
项目重点
        
     
            
      
大文件的分块上传
            
      
WebSocket 实现即时通讯，通过 Echarts 动态折线展示模型运行过程中的 GPU/CPU 利用率等数据
            
      
Cytoscape.js 图库拖拽实现模型绘制，实现节点上的端点连线并提示用户是否可以连接；Canvas 图片导出，自己绘制 SVG 图标，画图库从 jsplumb.js 转换为 Cytoscape.js，因 jsplumb.js 节点和端点是自己标注的不能区分，界面不稳定。
            
      
前端通过 api-blueprint 模拟接口，前后端分离开发
        
     
    
    
    
大文件上传方法
    
    
        
     
Blob.prototype.slice 实现切片
        
     
            
      
前端：通过 Blob.prototype.slice 方法实现大文件切片，并发上传多个切片，最后发送一个合并请求通知服务端合并切片。
            
      
服务端：接收切片并存储，收到合并请求后使用流将切片合并到最终文件。
            
      
原生 XMLHttpRequest 的 onprogress 方法监听切片上传进度，使用 Vue 计算属性根据每个切片的进度算出整个文件的上传进度。
            
      
断点续传：使用 spark-md5 计算文件 hash，根据 hash 判断服务端是否已经上传该文件，从而实现秒传；通过 XMLHttpRequest 的 abort 方法暂停切片的上传，并根据服务端返回的已经上传切片名跳过这些切片的上传。
        
     
    
    
    
MongoDB vs MySQL 对比分析
    
    
        
     
MySQL
        
     
            
      
优势：在不同的引擎上有不同的存储方式，支持传统的 SQL 语句，开源数据库份额不断增长。
            
      
缺点：在海量数据处理时效率显著变慢。
        
     
        
     
MongoDB
        
     
            
      
特点：非关系型数据库，面向文档存储，适合事件记录、内容管理等场景，支持高扩展性和高效读写。
            
      
优点：快速、存储热数据在物理内存中，支持 JSON 格式。
            
      
缺点：不支持事务，文档较为不完善。
        
     
    
    
    
跨域请求与 WebSocket
    
    
        
     
WebSocket 实现文件上传
        
     
/* WebSocket 客户端-side */
    

new WebSocket('ws://websocket.example.com');

// 连接成功后发送文件 const file = new FileReader(); file.onload = function(e) { const arrayBuffer = e.target.result; socket.send(arrayBuffer); };

Http/2 vs WebSocket 推送

SSE 服务器推送（Server-sent Events）

SSE 提供了一种简单的方式让服务器向客户端发送定期事件更新，而无需客户端频繁请求数据。