js 实现ping
在 JavaScript 中实现类似 ping 的功能通常需要结合网络请求和时间测量。以下是几种常见的方法：
使用 fetch 和 performance.now()
通过发送 HTTP 请求并计算响应时间模拟 ping：
async function ping(url) {
const start = performance.now();
try {
const response = await fetch(url, { method: 'HEAD' });
const end = performance.now();
return end - start;
} catch (error) {
console.error('Ping failed:', error);
return -1;
}
}
// 使用示例
ping('https://example.com').then(duration => {
console.log(`Ping time: ${duration}ms`);
});使用 XMLHttpRequest
兼容性更好的传统方法：
function ping(url) {
const xhr = new XMLHttpRequest();
const start = Date.now();
xhr.open('HEAD', url);
xhr.onload = function() {
const duration = Date.now() - start;
console.log(`Ping time: ${duration}ms`);
};
xhr.onerror = function() {
console.error('Ping failed');
};
xhr.send();
}
// 使用示例
ping('https://example.com');使用 WebSocket 测量延迟
适用于需要实时延迟测量的场景：
function wsPing(url) {
const socket = new WebSocket(url);
const start = Date.now();
socket.onopen = function() {
const duration = Date.now() - start;
console.log(`WebSocket connection time: ${duration}ms`);
socket.close();
};
socket.onerror = function() {
console.error('WebSocket connection failed');
};
}
// 使用示例
wsPing('wss://echo.websocket.org');使用 navigator.onLine 检测网络状态
简单检测设备是否在线：
function checkOnlineStatus() {
return navigator.onLine ? 'Online' : 'Offline';
}
// 使用示例
console.log(`Network status: ${checkOnlineStatus()}`);注意事项
- 浏览器安全策略可能限制跨域请求
HEAD请求可能不被所有服务器支持- 实际网络延迟受多种因素影响
- WebSocket 方法需要服务器支持
这些方法提供了不同精度的网络延迟测量方案，可根据具体需求选择合适的方式。
