使用React创建一个100K的多人互动游戏

Use React to create a 100K multi-player tile game

本文关键字：100K 互动游戏 一个 创建 React 使用      更新时间：2023-09-26

我正在学习React。

我想用一个基本的瓷砖板创建一个游戏（比如这里http://richard.to/projects/beersweeper/但是其中瓦片可以有两种状态（"可用"或"已单击"）。

就速度而言，React看起来很有趣，因为它的虚拟DOM/difs，我只能调整已经点击的瓷砖中的css和文本（这样它们在视觉上与任何人都没有点击的瓷砖不同）。

我的目标（也是个人挑战哈哈）是让1000名同时玩家可以在100000块瓷砖上点击他们想要的地方玩这个游戏。（瓦片状态在客户端之间的实时分布将使用Firebase完成）

我应该使用基本的标准React及其内置功能（onclick events，ts listeners…）吗？还是只有React就不可能在100K瓦片上为1000人实时启用这么多事件/监听器，而任何用户都可以在任何地方（可用瓦片上）点击？

我是否应该使用其他/配套的工具和技术，如画布、React Art、GPU加速、webgl、纹理图集。。。。？

WebGL是正确的答案。它的工作也相当复杂。

但根据瓦片的大小，React可以工作，但不能高性能地渲染10万个dom节点。。。不管你怎么做。相反，你需要让瓦片的子集对用户可见。

要做到这一点，你需要有很多优化的代码，而firebase很可能达不到标准。我建议在websocket和有意义的数据库上使用二进制协议（在多个数字索引范围和订阅上快速查找）。

最终，我可能会选择：

  • webgl（比较three.js和pixi.js）
  • golang中的自定义数据服务器（具有由类似maria或aws的aurora之类的mysql引擎管理的持久性/回退）
  • 用golang编写的websocket服务器
  • websockets（无包装器库，二进制协议）

websocket服务器使用node.js上的golang的唯一原因是CPU性能，这意味着更低的延迟和每台服务器更多的客户端。它们在网络方面的表现大致相同。

您可能会忽略其中的大部分内容，但要明白，如果您确实存在性能问题，则将其中一些部分切换为这些部分会有所帮助。

做一个处理2个并发用户和1000个tile的原型，然后从那里开始。按优先级排序：

  1. 不要渲染10万个dom节点
  2. webgl而不是dom
  3. 二进制websocket协议，通过socket.io或类似协议（非firebase）
  4. go中的自定义数据服务器
  5. 二进制websocket协议不使用socket.io（例如节点中的ws包）
  6. go中的websocket服务器（不是很重要，也许永远不会）

很多人使用React作为MVC中的V

我相信react对UI来说是好的，但你应该问问自己服务器端的逻辑是什么，你仍然需要考虑M和C

如果你正在寻找1000个同时加载的用户，关键字scalable将是你的朋友。

此外，您还应该检查服务器端服务的Node.js。Express.js的快速实现，最后是Pomelo.js，它是一个基于node.js 的js游戏服务器实现

关于履约问题。。WebGL很可能会提高你的表现。在这里，你可以找到一个关于这个主题的很好的教程：https://github.com/alexmackey/IntroToWebGLWithThreeJS

如果你想在不使用GL语言的情况下构建它，你应该更深入地研究JavaScript，用动态data bindings创建你自己的pseudo-class库。否则，您可能会使用一个强大框架中的一小部分，这只会减慢API的速度。

我不想使用canvas，因为它们有利于model的可视化，而不是游戏front-end。请查看d3.js，了解它的出色之处，但遗憾的是，它存在性能问题。

这里我写了一个很好的小提琴，它用悬停创建了100x100矩阵，而perfromance就不那么好了。您可以对其进行微调以获得100k元素矩阵：https://jsfiddle.net/urahara/zL0fxyn3/2/

编辑：WebGL是唯一合理的解决方案。

相关文章：