javascript - 使用 Cordova、Javascript、PHP、MySQL 的实时多人游戏 - 帮助和提示

Question

我正在尝试使用 Cordova 实时创建一个简单的游戏(如 Agar.io):Javascript、AJAX、PHP 和 MySQL。

代码运行良好:

1) JS发送X和Y给PHP服务器

2) PHP将X和Y保存到MySQL数据库

3) PHP 从 MySQL 数据库中检索 X 和 Y

4) PHP 帖子 X 和 Y

5) JS 检索 X 和 Y 的 PHP post

6) 在检索到的 X 和 Y 坐标处显示圆

问题来了..

太慢了!整个过程大约需要 1 秒才能完成(延迟 1 秒)。此外，有时它甚至会滞后 2-10 秒!

我知道这种方法不是最快的，但我仍然觉得我可能做错了什么或效率低下。

帮助

这可能是最有效的方法，但我觉得我做错了什么。或者也许有更好的方法来做到这一点？

此外，我目前正在使用 HostMonster，共享帐户(也许这就是问题所在？)，我正在等待他们打开它，以便我可以升级到专用服务器并在那里试用。

注意:与此同时，我真的尽量避免使用 Node.js/Websockets，因为服务器非常昂贵。而且免费的非常有限 =/

更糟的是，我会学习更多 JS PHP MySQL :)

JavaScript

function update
{
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.drawImage(test, positionX - c.width/40, positionY - c.width/40, c.width/20, c.width/20);

    if((directionX != positionX || directionY != positionY) &&
        dataServerSendOn && dataServerGetOn)
    {
        dataServerSendOn = false;
        dataServerGetOn = false;

        setTimeout(function(){requestAnimationFrame(sendData);}, FPS);
    }

    requestAnimationFrame(update);
}

function sendData()
{
    var params = "uuid=" + uuid + "&directionX=" + directionX + "&directionY=" + directionY;

    http.open("POST", url, true);

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    http.onreadystatechange =
    function()//Call a function when the state changes.
    {
        if(http.readyState == 4 && http.status == 200)
        {
            dataServerSendOn = true;
            requestAnimationFrame(getData);
        }
    }
    http.send(params);
}

function getData()
{
    xmlhttp.onreadystatechange = 
    function()
    {
        /*
         * 0: Hasn't Started
         * 1: Connected to the Server
         * 2: Server has received our request
         * 3: Server Processing
         * 4: Request is finished and data is ready
         */
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            httpTransferString = xmlhttp.responseText;
            requestAnimationFrame(sortData);
        }
    }


    xmlhttp.open("GET", "http://www.example.com/game", true);
    xmlhttp.send();
}

function sortData()
{
    positionX = "";
    positionY = "";

    for(var i = 0; httpTransferString[i] != '&'; i++)
    {
        positionX += httpTransferString[i];
    }
    for(var i = positionX.length + 1; httpTransferString[i] != '#'; i++)
    {
        positionY += httpTransferString[i];
    }
    dataServerGetOn = true;
}

PHP

<?php
require 'core.php';
require 'connect.php';

if(loggedin())
{
    if(isset($_POST['uuid']) &&
       isset($_POST['directionX']) &&
       isset($_POST['directionY']))
    {
        $uuid       = $_POST["uuid"];
        $directionX = $_POST["directionX"];
        $directionY = $_POST["directionY"];

        $query = "SELECT `UUID` FROM `users` WHERE `UUID`='$uuid'";
        if($query_run = mysql_query($query))
        {
            $queryX = "UPDATE `users` SET `x` = '$directionX'  WHERE `uuid`='$uuid'";
            $query_runX = mysql_query($queryX);
            $queryY = "UPDATE `users` SET `y` = '$directionY'  WHERE `uuid`='$uuid'";
            $query_runY = mysql_query($queryY);                 
        }
    }
}
else
{
    echo "You're not logged in";
}

?>
<form name="tcpForm" action="<?php echo $current_file; ?>" method="POST">
UUID       <input type="text" name="uuid">      <br>
directionX <input type="text" name="directionX"><br>
directionY <input type="text" name="directionY"><br>
<input type="submit" value="Send">
</form>

如有任何建议，我将不胜感激，我还是菜鸟 =]

Answer 1

HTTP 不被认为是实时应用程序的最佳选择，因为它不提供完整的双向通信。这意味着无论何时服务器端发生变化，都无法通知客户端。客户端需要发送大量请求，这会给服务器带来很大的负载，或者使用long-polling。 长轮询 是一种方式，实际上更像是一种 hack，可以部分规避 HTTP 中缺乏双向通信的问题。它包括客户端向服务器发送请求，服务器保持连接打开，直到有东西可以响应客户端。这也不是最佳选择，因为服务器可能会用完套接字。

现在，对于良好的实时服务(或游戏)，您可以使用一些专门针对实时的协议(protocol)。输入 WebSockets 和 WebRTC。

1. WebSockets 是服务器和客户端之间的持久双工(双向)连接，它允许客户端向服务器发送和接收更小的“请求”，基本上只有特定于应用程序的数据。与 HTTP 不同，这是一个持久连接，这意味着您不需要为每个请求发送额外的数据(例如 header )。另一件好事是，所有主要浏览器都支持 WebSockets，并且目前正在成为实时通信的事实标准。

2. WebRTC - 这是一种点对点连接协议(protocol)，您可以连接到其他客户端进行通信，而不是直接连接到服务器。这几乎意味着您的玩家将直接相互连接，而且速度会更快，因为他们不会连接到可能会出现性能问题或网络退化的集中位置。大多数现代浏览器都支持它，IE 落后。

因此，这些是创建实时服务/应用程序的最佳可用选项。我建议使用 WebSockets，因为它更成熟并且目前采用率更高。如果你决定使用 PHP，你可以检查一些现成的库来处理 websockets，例如 http://socketo.me/