當從其他計算機上按下相應的按鈕時，使用Ajax更改按鈕的顏色

Question

即時操作正在爲我自己編寫的程序在我的社區劇院中使用。我們將在控制室（Sound Booth）和電腦後檯安裝一臺電腦。

我正在屏幕上顯示10個「按鈕」的網格（更可能是樣式標籤）。會有像「話筒1更換電池」的按鈕文本，這將是一個柔和的灰色：

<a class="g">TEXT</a> 

所期望的目標是，如果控制室點擊這個按鈕時，應該把紅：

<a class="r">TEXT</a> 

這應該改變控制室計算機和後臺，當人後臺再次點擊按鈕時（同時它的紅色），它會在兩個位置恢復爲灰色，讓控制器知道任務已經完成。

我無法想象用數據庫和ajax很難完成，但是im真的比ajax還少新手，所以我不知道最好的方法。如果有人能指向我的教程，我可以很容易地適應這個問題，或者如果有人知道如何做到這一點，可以爲我寫一些簡單的代碼並解釋它。那將是真棒。

Answer 1

您可以通過JQuery將一個活動表輪詢到一個從活動表讀取的PHP腳本，並通過這樣做來檢測用戶是否按下了按鈕。一個簡單的方法是這樣的： 用戶按下一個按鈕 - >您將活動以時間戳發送到活動表，以便知道用戶何時按下了按鈕（我們稍後會介紹這一點）。 你可以通過JQuery發送一條信息給PHP，然後將它插入數據庫。 活動表將包含： id（INT），primary，auto_increment。 button（INT）[點擊的按鈕ID] dateposted [timestamp] 現在，每次您使用JQuery和PHP調用該表/調用該表時，都會查詢時間（重要）和按鈕ID ，這是我經常做像這樣：

客戶端：（你可以有一個不同的ID爲像這樣每個按鈕）

var auto_refresh = setInterval(
    function reloadstring() 
    { 
      $.get("checknewactivity.php", function(buttonid){ 
      if (buttonid == 1) /* Say he clicked the record button for example */ 
      { 
       $("#recordbtn").css({"background-color":"#FF0000"}); /* Make the record button red */ 
      } 
      }); 
    }, 1000); // refresh every 1000 milliseconds 
/* And this would poll every 1 second as it says above */ 

服務器端：（checkactivity.php）

<?php 
    checkactivity(); 
    function checkactivity() { 

     $querystats = "SELECT activity.id, activity.buttonid, activity.dateposted FROM activity ORDER BY id DESC LIMIT 1"; 
     $resultstats = mysqli_query($yourdbhandle,$querystats); 
     $num_stats = mysqli_num_rows($resultstats); 
     $rowactivity = mysqli_fetch_assoc($resultstats); 

     if($num_stats > 0) { /* If there was activity */ 

      $activity_id = $rowactivity["id"]; 
       $activity_date = $rowactivity["dateposted"]; //I can't indent this here for some reason. 
      $activity_buttonid = $rowactivity["buttonid"]; 
      $timeactivity = strtotime("$activity_date"); 
      $actualtime = time(); //The actual time in a timestamp 
      $timetoseconds = $actualtime - $timeactivity; //Actual time - timeactivity 

      if($timetoseconds < 6) { /* If the last activity was sent less than 6 seconds ago */ 
       echo "$activity_buttonid"; //This would send the last clicked button id 
      } 
     }      
    } 
?> 

這不是b最簡單的方法，但最好的方法是使用webSockets或node.JS來避免一遍又一遍地輪詢數據庫，一旦服務器發現更新，只發送結果給客戶端。這是一份草稿，並簡要說明了如何做到這一點。