WatchMan-Site7 (ver.2.2)

WatchMan-Site7

Плагин WatchMan-Site7 v.2.2 (Сторож сайта).

watchman-site7_v.2.2.5.zip (13 Загрузок) (последнее изменение за 22.11.2017). В новую версию плагина внесены следующие изменения и дополнения:
1. Изменен внешний вид основной страницы плагина. Он стал более стильным, без контрастных цветов. Кнопки немного закругленные, с тенями.
2. Основное в новой версии, это динамическое обновление экрана (браузера) в момент появления новых посетителей на сайте. Режим включения / выключения осуществляется кнопкой "SSE", расположенной в самом верху экрана плагина. Данный режим удобно отключить, когда админу необходимо поработать с той порцией информации, которая есть. Например - внести кого-то в черный список, произвести сортировку таблицы по полям и т.д. Затем, можно включить режим автоматического обновления таблицы посещения, не прибегая к многократному ручному обновлению страницы браузера. Немного теории. Существуют несколько технологий динамической связи "клиент-сервер":
1. AJAX (набор ранее существующих технологий - JS, PHP, HTML)
2. WebSocket (мощная вещь, но достаточно сложная в реализации)
3. SSE (Server-Sent Events)
Мне пришлось познакомиться с перечисленными технологиями, причем зная, что базовый класс WP_LIST_TABLE в WordPress адаптирован к технологии AJAX. И поэтому, подспудно, думая на какой технологии остановиться, склонялся к AJAX. Однако, спустя некоторое время, я все-таки остановился на технологии SSE. И вот, как это удалось реализовать: На стороне сервера (PHP):
<?php 
/* Slave module: sse.php 
Description: to send count of records of visitor Version: 2.1.1 
Author: Oleg Klenitskiy 
Author URI: https://www.adminkov.bcr.by/category/wordpress/ 
*/

// указываем, что нам нужен минимум от WP 
define('SHORTINIT', true); 
// подгружаем среду WordPress 
require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-load.php' );

function wms7_count_rows () { 
    global $wpdb; 
    $table_name = $wpdb->prefix . 'watchman_site';
    $sql = "SELECT count(*) FROM $table_name ";
    $count_rows = $wpdb->get_var($sql);

    return $count_rows;
}

function sendMessage($data) {
   header("Content-Type: text/event-stream");
   header("Cache-Control: no-cache");
   header("Connection: keep-alive");

    echo "data: $data";
    echo "\n\n";

    ob_flush();
    flush();
}

while (true) {
    $new_count_rows = wms7_count_rows();
    sendMessage($new_count_rows);
    sleep(10);
}
На стороне клиента (JS):
window.onload = function () {
  if (!get_cookie( "wms7_sse" )){
    document.cookie = "wms7_sse=off";
    }else{
    if (get_cookie( "wms7_sse" ) == "on"){
      var myElement = document.getElementById('sse');
      myElement.checked = true;
      //start SSE
      wms7_sse();
    }
  }
}

function wms7_sse() {
  var myElement = document.getElementById('sse');

  if (myElement.checked) {
      document.cookie = "wms7_sse=on";
      if (!! window.EventSource ) {
          var source = new EventSource ( wms7_url ); 

          source.addEventListener("message", function(e) {
              console.log(e.data);
              if (get_cookie( "wms7_count" ) !== e.data) {
                  document.cookie = "wms7_count=" + e.data;
                  location.replace(window.location.href);
              }
          }, false);

          source.addEventListener("open", function(e) {
              console.log("Connection was opened.");
          }, false);

          source.addEventListener('error', function(e) {
              console.log("Error - connection was lost.");
          }, false);

        }else{
          alert('Your browser does not support Server-Sent Events. Please upgrade it.');
          return;
      }
    }else{
      //stop SSE
      document.cookie = "wms7_sse=off";
      location.replace(window.location.href);
  }
}

function get_cookie ( cookie_name ){
  var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
 
  if ( results )
    return ( unescape ( results[2] ) );
  else
    return null;
}
p.s. Ну, и последнее. var myElement = document.getElementById('sse'); - это обычный checkbox в HTML. Последняя версия плагина на сайте WordPress. Вот собственно говоря и все. Кода не много. Если есть вопросы - пишите. Постараюсь ответить. До встречи, adminkov. E-mail разработчика - klenitskiy.oleg@mail.ru.

Добавить комментарий