1-关于websocket
批量下载请求有一个后端生成压缩包的过程，一旦文件过大请求就会超时。需要后端同学配置websocket防止断开链接。 前端vue通用组件代码示例
<script>
export default {
props: {
url: {
type: String
}
},
model:{
prop: 'websocket',
event: 'change'
},
mounted(){
this.initWebSocket();
},
methods: {
initWebSocket() {
if ("WebSocket" in window) {
console.log("您的浏览器支持WebSocket");
var websocket = new WebSocket(this.url);
this.$emit('change', websocket);
this.initWatchFunc(websocket);
} else {
console.log("您的浏览器不支持WebSocket");
}
},
initWatchFunc(websocket){
var _this = this;
websocket.onopen = (e)=>{
console.log("连接成功!");
_this.$emit('onOpen',e);
}
websocket.onmessage = (e)=>{
_this.$emit('onMessage',e.data);
}
websocket.onclose = (e)=>{
console.log("断开连接!");
_this.$emit('onClose',e);
}
websocket.onerror = (e)=>{
console.log("连接异常!");
_this.$emit('onError',e);
}
},
}
}
</script>
2-页面部分需要
组件配置
<websocket :url="websockurl" v-model="websocket" @onMessage="handerOnMessage"></websocket>
根据不同状态配置配置写入方法 progress可以获取压缩进度 successZip 获取压缩包信息，以及后端返回的压缩链接。 因为后端压缩包文件名是nginx配置中的，可能会出现乱码，需要前端重新定义下载文件名称 （参考第上篇）
//处理服务端发送过来的消息
handerOnMessage(msg){
var msgJson = JSON.parse(msg);
console.log(msgJson);
//根据服务端返回的消息中不同的action，执行不同的方法逻辑
if (msgJson.action == "openSession") {
this.clientId = msgJson.clientId;
} else if (msgJson.action == "progress") {
this.msgplxz = msgJson.msg;
this.percentage = msgJson.data;
} else if (msgJson.action == "successZip") {
//返回一个链接执行下载操作
}
},
3-可能会出现的问题
- 后端压缩包下载后需要及时删除。这里需要监听到下载完成事件。然后调用删除压缩包方法。
- websocket返回的是打包进度，并不是下载进度，所以进度条提示方面需要注意。下载进度方法可以采用axios的onDownloadProgress
- 如果项目中大文件很多，则要必须采用切片的方式。
- 【关键】nginx代理 http 跟https有差异需要注意，区别在于调用地址http为ws开头而https为wss开头
下面的是进度条举例，url为返回的下载链接
axios.get(url,{
responseType:'blob',
onDownloadProgress: function (progressEvent) {
let process = (progressEvent.loaded / progressEvent.total * 100 | 0)
let progressText = `下载进度：${process}`
}
}).then(res=>{
console.log(res)
}).catch(error => {
console.log(error)
})
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天 点击查看活动详情
