WatchMan-Site7 (ver.2.2)

img_head

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

watchman-site7_v.2.2.zip (3 downloads) (последнее изменение за 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) {
    echo "data: $data\n\n";
    ob_flush();
    flush();
}

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

$last_count_rows = 0;
while (true) {
    $new_count_rows = wms7_count_rows();
    if ($last_count_rows !== $count_rows) {
        sendMessage($new_count_rows);
    }
    $last_count_rows = $new_count_rows;
    sleep(5);
}

На стороне клиента (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. Вот собственно говоря и все. Кода не много. Если есть вопросы - пишите. Постараюсь ответить. До встречи, adminkov.
E-mail разработчика - klenitskiy.oleg@mail.ru.

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