如何利用WordPress的`Heartbeat API`优化实时通信和资源占用？

WordPress Heartbeat API 优化实时通信与资源占用：深度解析与实践

大家好，今天我们来聊聊 WordPress Heartbeat API，以及如何利用它来优化实时通信，同时尽可能地降低服务器资源的占用。Heartbeat API 是 WordPress 内置的一个功能，它允许浏览器和服务器之间进行周期性的异步通信，主要用于以下几个方面：

• 自动保存文章/页面： 在你写作或者编辑内容的时候，WordPress 会定期自动保存你的草稿，防止数据丢失。
• 用户会话管理： 保持用户的登录状态，防止用户因为长时间不操作而被强制登出。
• 插件实时更新： 某些插件可能会使用 Heartbeat API 来实时更新数据，比如在线用户计数器、实时评论等等。
• 锁定文章： 当一个用户正在编辑一篇文章时，Heartbeat API 可以锁定该文章，防止其他用户同时编辑造成冲突。

然而，默认配置下的 Heartbeat API 可能会带来一些问题，尤其是在高流量的网站上。频繁的请求会增加服务器的负载，降低网站的响应速度。因此，我们需要对 Heartbeat API 进行优化，使其在满足实时通信需求的同时，尽可能地降低资源消耗。

理解 Heartbeat API 的工作原理

Heartbeat API 的核心在于一个 JavaScript 函数 wp.heartbeat.interval(), 它定义了 Heartbeat 请求的频率。默认情况下，Heartbeat 请求会每 15 秒发送一次。服务器端通过 wp_ajax_heartbeat 钩子来处理这些请求。

前端 (JavaScript):

// WordPress 已经定义了 wp.heartbeat 对象

// 设置 Heartbeat 间隔 (单位: 秒)
wp.heartbeat.interval( 'fast' ); // 默认是 'fast'，等同于 15 秒

// 监听 Heartbeat 的发送和接收事件
jQuery(document).on( 'heartbeat-send', function( event, data ) {
  // 在 Heartbeat 发送之前，你可以添加数据到 data 对象中
  data['my_custom_data'] = 'some_value';
});

jQuery(document).on( 'heartbeat-tick', function( event, data ) {
  // 在 Heartbeat 收到响应之后，你可以处理 data 对象中的数据
  if ( data['my_server_data'] ) {
    // 执行相应的操作
    console.log( data['my_server_data'] );
  }
});

后端 (PHP):

// 注册 Heartbeat 钩子
add_filter( 'heartbeat_received', 'my_heartbeat_received', 10, 2 );
function my_heartbeat_received( $response, $data ) {
  // $data 包含了从前端发送过来的数据
  if ( isset( $data['my_custom_data'] ) ) {
    // 处理前端发送过来的数据
    $my_custom_data = $data['my_custom_data'];

    // 添加数据到响应中
    $response['my_server_data'] = 'Server received: ' . $my_custom_data;
  }

  return $response;
}

// 注册 Heartbeat 发送钩子 (可选)
add_filter( 'heartbeat_send', 'my_heartbeat_send', 10, 2 );
function my_heartbeat_send( $response, $screen_id ) {
    // 可以修改发送的数据，但通常情况下不需要这样做
    return $response;
}

优化 Heartbeat API：策略与实践

优化 Heartbeat API 的目标是减少不必要的请求，降低请求频率，并尽可能地减少每次请求的数据量。

1. 调整 Heartbeat 频率:

这是最直接也是最有效的优化方法。WordPress 提供了几种预定义的间隔，以及自定义间隔的选项。

• ‘fast’ (15 秒): 适用于需要实时更新数据的场景，比如在线编辑器。
• ‘stable’ (60 秒): 适用于用户会话管理等对实时性要求不高的场景。
• ‘slow’ (120 秒): 适用于后台管理页面，比如插件更新通知。

你可以使用 wp_enqueue_script 函数来修改 Heartbeat 间隔。

add_action( 'init', 'my_custom_heartbeat_interval' );
function my_custom_heartbeat_interval() {
  wp_deregister_script( 'heartbeat' );
  wp_register_script( 'heartbeat', admin_url( 'js/heartbeat.js' ), array( 'jquery' ), false, true ); // 重新注册 heartbeat.js
}

add_action( 'admin_enqueue_scripts', 'enqueue_custom_heartbeat' );
function enqueue_custom_heartbeat( $hook ) {
  // 只在特定的后台页面修改 Heartbeat 间隔
  if ( 'post.php' != $hook && 'post-new.php' != $hook && 'index.php' != $hook ) {
    return;
  }

  wp_enqueue_script( 'my-custom-heartbeat', get_stylesheet_directory_uri() . '/js/custom-heartbeat.js', array( 'heartbeat' ), '1.0', true );
}

