زنده کردن وردپرس با قابلیت Heartbeat API یا ضربان قلب افزوده شده در وردپرس ۳.۶

wp-heartbeat-api

در نسخه ۳.۶ وردپرس که اخیرا منتشر شده قابلیت‌ها و تغییرات زیادی صورت گرفته که آنها را در اینجا بررسی نمودیم. یکی از ویژگی‌های جدید که برای برنامه نویسان قالب و افزونه بسیار کاربرد دارد Heartbeat API است که در ادامه بررسی آن می‌پردازیم.

Heartbeat API چیست؟

Heartbeat API امکان برقراری ارتباطات معمول بین مرورگر‌ و سرور را فراهم می‌کند. این ارتباطات در بازه‌های زمانی تعیین شده‌ای تکرار می‌شود و کاربر در ایجاد و عملکرد آنها دخالتی ندارد! به عنوان مثال قسمت ذخیره اتوماتیک نوشته که خود به خود در بازه زمانی ۱۵ ثانیه تکرار می‌شود و کاربر در این عملکرد اتوماتیک هیچ دخالتی ندارد.

در واقع Heartbeat API این امکان را به ما می‌دهد که افزونه‌ها و قالب‌هایمان را طوری برنامه نویسی کنیم که  در بازه‌های زمانی به صورت اتوماتیک اطلاعاتی را از مرورگر به سرور ارسال کرده و پاسخ مناسبی را از سرور دریافت کنیم ( به عنوان مثال نمایش پیغام به کاربر در صورت انتشار نوشته‌ای جدید یا نمایش آمار بازدید هر مطلب به صورت زنده! ) همچنین می‌توان عملکرد عکسی داشت یعنی با اطلاعاتی که از مرورگر دریافت می‌شود در سرور کاهای متفاوتی انجام داد تا بدین صورت وب سایت زنده تری داشته باشیم ( به عنوان مثال قفل کردن ویرایش یک نوشته برای دیگر کاربران در صورت ویرایش توسط یک نویسنده که در نسخه ۳.۶ ورپرس بوسیله  Heartbeat API افزوده شده است).

فعال سازی استفاده از Heartbeat API در افزونه‌ها و قالب‌ها

برای اینکه از Heartbeat API در افزونه‌ها و قالب‌های خود استفاده نمایید بایستی به وردپرس اعلام کنید که از Heartbeat API استفاده می‌نمایید که اینکار را به صورت های زیر انجام می‌دهید.

برای فعال سازی Heartbeat API برای قالب‌ها از کد زیر در فایل functions.php:

<?php
function grodea_scripts_method() {
    wp_enqueue_script('heartbeat');
}
 
add_action( 'wp_enqueue_scripts', 'grodea_scripts_method' ); // wp_enqueue_scripts action hook to link only on the front-end
?>

برای فعال سازی Heartbeat API برای افزونه‌ها از کد زیر:

wp_enqueue_script('heartbeat');

تفاوت  Heartbeat API با کد‌های جاوا اسکریپتی و Ajax که برنامه نویسان خودشان می‌نویسند چیست؟

به صورت کلی می‌توان عملکردی همانند  Heartbeat API با اطلاعات متوسطی از جاوا اسکریپت و Ajax پیاده سازی نمود که می‌تواند عملکرد یکسانی داشه باشد اما جدای از مساعل استاندارد نویسی کد‌ها و عملکرد صحیح آن در نسخه‌های آینده وردپرس مهمترین تفاوت  Heartbeat API با کد‌های دستی  زمانی آشکار می‌شود که مثلا در سایت وردپرسی خود ۵ افزونه وردپرسی داشته باشید که هر کدام از آنها هر ۱۵ ثانیه یک درخواست به سرور داشته و پاسخی را دریافت کنند این درخواست‌ها به صورت جداگانه ارسال و دریافت می‌شوند که به اعمال فشار پردازشی زیادی به سرور و کند شدن مرورگر منجر می‌شود اما بوسیله  Heartbeat API تمامی این ارسال‌ها به سرور همزمان و یکباره ارسال می‌شود و از ایجاد بار پردازشی اضافی جلوگیری می‌کند.

ارسال اطلاعات از مرورگر به سرور بوسیله  Heartbeat API

