如何为频繁的数据库更新编写 Websockets/AJAX 代码？或者有没有更好的方法？

Posted 2023-02-16

【中文标题】如何为频繁的数据库更新编写 Websockets/AJAX 代码？或者有没有更好的方法？

【英文标题】：How to code Websockets/AJAX for frequent database updates? Or is there a better method?

【发布时间】：2015-05-02 18:25:26

【问题描述】：

我正在制作一个 html 和 javascript 游戏，我目前正在尝试编写一些代码来在屏幕上显示玩家的金币余额，并在玩家每次点击 Javascript 对象（此对象放在html页面上的一个div中）。

我将在页面加载时使用 AJAX 从我的数据库中获取余额，然后将其放在 <div> 中，但我不知道如何在每次单击 Javascript 对象时使该数字减 1。

我不希望这个数字减少到 0 以下。相反，每当它达到 0 时，我想启动一个 Javascript 模式来通知玩家他们已经用完了硬币。

~~

最初我试图使用 websockets 在屏幕上显示玩家的余额，但我发现它非常混乱（我是一般编程的初学者），所以我现在尝试在页面加载时加载余额，然后每 60 秒使用 AJAX 将更新后的余额金额发布回我的数据库，或者每当用户关闭浏览器窗口、刷新页面或离开页面时。我不知道是否有可能做所有这些事情，或者从哪里开始，也许这是一个非常糟糕的方法，也许它不可扩展（也许数据库不支持来自 1000 名玩家的持续更新用这个方法）？

我非常感谢任何人在这方面给我的任何建议或帮助。

提前致谢！

【参考方案1】：

我将在页面加载时使用 AJAX 从我的数据库中获取余额，然后将其放入 a 但我不知道如何在每次单击 Javascript 对象时使该数字减 1。

这里有两个div：你将硬币的总数存储在一个中，然后单击第二个会丢失硬币

<div id="coins">10</div>
<div onCLick="javascript:loseCoin()">If you click here it will cost you 1 coin</div>

使用函数来降低成本。

function loseCoin()
    var coins = getElementByid("coins");
    var coins_nr = parseInt(coins.innerHTML,10);
    if( coins_nr> 0 )
        coins.innerHTML = coins_nr - 1;
     else 
        showModal();
    

showModal() 将是您的模态（询问您是否知道如何制作）

至于每 60 秒更新一次数据库，您需要一个计时器循环，例如：

setInterval(function () 
      // get number of coins from your div's innerHTML
      // then call your ajax controller to update DB
, 60000);

使用 javascript 的 ajax 示例：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() 
  if (xhr.readyState == XMLHttpRequest.DONE ) 
    if(xhr.status == 200)
      console.log(xhr.responseText);
     else 
      console.log('something else other than 200 was returned');
    
  

xhr.open("POST", "url_of_your_controller_here", true);
xhr.send("coins="+ coins_nr);

（也许数据库不支持从 1000s 的持续更新 玩家使用这种方法）？

任何体面的服务器每 60 秒处理 1000 个请求应该没有问题，但这可能取决于它有多少其他请求以及您的请求的复杂性。

【参考方案2】：

如果您只是想在每次点击时减少窗口中的可见计数器，您可以执行以下操作：

HTML：

<div id="coinsRemaining">20</div>

代码：

// use whatever click handler is appropriate to your app
document.addEventListener("click", function(e) 
    var elem = document.getElementById("coinsRemaining");
    // get current display text and convert to number
    var cnt = +elem.textContent;
    --cnt;
    if (cnt >= 0) 
        elem.textContent = cnt;
    
    if (cnt <= 0) 
        alert("There are no more coins");
        
);

工作演示：http://jsfiddle.net/jfriend00/s9jb6uhf/

---

您似乎不需要在每次点击时都更新数据库，除非您的硬币余额的某些实时方面会影响其他用户。如果您只是为将来的网页访问跟踪您的硬币余额，那么您可以比每次点击更频繁地更新数据库。