使用 React 创建 100K 多人拼图游戏答案

【问题标题】：Use React to create a 100K multi-player tile game使用 React 创建 100K 多人拼图游戏
【发布时间】：2015-05-25 14:17:01
【问题描述】：

我正在学习 React。

我想创建一个带有基本图块板的游戏（如http://richard.to/projects/beersweeper/，但图块可以有两种状态（“可用”或“已点击”）。

在速度方面，React 看起来很有趣，因为它的虚拟 DOM/diffs，我只能调整被点击的图块内的 css 和文本（这样它们在视觉上与那些仍未被任何人点击的图块不同）。

我的目标（和个人挑战哈哈）是让 1000 名同时玩家可以玩这个游戏，他们可以在 100,000 块棋盘上点击他们想要的位置。（在客户端之间实时分配棋子状态将使用Firebase)

我应该使用基本的标准 React 及其内置功能（onclick 事件、ts 侦听器...）还是仅使用 React 无法在 100K 磁贴上为 1000 人实时启用这么多事件/侦听器任何用户都可以点击任何地方（在可用的磁贴上）？

我应该使用替代/补充工具和技术，例如画布、React Art、GPU 加速、webgl、纹理图集......吗？

【问题讨论】：

你可能想先实现它。基准。做一些计算。看看它是否可以处理 100k（理论上）。然后你找到瓶颈，修复，调整，找到改进某些部分的替代方案。
@majidarif 是的，谢谢，我知道，但由于我是一名新手并且正在学习，因此我需要进行结构更改的时间对我来说会很长。我宁愿在这里问我以后要改哪个方向

标签： javascript firebase reactjs reactjs-flux

【解决方案1】：

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

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

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

您还应该查看Node.js 以获得服务器端服务。 Express.js 因为它的快速实现，最后是Pomelo.js 这是一个js 游戏服务器实现，基于node.js

关于性能..WebGL 很可能会提高您的性能。在这里您可以获取有关该主题的精彩教程：https://github.com/alexmackey/IntroToWebGLWithThreeJS

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

我会避免使用canvas，因为它们更适合model 可视化而不是游戏front-end。结帐d3.js，因为它很棒，但不幸的是性能问题。

在这里我写了一个不错的小提琴，它创建了 100x100 的带有悬停的矩阵，性能不是很好。您可以轻松调整它以获得 100k 元素矩阵：https://jsfiddle.net/urahara/zL0fxyn3/2/

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

【讨论】：

感谢您的回答。至于“V”，我将使用 Rails（我已经在 rails 中有一个应用程序）作为 json API，将 json 中的数据提供给 Reatc 视图（例如：fancypixel.github.io/blog/2015/01/28/…）
作为一个初学者，为了实时管理数据和在客户端之间分发数据以及启用多人游戏，我会使用firebase，不会做太多Node/express...
webGL 的问题在于它没有得到很好的支持，尤其是在 Internet Explorer、firefox（部分支持）和opera mini（caniuse.com/#feat=webgl）上
@Mathieu 如果您可以重现我的小提琴字段生成以使用 React.js 执行相同的任务，那就太好了（jsfiddle 支持 react.js）我们可以看看性能是否有显着差异.
我会，但可能至少需要几周时间，我必须首先学习更多的 javascript 和 React，甚至从未接触过这些语言和框架（来自 Ruby 和 Rails）。以后肯定会做。

【解决方案2】：

WebGL 是正确的答案。使用起来也相当复杂。

但是根据 tile 的大小，React 可以工作，但是你不能高效地渲染 100k dom 节点......不管你怎么做。相反，您需要呈现对用户可见的图块子集。

要实现这样的目标，您需要有大量优化的代码，而 firebase 很可能达不到标准。我建议使用基于 websocket 的二进制协议和有意义的数据库（快速查找多个数字索引范围和订阅）。

最终，我可能会选择：

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

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

您可能会忽略其中的大部分内容，但请理解，如果您确实遇到性能问题，将其中的一些部分换掉会有所帮助。

制作一个处理 2 个并发用户和 1000 个图块的原型，然后从那里开始。按优先顺序：

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

【讨论】：

谢谢，这真是太有帮助了！确实，我可能不会全部实施，但您已经打开了非常吸引人的方向。 pb with golang 是我必须学习这种语言（当然听说过）。第二个问题：我不能按照你的建议使用“区域”（我的世界使用它们），也就是说我希望玩家看到整个 100K 瓷砖（即使他们必须放大才能找到它们），我不能' 有一种巨大的地图，只渲染 2K 节点，只有当人们滚动它时才加载其余的节点。所以我必须找到一种方法来支持 50k 到 100K DIRECT。
另外，您为什么认为后端数据库服务（如 firebase.com 或 realtime.co 声称能够在数千个并发客户端之间实现持久实时）不适合。太多玩家做了太多事情？
如果我使用 webgl，我不得不忽略很多人，因为 webgl 没有得到很好的支持，尤其是在 Internet Explorer、firefox（部分支持）和opera mini（caniuse.com/#feat=webgl）上
那么 DOM 不是答案。 WebGL 或 Canvas 是剩下的两个选项。 WebGL 更复杂，但至少会为您处理一些渲染数学和优化逻辑。使用画布，您将使用一维字节数组（4 字节 = 1 像素）。当您需要让几个用户处理文档或类似文件时，firebase 等非常棒，并且它们适用于小用户组，而不是拥有大量数据和变化的一大群用户。 WebGL 支持有限，但 3 和 pixi 有画布后备，这给你很好的支持。
这取决于你对性能的定义，但是 React 并没有针对这种工作进行优化，它针对复杂的应用程序进行了优化（例如，你可以将它用于 RPG 的库存系统或菜单，或游戏内商店等）。如果您在简单的手动优化的 DOM 中进行切片，您可能拥有（估计）2k 个切片，并且每帧最多进行 50 次更新，以在快速计算机上保持 60fps，在普通计算机上保持 20fps。不过，我无法在此处讨论的因素更多，而且我还没有对此进行基准测试。