javascript - 如何编写 Websockets/AJAX 代码以实现频繁的数据库更新？或者有更好的方法吗？

Question

我正在制作一个 html 和 Javascript 游戏，目前正在尝试编写一些代码，这些代码将在屏幕上显示玩家的金币余额，并在玩家每次单击 Javascript 对象(此对象)时使其减少 1放置在 html 页面上的 div 中)。

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

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

~~

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

我真的很感激任何人可以就此向我提供的任何建议或帮助。

提前致谢!

Answer 1

I’m going to grab the balance from my database using AJAX on page load, and then place it inside a but I have no idea how to make this figure decrement by 1 every time the Javascript object is clicked.

这里有两个div:您将硬币总数存储在一个div中，然后单击第二个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);

(maybe the database wouldn't support constant updates from 1000s of players by using this method)?

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