然后在 custom-heartbeat.js 文件中：

(function($) {
  $(document).ready(function() {
    // 设置 Heartbeat 间隔为 60 秒
    wp.heartbeat.interval( 'stable' ); // 或者 wp.heartbeat.interval( 60 );

    // 只在文章编辑页面设置为 15 秒
    if( $( '#post' ).length ) { // 检查是否存在 #post 元素，通常是文章编辑页面
        wp.heartbeat.interval( 'fast' );
    }

    // 在仪表盘页面设置为 120 秒
    if( $( '#dashboard-widgets-wrap' ).length ) {
        wp.heartbeat.interval( 'slow' );
    }
  });
})(jQuery);

2. 禁用不必要的 Heartbeat 请求:

并非所有页面都需要 Heartbeat API。例如，在前端页面，如果不需要实时更新数据，可以完全禁用 Heartbeat API。

add_action( 'init', 'my_disable_heartbeat' );
function my_disable_heartbeat() {
  // 只在后台页面禁用 Heartbeat API
  if ( ! is_admin() ) {
    wp_deregister_script( 'heartbeat' );
  }
}

或者，更精确地禁用 Heartbeat API，只允许在特定的后台页面使用：

add_action( 'admin_enqueue_scripts', 'my_maybe_disable_heartbeat' );
function my_maybe_disable_heartbeat( $hook ) {
  // 只在文章编辑页面和仪表盘页面启用 Heartbeat API
  if ( 'post.php' != $hook && 'post-new.php' != $hook && 'index.php' != $hook ) {
    wp_deregister_script( 'heartbeat' );
  }
}

3. 减少 Heartbeat 数据量:

每次 Heartbeat 请求都会发送一些数据到服务器。你可以通过过滤 heartbeat_send 和 heartbeat_received 钩子来减少数据量。

例如，如果你只需要知道用户是否在线，而不需要其他信息，可以移除默认的 Heartbeat 数据：

add_filter( 'heartbeat_send', 'my_remove_default_heartbeat_data', 10, 2 );
function my_remove_default_heartbeat_data( $data, $screen_id ) {
  // 保留一些基本信息，比如当前用户 ID
  $new_data = array(
    'user_id' => get_current_user_id(),
  );

  return $new_data;
}

4. 使用条件判断来发送 Heartbeat 请求:

有些情况下，只有在满足特定条件时才需要发送 Heartbeat 请求。例如，只有在用户正在编辑文章时才发送 Heartbeat 请求。

(function($) {
  $(document).ready(function() {
    // 只有在文章编辑页面才启动 Heartbeat
    if ( $( '#post' ).length ) {
      wp.heartbeat.interval( 'fast' );
    } else {
      wp.heartbeat.interval( 'pause' ); // 暂停 Heartbeat
    }
  });
})(jQuery);

对应的 PHP 代码（确保 Heartbeat 正常处理暂停状态）：

add_filter( 'heartbeat_received', 'my_handle_heartbeat_pause', 10, 2 );
function my_handle_heartbeat_pause( $response, $data ) {
  // 如果 Heartbeat 被暂停，则返回空响应
  if ( isset( $data['heartbeat_paused'] ) && $data['heartbeat_paused'] === 'true' ) {
    return $response; // 或者返回 array()
  }

  // 正常的 Heartbeat 处理逻辑
  // ...

  return $response;
}

前端 Javascript 修改：

(function($) {
  $(document).ready(function() {
    // 只有在文章编辑页面才启动 Heartbeat
    if ( $( '#post' ).length ) {
      wp.heartbeat.interval( 'fast' );
    } else {
      wp.heartbeat.interval( 'pause' ); // 暂停 Heartbeat
      // 发送 Heartbeat 暂停状态
      $(document).on( 'heartbeat-send', function( event, data ) {
          data['heartbeat_paused'] = 'true';
      });
    }
  });
})(jQuery);

5. 使用 WebSockets 或 Server-Sent Events (SSE) 代替 Heartbeat API:

对于需要更高级实时通信的场景，比如聊天室、实时协作编辑器等，Heartbeat API 可能不是最佳选择。WebSockets 和 Server-Sent Events (SSE) 提供了更高效、更可靠的实时通信机制。

• WebSockets: 提供了全双工的通信通道，允许服务器和客户端之间进行双向实时通信。
• Server-Sent Events (SSE): 提供了单向的通信通道，服务器可以向客户端推送实时更新，而客户端不需要频繁地发送请求。

