离开页面的时候关闭websocket连接
项目:《运维系统 》
时间: 2019年5月1日
场景: 在发布详情页面要所有机器发布情况和编译日志以及单台机器发布日志,所以采用websocket连接实时获取更新,
问题: 离开当前页进入到别的页面时websocket连接没有关闭
分析: 通过分析,发现在created中创建的websocket名为“ws”的连接可以被关闭,但是在ws的通信回调中调用的创建日志连接不能被关闭,虽然在页面最后执行了关闭websocket实例的语句,但是页面中其实有多个websocket实例,执行的这句只把最后一次的websocket连接关闭了,而之前的还在持续通信。
初始代码:
beforeRouteLeave(to, from, next) {
let _this = this;
_this
.$confirm("是否离开此页面?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
type: "warning"
})
.then(() => {
_this.ws.onClose();
_this.host_ws_list.forEach(item => {
item.onClose();
});
_this.build_log_ws.onClose();
next();
})
.catch(e => {
console.log(e);
_this.$message({
type: "info",
message: "已取消跳转"
});
next(false);
});
}
getData() {
this.loading = true;
this.ws = this.base.WS({
url: `${部署详情的url}`,
openFn: this.openFn,
messageFn: this.messageFn,
errorFn: this.errorFn,
isInit: true
});
},
messageFn(data) {
this.deploy_log_url = deploy.log_url;
this.getDeployLog(deploy_log_url);
},
getDeployLog(url) {
this.build_log_ws = this.base.WS({
url: url,
openFn: this.buildOpenFn,
messageFn: this.buildMessageFn,
errorFn: this.buildErrorFn,
isInit: true
});
},
补充代码:
messageFn(data) {
this.deploy_log_url = deploy.log_url;
if (!this.build_log_ws) {
this.getDeployLog(deploy_log_url);
} else {
if (this.deploy_log.includes(this.endString)) {
this.build_load_show = false;
this.build_log_ws.onClose();
} else {
this.build_load_show = true;
this.build_log_ws.onClose();
this.getDeployLog(deploy_log_url);
}
}
},
在websocket中调用websocket,建立了多个连接
项目:《运维系统 》
时间: 2019年5月8日
场景: 在发布详情页面要所有机器发布情况和编译日志以及单台机器发布日志,所以采用websocket连接实时获取更新,
问题: 请求编译日志的websocket连接创建了多个,其实也是上一个问题的优化。
优化: 因为websocket请求是只连接一次,服务端就会一直给客户端发送数据,直到有一方关闭,所以我们不需要每次都重新建立连接,而只需要在第一次的时候建立连接,后边服务端会自动返回数据。
错误代码:
messageFn(data) {
this.deploy_log_url = deploy.log_url;
if (!this.build_log_ws) {
this.getDeployLog(deploy_log_url);
} else {
if (this.deploy_log.includes(this.endString)) {
this.build_load_show = false;
this.build_log_ws.onClose();
} else {
this.build_load_show = true;
this.build_log_ws.onClose();
this.getDeployLog(deploy_log_url);
}
}
},
正确代码:
messageFn(data) {
this.deploy_log_url = deploy.log_url;
this.getDeployLog(deploy_log_url);
},
getDeployLog(url) {
但在当前方法中,判断了是否是第一次连接,在data中定义了一个标志:isNewWs: true
if (this.isNewWs) {
this.isNewWs = false
this.build_log_ws = this.base.WS({
url: url,
openFn: this.buildOpenFn,
messageFn: this.buildMessageFn,
errorFn: this.buildErrorFn,
isInit: true
});
}
},
messageFn(data) {
this.deploy_log_url = deploy.log_url;
if (this.deploy_log.includes(this.endString)) {
this.build_load_show = false;
this.build_log_ws.onClose();
} else {
this.build_load_show = true;
}
}
},
el-checkbox全选框与el-checkbox-group联接全选时不能正确回显(应该如何绑定item与value)
项目:《运维系统》
时间: 2019年5月8日
问题: 单个el-checkbox与el-checkbox-group绑定的时候,group里循环的是一个json数组,点代表全选的checkbox能写进选中数组中,但不能成功回显
分析: label绑定的是item.hostname,key绑定的是item.ip,应该将label绑定为item
错误代码:
this.not_deploy_hosts = [
{
hostname: kk-admin-bg-01,
ip: 123.453.23.2
},
{
hostname: kk-admin-bg-02,
ip: 123.453.23.3
}
]
<div class="el-transfer-panel">
<p class="el-transfer-panel__header">
<span class="el-checkbox__label">未选机器span>
<span class="machine_total">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAllNot"
@change="handleCheckAllChangeNot"
>{{ not_deploy_hosts.length }}el-checkbox
>
span>
p>
<div class="el-transfer-panel__body">
<div v-if="not_deploy_hosts.length > 0">
<el-checkbox-group
v-model="notSelectedMachine"
class="check_group el-checkbox-group el-transfer-panel__list"
@change="handleNotSelected"
>
<el-checkbox
v-for="item in not_deploy_hosts"
:label="item.hostname"
:key="item.ip"
class="push_checkbox"
:style="{
color: `${
item.deployed === 1 ? '#e79316' : ' #A4A9B1'
}`
}"
>
{{ item.hostname }}
el-checkbox>
el-checkbox-group>
div>
<div v-else>
<p class="el-transfer-panel__empty">无数据p>
div>
div>
div>
正确代码:
<el-checkbox-group
v-model="notSelectedMachine"
class="check_group el-checkbox-group el-transfer-panel__list"
@change="handleNotSelected"
>
<el-checkbox
v-for="item in not_deploy_hosts"
:label="item"
:key="item.ip"
class="push_checkbox"
:style="{
color: `${
item.deployed === 1 ? '#e79316' : ' #A4A9B1'
}`
}"
>
{{ item.hostname }}
el-checkbox>
el-checkbox-group>
el-checkbox全选框与el-checkbox-group绑定时应如何给全选框绑定事件
项目:《运维系统》
时间: 2019年5月8日
问题: 实现el-checkbox-group全选时,给全选框绑定的change事件里报val is not defined
分析: 绑定事件的时候不应该加后边的()
错误代码:
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAllNot"
@change="handleCheckAllChangeNot()"
>{{ not_deploy_hosts.length }}
el-checkbox>
正确代码:
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAllNot"
@change="handleCheckAllChangeNot"
>{{ not_deploy_hosts.length }}
el-checkbox>
比较两个数组取出不同元素
项目:《运维系统》
时间: 2019年5月8日
问题: 返回的数组不对
分析: 应该是把最大的数组放在里边,这样循环比较的时候才会返回另一个数组中不包括的那项,否则找不到
错误代码:
this.deploy_hosts.forEach(item => {
this.deploy_hosts = this.selectedMachine.filter(ele => {
return item.ip !== ele.ip;
});
});
正确代码:
this.selectedMachine.forEach(item => {
this.deploy_hosts = this.deploy_hosts.filter(ele => {
return item.ip !== ele.ip;
});
});