Heartbeat API به صورت خودکار اطلاعات را به سرور ارسال می‌کند و فقط کافی است از تابع wp.heartbeat.enqueue() در جاوا اسکریپت افزونه یا قالب اطلاعاتی که به سرور ارسال می‌شوند را در صف ارسال قرار دهیم تا وردپرس در زمان مقرر ( ضربان بعدی! ) آن اطلاعات را به سرور ارسال نماید. این تابع سه پارامتر ورودی به شکل زیر دارد:

  • Handle (رشته) : شناسه مشخص کننده اطلاعاتی که قصد ارسال آنها به سرور را داریم که می‌بایستی شناسه یکتای باشد چون در سمت سرور از آن شناسه برای بازیابی اطلاعات استفاده خواهیم نمود.
  • Data (شی) : داده‌های که قصد ارسال‌ آنها به سرور را داریم تحت یک آبجکت جاوا اسکریپتی که داده‌ها را به صورت آرایه در آن قرار می‌دهیم.
  • Override (بولین) : مشخص کننده اینکه آیا داده‌های جدیدی که در صف قرار دارد با مقدار قبلی آن جایگزین شوند یا خیر!؟

برای مثال:

wp.heartbeat.enqueue(
    'grodea-plugin',
    {
        'browser-msg': 'سلام'
    },
    false
);

نکته: با هر بار ارسال اطلاعات به سرور ( هر ضربان ) اطلاعاتی که در صف قرار داشته‌اند بعد از ارسال حذف می‌شوند.

در اکثر موارد به جای استفاده از wp.heartbeat.enqueue() می‌توان از رخ داد مربوط به ارسال Hearbeat API یعنی heartbeat-send استفاده نمود که عملکرد بهتری را برای ما فراهم می‌کند و چون رخ دادی را برای ما فراهم می‌کند که طی بازه زمانی ۱۵ ثانیه یک بار تکرار می‌شود می‌توان در آن یکسری کارها انجام داده و سپس داده‌های به سرور ارسال نمود. مثلا در نمونه زبر ما فقط یک متن به سرور ارسال می‌کنیم اما می‌توان مثلا بر اساس کارهای انجام دهد کاربر در مرورگر داده‌های را ارسال و سپس اعمالی انجام داد!.

jQuery(document).on('heartbeat-send', function(e, data) {
    console.log('Browser Msg: سلام');
 
    data['grodea-plugin'] = {   'browser-msg': 'سلام'};
});

ارسال اطلاعات از سرور به مرورگر‌ بوسیله Heartbeat API

زمانی یک ضربان در Heartbeat API صورت می‌گیرد حتی زمانی که داده‌ای به سرور ارسال نشود در سمت سرور سه Hook رخ می‌دهد که از آنها می‌توان برای بررسی داده‌های دریافتی و همچنین ارسال داده و یا پاسخ به مرورگر استفاده نمود.

  • heartbeat_received این فیلتر داده‌های ارسالی به مرورگر را فیلتر می‌کند که از آن می‌توان برای بررسی داده‌های ارسالی توسط مرورگر و ارسال پاسخ یا داده به آن استفاده نمود. این تابع داده‌های دریافتی از مرورگر را در دسترس قرار می‌دهد.
  • heartbeat_send این فیلتر نیز داده‌های ارسالی به مرورگر را همانند heartbeat_received فیلتر می‌کند با این تفاوت که این فیلتر داده‌های دریافتی از مرورگر را در دسترس قرار نمی‌دهد.
  • heartbeat_tick این اکشن درست قبل از اینکه پاسخ‌ها تنظیم شوند اجرا می‌گردد.
  • heartbeat_settings از این فیلتر می‌توان برای تغییر تنظیمات Heartbeat API استفاده نمود.

توجه داشته باشید که اگر کاربر یا بازدید کننده سایت لاگین نکرده باشد باید به جای آنها فیلترها‌ی زیر استفاده کنید و فیلتر‌های قبلی برای کاربرانی که لاگین کرده‌اند اجرا می‌شود و در واقع همان فیلتر‌ها هستند برای کاربرانی که عضو سایت نیستند.

  • heartbeat_nopriv_received
  • heartbeat_nopriv_send
  • heartbeat_nopriv_tick

نکته: در این فیلتر‌ها nopriv نشان دهنده no privilege یا بدون حق امتیاز و دسترسی است.

برای اکثر موارد فیلتر‌های heartbeat_received و heartbeat_nopriv_received کافی می‌باشند چون داده‌های دریافتی از مرورگر را در اختیار ما قرار می‌دهند و با بررسی تنظیم شدن شناسه‌ها می‌‌توان پاسخی را به مرورگر ارسال نمود.

function grodea_respond_to_browser( $response, $data, $screen_id ) {
    if ( isset( $data['grodea-plugin'] ) ) {
        // We have data with our handle! Lets respond with something...
 
        $response['grodea-plugin'] = array(
            'server-msg' => 'علیک سلام!'
        );
    }
    return $response;
}
 
// Logged in users:
add_filter( 'heartbeat_received', 'grodea_respond_to_browser', 10, 3 );
 
