201905问题总结（websocket\el-checkbox-group全选/比较两个数组返回不同元素）

最新推荐文章于 2023-11-07 15:04:35 发布

仙女爱吃鱼

最新推荐文章于 2023-11-07 15:04:35 发布

阅读量558

点赞数

文章标签： websocket 关闭websocket el-checkbox-gruop全选比较数组 filter foreach

本文链接：https://blog.csdn.net/weixin_38318244/article/details/89973845

版权

离开页面的时候关闭websocket连接

项目：《运维系统 》
时间： 2019年5月1日
场景： 在发布详情页面要所有机器发布情况和编译日志以及单台机器发布日志，所以采用websocket连接实时获取更新,
问题： 离开当前页进入到别的页面时websocket连接没有关闭  
分析： 通过分析，发现在created中创建的websocket名为“ws”的连接可以被关闭，但是在ws的通信回调中调用的创建日志连接不能被关闭，虽然在页面最后执行了关闭websocket实例的语句，但是页面中其实有多个websocket实例，执行的这句只把最后一次的websocket连接关闭了，而之前的还在持续通信。
初始代码：
  // 离开页面时的操作, 这是生命周期，不要写在methods里
  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 => {
        // 这里尽量打印一下错误，因为我这里一开始发生了先执行then后执行catch的错误
        console.log(e);
        _this.$message({
          type: "info",
          message: "已取消跳转"
        });
        next(false);
      });
  }
   // 部署详情的ws建立
   getData() {
      this.loading = true;
      this.ws = this.base.WS({
        url: `${部署详情的url}`,
        openFn: this.openFn,
        messageFn: this.messageFn,
        errorFn: this.errorFn,
        isInit: true
      });
    },
    // 部署详情的ws接口通信回调
    messageFn(data) {
      // 简化了部分代码，此处url是部署详情的接口返回来的
      this.deploy_log_url = deploy.log_url;
      this.getDeployLog(deploy_log_url);
    },
    // 建立编译连接的websocket请求
    getDeployLog(url) {
      this.build_log_ws = this.base.WS({
        url: url,
        openFn: this.buildOpenFn,
        messageFn: this.buildMessageFn,
        errorFn: this.buildErrorFn,
        isInit: true
      });
    },

补充代码：
// 部署详情的ws接口通信回调
    messageFn(data) {
      // 简化了部分代码，此处url是部署详情的接口返回来的
      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 {
          // 如果没有结束就先清空上一次的ws连接，再重新建立
          this.build_load_show = true;
          this.build_log_ws.onClose();
          this.getDeployLog(deploy_log_url);
        }
      }
    },

在websocket中调用websocket，建立了多个连接

项目：《运维系统 》
时间： 2019年5月8日
场景： 在发布详情页面要所有机器发布情况和编译日志以及单台机器发布日志，所以采用websocket连接实时获取更新,
问题： 请求编译日志的websocket连接创建了多个，其实也是上一个问题的优化。
优化： 因为websocket请求是只连接一次，服务端就会一直给客户端发送数据，直到有一方关闭，所以我们不需要每次都重新建立连接，而只需要在第一次的时候建立连接，后边服务端会自动返回数据。
错误代码：
// 部署详情的ws接口通信回调
    messageFn(data) {
      // 简化了部分代码，此处url是部署详情的接口返回来的
      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 {
          // 如果没有结束就先清空上一次的ws连接，再重新建立
          this.build_load_show = true;
          this.build_log_ws.onClose();
          this.getDeployLog(deploy_log_url);
        }
      }
    },

正确代码：
// 部署详情的ws接口通信回调
  messageFn(data) {
    // 简化了部分代码，此处url是部署详情的接口返回来的
    this.deploy_log_url = deploy.log_url;
    // 在每一次部署详情的通信中都去调用getDeployLog方法
    this.getDeployLog(deploy_log_url);
  },
 // 建立编译连接的websocket请求
  getDeployLog(url) {
    但在当前方法中，判断了是否是第一次连接，在data中定义了一个标志：isNewWs: true
    if (this.isNewWs) {
      // 第一次为true会建立连接，之后就变成false不会再建立连接
      this.isNewWs = false
      this.build_log_ws = this.base.WS({
        url: url,
        openFn: this.buildOpenFn,
        messageFn: this.buildMessageFn,
        errorFn: this.buildErrorFn,
        isInit: true
      });
    }
  },
  // 部署详情的ws接口通信回调
  messageFn(data) {
    // 简化了部分代码，此处url是部署详情的接口返回来的
    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 {
        // 如果不存在就持续通信，不用再调用getDeployLog方法重新建立连接，因为ws连接后服务端会持续发送数据
        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日
问题： 返回的数组不对
分析： 应该是把最大的数组放在里边，这样循环比较的时候才会返回另一个数组中不包括的那项，否则找不到
错误代码：
// deploy_host为所有机器，selectedMachine为已选机器 
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;
  });
});