通過vue 實作 ping IP 位址

<!--

 * @Description: 

 * @Version: 1.0

 * @Autor: 322829

 * @Date: 2021-07-15 14:26:25

 * @FilePath: \vuets_admin\src\views\DataManage\ChartData.vue

 * @LastEditors: 322829

 * @LastEditTime: 2021-08-11 14:49:06

-->

<template>

  <div class="chart-data">

      <el-button @click="pings">ping IP測試</el-button>

      <el-input v-model="ipInput" />

  </div>

</template>

<script >

import { defineComponent, ref } from 'vue'

export default defineComponent({

  setup() {

     let ipInput=ref("192.168.1.123")

     let pings = ( ) => { 

       ping(ipInput.value)

    }

    const ping = (ip:string) => {

       var img = new Image()

      var start = new Date().getTime()

      let isFlag = ref<boolean>(false)

      let isCloseWifi =  ref<boolean>(true) 

      let isHasFinish =  ref<boolean>(false)

      img.onload = function() {

        if (!isHasFinish.value) {

          isFlag.value = true

          isHasFinish.value = true

          alert('ping' + ip+'通過------------------')

        }

      }

      img.onerror = function() {

        if (!isHasFinish.value) {

          if (!isCloseWifi.value) {

            isFlag.value = true

          alert('ping' + ip+'通過------------------')

          } 

          isHasFinish.value = true

        }

      }

      setTimeout(function() {

        isCloseWifi.value = false

        console.log('network is working, start ping...')

      }, 2)

      img.src = 'http://' + ip + '/' + start

      var timer = setTimeout(function() {

        if (!isFlag.value) {

          isHasFinish.value = true

          isFlag.value = false

          console.log('Ping ' + ip + ' fail. ')

          alert('ping' + ip+'失敗！！！！！！！！！！！！！！！！')

        }

      }, 3000)

    }

    return {ipInput,pings}

  },

})

</script>

<style  scoped></style>