虽然实现 WebSockets 或 SSE 需要更多的开发工作，但它们可以显著提高实时通信的性能，并降低服务器负载。

使用 WebSockets 的简单示例 (需要 Node.js 服务器):

• Node.js 服务器 (server.js):

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  console.log('Client connected');

  ws.on('message', message => {
    console.log(`Received message: ${message}`);
    // 将消息广播给所有客户端
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(`User: ${message}`);
      }
    });
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });

  // 每隔一段时间向客户端发送消息
  setInterval(() => {
    ws.send(`Server time: ${new Date().toLocaleTimeString()}`);
  }, 5000);
});

console.log('WebSocket server started on port 8080');

• WordPress 前端 (JavaScript):

(function($) {
  $(document).ready(function() {
    // 创建 WebSocket 连接
    const socket = new WebSocket('ws://localhost:8080');

    // 监听连接事件
    socket.addEventListener('open', event => {
      console.log('Connected to WebSocket server');
    });

    // 监听消息事件
    socket.addEventListener('message', event => {
      console.log('Message from server:', event.data);
      // 将消息显示在页面上
      $('#websocket-messages').append(`<p>${event.data}</p>`);
    });

    // 监听关闭事件
    socket.addEventListener('close', event => {
      console.log('Disconnected from WebSocket server');
    });

    // 监听错误事件
    socket.addEventListener('error', event => {
      console.error('WebSocket error:', event);
    });

    // 发送消息
    $('#send-message').click(function() {
      const message = $('#message-input').val();
      socket.send(message);
      $('#message-input').val('');
    });
  });
})(jQuery);

• WordPress 页面 (HTML):

<div id="websocket-container">
  <input type="text" id="message-input" placeholder="Enter message">
  <button id="send-message">Send</button>
  <div id="websocket-messages"></div>
</div>
<script>
//确保 jQuery 已经加载
if (typeof jQuery == 'undefined'){
    console.error("jQuery is not loaded.  Websocket example will fail.");
}
</script>

这个例子展示了一个简单的聊天室功能。用户可以在输入框中输入消息，然后点击 "Send" 按钮将消息发送到服务器。服务器会将消息广播给所有连接的客户端。服务器还会每隔 5 秒钟向客户端发送当前时间。

6. 使用缓存:

如果 Heartbeat API 返回的数据不是经常变化，可以使用缓存来减少服务器的负载。例如，可以使用 WordPress 的 Transients API 来缓存 Heartbeat API 的响应。

add_filter( 'heartbeat_received', 'my_cache_heartbeat_response', 10, 2 );
function my_cache_heartbeat_response( $response, $data ) {
  // 尝试从缓存中获取数据
  $cached_data = get_transient( 'my_heartbeat_data' );

  if ( $cached_data !== false ) {
    // 如果缓存存在，则直接返回缓存数据
    return $cached_data;
  }

  // 如果缓存不存在，则从数据库或其他来源获取数据
  $my_data = array(
    'some_data' => 'data from database',
    'another_data' => 'another data'
  );

  // 将数据缓存 60 秒
  set_transient( 'my_heartbeat_data', $my_data, 60 );

  // 将数据添加到响应中
  $response['my_cached_data'] = $my_data;

  return $response;
}

7. 监控 Heartbeat API 的性能:

使用 WordPress 性能监控插件，比如 Query Monitor，可以监控 Heartbeat API 的性能，包括请求频率、响应时间、数据库查询次数等。通过监控数据，可以更好地了解 Heartbeat API 的瓶颈，并采取相应的优化措施。

不同场景下的 Heartbeat API 优化策略

场景	默认 Heartbeat 间隔	优化策略
文章编辑页面	15 秒	保持 15 秒，确保自动保存功能正常工作。减少 Heartbeat 数据量。使用文章锁定机制。
后台管理页面	15 秒	调整为 60 秒或 120 秒，降低请求频率。禁用不必要的 Heartbeat 请求。
前端页面	15 秒	完全禁用 Heartbeat API。
实时协作编辑器	15 秒	考虑使用 WebSockets 或 Server-Sent Events (SSE) 代替 Heartbeat API。
在线用户计数器	15 秒	调整为 60 秒或更长，并使用缓存。

总结与关键点回顾

今天我们深入探讨了 WordPress Heartbeat API 的工作原理以及优化策略。 关键在于理解其功能和带来的资源消耗，并针对不同场景进行频率调整、禁用不必要的请求、减少数据量、甚至使用更高级的实时通信技术。通过这些优化手段，我们可以显著提高 WordPress 网站的性能，提升用户体验。