created(){
this.ws();
},
methods:{
ws(){
// WebSocket
if ("WebSocket" in window) {
// 获取协议,主机名
const {host, protocol } = window.location;
const pro = protocol === "https:" ? "wss://" : "ws://";
this.websocket = new WebSocket(`${pro}${host}/api/rates?id=${this.id}`);
// this.initWebSocket();
this.websocket.onerror = this.setErrorMessage;
// 连接成功
this.websocket.onopen = this.setOnopenMessage;
// 收到消息的回调
this.websocket.onmessage = this.setOnmessageMessage;
// 连接关闭的回调
this.websocket.onclose = this.setOncloseMessage;
// 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = this.onbeforeunload;
} else {
alert("当前浏览器 Not support websocket");
}
},
setErrorMessage() {
console.log(this.websocket)
console.log( "WebSocket连接发生错误 状态码:" + this.websocket.readyState);
},
setOnopenMessage() {
// 连接成功,状态码为1
console.log("WebSocket连接成功 状态码:" + this.websocket.readyState);
},
setOnmessageMessage(event) {
// 服务器推送的消息
// console.log("服务端返回:" + event);
// console.log(event)
this.uploadingFileList = JSON.parse(event.data);
let arr = [];
this.uploadingFileList.map(item => {
var param = {};
param.Filename = item.Filename;
param.Totalsize = rates(item.Totalsize);
param.progress = Math.floor((item.Currentsize / item.Totalsize) * 100) > 1 ? Math.floor((item.Currentsize / item.Totalsize) * 100) : 1
param.Needtime = time(item.Needtime);
param.Speedrate = rates(item.Speedrate);
param.IsDone = item.IsDone;
arr.push(param);
})
this.tableData = arr;
},
setOncloseMessage() {
// 连接关闭,状态码为3
console.log("WebSocket连接关闭 状态码:" + this.websocket.readyState);
},
onbeforeunload() {
this.closeWebSocket();
},
closeWebSocket() {
this.websocket.close();
},
blockUpload(scope){
this.closeWebSocket(); // 关闭webSocket连接
this.$emit('blockUpload');
scope.IsDone = true;
},
}
05-23
3477
06-22
1898
02-01
507
06-28
4280
10-27
494