Использование веб-работника для обновления лобби (и, возможно, чата)? - PullRequest
Новая
       17

Использование веб-работника для обновления лобби (и, возможно, чата)?

0 голосов
/ 26 апреля 2020

Я создал веб-версию настольной игры и создал какое-то лобби, к которому могут присоединиться люди. Как только игрок присоединился к лобби, запустится веб-работник (https://www.w3schools.com/html/html5_webworkers.asp) и проверит текущих игроков в лобби, чтобы отобразить их.

вызывающая сторона: 

<script>
    var w;

    function startWorker() {
        if (typeof(Worker) !== "undefined") {
            if (typeof(w) == "undefined") {
                //w = new Worker("demo_workers.js");
                w = new Worker("js/lobbyUpdater.js");
                w.postMessage(localStorage.groupID);
            }
            w.onmessage = function(event) {
                var response = JSON.parse(event.data);
                var player = response.player;
                var playerarry = player.split(":");
                document.getElementById("playerlist").innerHTML = "";
                var i = 0;
                for (i; i < response.playerCount; i++) {
                    var singleplayer = playerarry[i].split(",");
                    if (singleplayer[1] == localStorage.playerNumber) {
                        document.getElementById("playerlist").innerHTML += '<li><b>' + playerarry[i] + '</b></li>';
                    } else {
                        document.getElementById("playerlist").innerHTML += '<li>' + playerarry[i] + '</li>';
                    }
                }
                document.getElementById("currentPlayerAmount").innerHTML = response.playerCount;

                if (response.closed == 1) {
                    window.location.href = "playerpage.html";
                }

                console.log(event.data);
            };
        } else {
            document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
        }
    }

    function stopWorker() {
        w.terminate();
        w = undefined;
    }

    startWorker();

</script>

webworker: 

function updateLobby(groupID) {


    var Http = new XMLHttpRequest();
    var url = '../php/checkLobby.php';

    var preGroupID = '?groupID=';


    url = url.concat(preGroupID, groupID);

    Http.open("GET", url);
    Http.send();

    Http.onreadystatechange = (e) => {
        //console.log(Http.responseText)
        postMessage(Http.responseText);
    }

    var string = "updateLobby('";

    string = string.concat(groupID, "')");

    setTimeout(string, 1500);
}


onmessage = function (e) {
    var groupID = '';
    groupID = e.data;
    updateLobby(groupID);
};

Weborker работает каждые 1,5 секунды, но я думал, что это будет очень часто (каждый раунд создаст запрос на бэкэнд).

Теперь я подумал о создании чата, где игрок мог бы общаться друг с другом. Чтобы получать сообщения, я думаю о запуске другого веб-работника, который будет проверять сообщения.

Является ли использование веб-работника в целом нормальным или я использую «нежелательную» технологию для этой цели. Есть ли лучшее решение для этого?

Приведет ли использование таких частых sql запросов в серверной части к экстремальным пикам производительности? У меня нет опыта, когда дело доходит до того, «сколько запросов может обработать мой сервер баз данных 2c / 4GB».

Заранее спасибо!

1 Ответ

1 голос
/ 26 апреля 2020

На мой взгляд, лучшим решением будет использование API WebSocket. Позволяет соединиться с сервером, после чего сервер может отправлять запросы клиенту! Таким образом, клиент не спамит сервер проверочными запросами и всегда получает бесплатную sh информацию, когда что-то меняется.

API браузера WebSocket поддерживается каждым современным браузером, ожидайте Opera Mini: https://caniuse.com/#feat = websockets

Интеграция На стороне клиента довольно просто. Об стороне сервера - я не пытался создать соединение WebSocket с PHP, поэтому я не могу много сказать об этом.

Альтернативным решением может быть база данных Firebase Realtime. Там вы можете прочитать учебник об этом: https://css-tricks.com/building-a-real-time-chat-app-with-react-and-firebase/

...