// Logged out users
add_filter( 'heartbeat_nopriv_received', 'grodea_respond_to_browser', 10, 3 );

دریافت اطلاعات ارسالی از سرور در مرورگر و انجام اعمال مختلف بر اساس آن

دو روش در استفاده از Heartbeat API صورت می‌گیرد اول اینکه اطلاعاتی از مرورگر به سرور ارسال شود ولی عملی در سرور انجام پذیرد اما پاسخی به مرورگر ارسال نشود! و دوم اینکه بعد از ارسال اطلاعات از مرورگر به سرور، سرور پاسخی را بر اساس داده‌های ارسالی به مرورگر بازگرداند. برای آگاهی از پاسخی که سرور به مرورگر ارسال می‌کند و انجام عمل یا اعمالی بر اساس پاسخ سرور می‌توان از رخ‌داد (event) جاوا اسکریپتی وردپرس در مرورگر استفاده نمود.

jQuery(document).ready( function($) {
 
    $(document).on( 'heartbeat-tick.grodea-plugin', function( event, data ) {
        if ( data.hasOwnProperty( 'grodea-plugin' ) ) {
            console.log( data['grodea-plugin'] );
            // Prints to the console { 'browser-msg' : 'علیک سلام' }
        }
    });
 
});

نسخه کامل قطعه کد‌های نوشته شده

نسخه کامل مثال نوشته شده در مقاله به صورت زیر است که می‌توانید فایل افزونه مثال آن را از اینجا دانلود نمایید.

<?php
/*
Plugin Name: Heartbeat API Demo
Plugin URI: http://grodea.co/blog/wordpress-tutorials/wordpress-the-heartbeat-api/
Description: Minimal example demonstrating the WordPress Heartbeat API being added in WP version 3.6.
Version: .1
Author: grodea.co
 
If logged in as a user and viewing the frontend of your website,
every 15 seconds you should see the following in your Javascript console:
 
  Browser Msg: سلام
  Server Msg: علیک سلام
 
*/
 
/*
    Client-side code. First we enqueue the Heartbeat API and our Javascript.
 
    Our Javascript is then setup to always send the message 'سلام' to the server.
    If a message comes back, the Javascript logs it (علیک سلام) to console.
*/
 
//enqueue heartbeat.js and our Javascript
function hbdemo_init()
{
    //enqueue the Heartbeat API
    wp_enqueue_script('heartbeat');
 
    //load our Javascript in the footer
    add_action("wp_footer", "hbdemo_wp_footer");
}
add_action("init", "hbdemo_init");
 
//our Javascript to send/process from the client side
function hbdemo_wp_footer()
{
    ?>
    <script>
        jQuery(document).ready(function() {
 
            //hook into heartbeat-send: client will send the message 'سلام' in the 'browser-msg' var inside the data array
            jQuery(document).on('heartbeat-send', function(e, data) {
                console.log('Browser Msg: سلام');
                // Prints to the console Browser Msg: سلام
                data['grodea-plugin'] = {   'browser-msg': 'سلام'};
            });
 
            //hook into heartbeat-tick: client looks for a 'server-msg' var in the data array and logs it to console
            jQuery(document).on('heartbeat-tick.grodea-plugin', function(e, data) {
                if ( data.hasOwnProperty( 'grodea-plugin' ) ) {
                    console.log( 'Server Msg: ' + data['grodea-plugin']['server-msg'] );
                    // Prints to the console Server Msg: علیک سلام
                }
            });
 
        });
    </script>
<?php
}
 
/*
    Our server-side code.
 
    This hooks into the heartbeat_received filter.
*/
function hbdemo_heartbeat_received($response, $data)
{
    if ( isset( $data['grodea-plugin'] ) ) {
        // We have data with our handle! Lets respond with something...
 
        // echo $data['grodea-plugin']['browser-msg']; //prints 'سلام';
        $response['grodea-plugin'] = array(
            'server-msg' => 'علیک سلام!'
        );
    }
    return $response;
}
add_filter('heartbeat_received', 'hbdemo_heartbeat_received', 10, 2);
//add_filter('heartbeat_nopriv_received', 'hbdemo_heartbeat_received', 10, 2);

آخرین به‌روزرسانی در ۰۴ ارد ۱۳۹۶.

دیدگاه کاربران

  1. مرتضی در

    خیلی خوب و مفید بود

    موفق باشید.

  2. طراحی وب سایت خبری در

    با تشکر از مطالب مفیدتان،ممنون

  3. قالب وردپرس در

    با تشکر از مطلب خوبتون ، سایت خوبی دارید.

  4. قالب وردپرس در

    با تشکر از مطلب خوبتون ، سایت خوبی دارید. <3

دیدگاه خود را بنوبسید