Usage of web-worker for lobby updating (and maybe chat)?

Question

I created a web version of a board game and made some kind of lobby that people can join. Once the player joined the lobby a webworker ( https://www.w3schools.com/html/html5_webworkers.asp ) will start and check the current players within the lobby to display them.

calling part:

<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);
};

The weborker is running every 1.5 seconds but i thought that would be very often (every round will create a query on the backend).

Now i thought about creating a chatroom where player can talk to each other. To receive messages i though about starting an another webworker that will check for the messages.

Is the usage of webworker generally ok or am i using a "unwanted" technology for that purpose. Is there better solution for this?

Will the usage of such frequent sql querys in the backend lead to extreme performance peaks? I am not experience when it comes to "how many querys can my 2c/4GB database server handle".

Thanks in advance!

Answer 1

In my opinion, the best solution would be to use the WebSocket API. It allows you to connect with the server then the server is able to send requests to the client. So the client does not spam the server with checking requests and he always gets fresh information when something changed.

Browser's WebSocket API is supported by each modern browser expect Opera Mini: https://caniuse.com/#feat=websockets

Integration Client-side is pretty easy. About Server-side - I did not try to create WebSocket connection with PHP so I cannot say much about that.

Alternative solution, might be Firebase Realtime database. There you can read tutorial about it: https://css-tricks.com/building-a-real-time-chat-app-with-react-and-firebase/