使用 web-worker 进行大厅更新（可能还有聊天）？

Question

我创建了一个棋盘游戏的网络版本，并制作了某种人们可以加入的大厅。一旦玩家加入大厅，网络工作者 (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>

网络工作者：

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 秒运行，但我认为这会非常频繁（每一轮都会在后端创建一个查询）。

现在我想创建一个玩家可以互相交谈的聊天室。要接收消息，我会启动另一个 webworker 来检查消息。

webworker 的使用是否普遍正常，或者我是否为此目的使用了 "unwanted" 技术。有更好的解决方案吗？

在后端使用如此频繁的 sql 查询会导致极端的性能峰值吗？关于"how many querys can my 2c/4GB database server handle"，我没有经验。

提前致谢！

Answer 1

在我看来，最好的解决方案是使用 WebSocket API。它允许您连接到服务器，然后服务器能够向客户端发送请求！因此客户端不会通过检查请求向服务器发送垃圾邮件，并且他总是在发生变化时获得最新信息。

浏览器的 WebSocket API 被 Opera Mini 以外的所有现代浏览器支持：https://caniuse.com/#feat=websockets

集成客户端非常简单。关于服务器端 - 我没有尝试使用 PHP 创建 WebSocket 连接，所以我不能说太多。

替代解决方案，可能是 Firebase 实时数据库。在那里你可以阅读关于它的教程：https://css-tricks.com/building-a-real-time-chat-app-with-react-and-firebase/

使用 web-worker 进行大厅更新（可能还有聊天）？

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

html

javascript

mysql

web-worker

mariadb