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

Question

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

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

我不希望数字减少到 0 以下。相反，每当它达到 0 时，我想启动一个 Javascript 模式来通知玩家他们运行没有硬币.

~~

本来我是想用websockets在屏幕上显示玩家的余额，但我发现它很混乱（我是编程的初学者），所以我现在尝试在页面上加载余额加载，然后 post 使用 AJAX 每 60 秒或每当用户关闭浏览器 window、刷新页面或离开页面时将更新后的余额返回到我的数据库。我不知道是否可以做所有这些事情，或者从哪里开始，也许这是一个非常糟糕的方法，也许它不可扩展（也许数据库不支持来自 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 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);

ajax 使用 javascript 的示例：

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 个请求应该没有问题，但这可能取决于它有多少其他请求以及请求的复杂性。

Answer 2

如果您只是想在每次点击时减少 window 中的可见计数器，您可以这样做：

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/

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

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

How to code Websockets/AJAX for frequent database updates? Or is there a better method?

html

javascript

sql

ajax

websocket