当前位置：首页 > VUE

vue实现ping功能

2026-03-08 05:33:59VUE

使用 WebSocket 实现 Ping 功能

在 Vue 中可以通过 WebSocket 实现类似 Ping 的功能，用于检测网络连接状态或服务器响应时间。

安装 WebSocket 依赖：

npm install websocket

创建 WebSocket 连接组件：

<template>
  <div>
    <p>延迟: {{ latency }}ms</p>
    <button @click="startPing">开始 Ping</button>
    <button @click="stopPing">停止</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ws: null,
      latency: 0,
      timer: null,
      startTime: 0
    }
  },
  methods: {
    startPing() {
      this.ws = new WebSocket('wss://echo.websocket.org')

      this.ws.onopen = () => {
        this.ping()
        this.timer = setInterval(this.ping, 1000)
      }

      this.ws.onmessage = (event) => {
        this.latency = Date.now() - this.startTime
      }
    },

    ping() {
      this.startTime = Date.now()
      this.ws.send('ping')
    },

    stopPing() {
      clearInterval(this.timer)
      this.ws.close()
    }
  },
  beforeDestroy() {
    this.stopPing()
  }
}
</script>

使用 HTTP 请求实现 Ping

可以通过发送 HTTP 请求并计算响应时间来实现 Ping 功能：

<template>
  <div>
    <p>延迟: {{ latency }}ms</p>
    <button @click="startPing">开始 Ping</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      latency: 0,
      timer: null
    }
  },
  methods: {
    async ping() {
      const startTime = Date.now()
      try {
        await fetch('https://jsonplaceholder.typicode.com/posts/1', {
          method: 'HEAD',
          cache: 'no-cache'
        })
        this.latency = Date.now() - startTime
      } catch (error) {
        console.error('Ping 失败:', error)
      }
    },

    startPing() {
      this.ping()
      this.timer = setInterval(this.ping, 1000)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

使用原生 ICMP Ping

如果需要真正的 ICMP Ping，可以在前端通过 WebRTC 或依赖后端服务实现：

后端实现 API 接口处理 ICMP 请求
前端调用该 API 并计算时间差

后端 Node.js 示例 (使用 net-ping 模块):

const express = require('express')
const ping = require('net-ping')

const app = express()
const session = ping.createSession()

app.get('/ping/:host', (req, res) => {
  const host = req.params.host
  const start = Date.now()

  session.pingHost(host, (error, target) => {
    if (error) {
      res.json({ error: error.toString() })
    } else {
      res.json({ latency: Date.now() - start })
    }
  })
})

app.listen(3000)

前端调用：

async function pingHost(host) {
  const start = Date.now()
  const response = await fetch(`http://localhost:3000/ping/${host}`)
  const data = await response.json()
  return data.latency || Date.now() - start
}

使用第三方 Ping API

可以考虑使用第三方 API 服务来实现 Ping 功能：

vue实现ping功能

async function pingThirdParty(url) {
  const start = Date.now()
  try {
    const response = await fetch(`https://api.pingable.io/v1/ping?url=${encodeURIComponent(url)}`)
    const data = await response.json()
    return data.latency || Date.now() - start
  } catch (error) {
    console.error('Ping 失败:', error)
    return null
  }
}