使用网络工作者进行大厅更新(也许还有聊天)

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

这位网络工作者每1.5秒运行一次，但我认为这会非常频繁(每一轮都会在后端创建一个查询(。

现在我想创建一个聊天室，玩家可以在这里互相交谈。要接收消息，我想启动另一个网络工作者来检查消息。

网络工作者的使用通常可以吗？还是我为此使用了一种"不需要的"技术。有更好的解决方案吗？

在后端使用如此频繁的sql查询会导致极端的性能峰值吗？当谈到"我的2c/4GB数据库服务器可以处理多少查询"时，我没有经验。

提前感谢！

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/