使用 React 创建一个 100K 多人方块游戏
Use React to create a 100K multi-player tile game
我正在学习 React。
我想用基本的拼贴板创建一个游戏（就像这里 http://richard.to/projects/beersweeper/ 但拼贴可以有两种状态（'available' 或 'already clicked'）。
就速度而言，React 看起来很有趣，因为它的虚拟 DOM/diffs，我只能调整 css 和已单击的图块内的文本（以便它们在视觉上与仍然存在的图块不同）没有人点击）。
我的目标（也是个人挑战哈哈）是让 1000 名同时玩家 可以玩这个游戏，他们可以在 100,000 块棋盘上点击他们想要的地方。（在客户中分配Firebase)
实时显示磁贴状态
我应该使用基本的标准 React 及其内置功能（onclick 事件、ts 侦听器...）还是仅使用 React 不可能为 100000 人在 100K 块上启用这么多 events/listeners任何用户都可以实时点击任何地方（在可用的图块上）？
我应该使用 alternative/complentary 工具和技术，例如 canvas、React Art、GPU 加速、webgl、纹理图集....？
Lots of people use React as the V in MVC.
我相信 react 对 UI 没问题，但你应该问问自己服务器端逻辑是什么，你仍然需要考虑 M 和 C
如果您正在寻找 1000 个并发用户负载，关键字 scalable 将是您的朋友。
您还应该查看 Node.js for the server side service. Express.js for it's fast implementation, and finally Pomelo.js，这是一个 js 游戏服务器实现，基于 node.js
关于性能问题.. WebGL 很可能会提高您的性能。在这里，您可以获取有关该主题的精彩教程：https://github.com/alexmackey/IntroToWebGLWithThreeJS
如果您想在不使用 GL 语言的情况下构建它，您应该更深入地研究 JavaScript 使用动态 data bindings 创建您自己的 pseudo-class 库。否则，您可能最终会使用一小部分功能强大的框架，这只会减慢您的 API.
I would restrain from using canvas, as they are good for model visualization rather as game front-end. Checkout d3.js for it's awesomeness and unfortunately performance issues.
Here I have written a nice fiddle, that creates 100x100 matrix with hovers, and perfromance is not so good. You can easly tweak it to get 100k element matrix: https://jsfiddle.net/urahara/zL0fxyn3/2/
EDIT: WebGL is the only reasonable solution.
WebGL 是正确答案。使用起来也很复杂。
但是根据图块的大小，React 可以工作，但您无法高效地渲染 100k dom 个节点……无论您如何操作。相反，您需要呈现用户可见的图块子集。
要完成这样的事情，您需要大量优化代码，而 firebase 很可能达不到标准。我推荐一个基于 websockets 的二进制协议和一个有意义的数据库（快速查找多个数字索引范围和订阅）。
最终，我可能会选择：
- webgl（比较three.js和pixi.js）
- golang 中的自定义数据服务器（persistence/fallback 由 mysql 引擎管理，如 maria 或 aws 的 aurora）
- 用 golang 编写的 websocket 服务器
- websockets（无包装库，二进制协议）
对于 websocket 服务器，golang 超过 node.js 的唯一原因是 CPU 性能，这意味着更低的延迟和每个服务器更多的客户端。它们在网络方面的表现大致相同。
您可能会忽略其中的大部分内容，但只要了解如果您确实遇到性能问题，将其中的一些部分换掉会有帮助。
做一个处理 2 个并发用户和 1000 个图块的原型，然后从那里开始。按优先顺序排列：
- 不要渲染 100k dom 个节点！
- webgl 而不是 dom
- 二进制 websocket 协议，基于 socket.io 或类似协议（不是 firebase）
- 在 go 中自定义数据服务器
- 二进制 websocket 协议未使用 socket.io（例如节点中的 ws 包）
- go 中的 websocket 服务器（不是那么重要，也许永远不会）
我正在学习 React。
我想用基本的拼贴板创建一个游戏（就像这里 http://richard.to/projects/beersweeper/ 但拼贴可以有两种状态（'available' 或 'already clicked'）。
就速度而言，React 看起来很有趣，因为它的虚拟 DOM/diffs，我只能调整 css 和已单击的图块内的文本（以便它们在视觉上与仍然存在的图块不同）没有人点击）。
我的目标（也是个人挑战哈哈）是让 1000 名同时玩家 可以玩这个游戏，他们可以在 100,000 块棋盘上点击他们想要的地方。（在客户中分配Firebase)
实时显示磁贴状态我应该使用基本的标准 React 及其内置功能（onclick 事件、ts 侦听器...）还是仅使用 React 不可能为 100000 人在 100K 块上启用这么多 events/listeners任何用户都可以实时点击任何地方（在可用的图块上）？
我应该使用 alternative/complentary 工具和技术，例如 canvas、React Art、GPU 加速、webgl、纹理图集....？
Lots of people use React as the V in MVC.
我相信 react 对 UI 没问题，但你应该问问自己服务器端逻辑是什么，你仍然需要考虑 M 和 C
如果您正在寻找 1000 个并发用户负载，关键字 scalable 将是您的朋友。
您还应该查看 Node.js for the server side service. Express.js for it's fast implementation, and finally Pomelo.js，这是一个 js 游戏服务器实现，基于 node.js
关于性能问题.. WebGL 很可能会提高您的性能。在这里，您可以获取有关该主题的精彩教程：https://github.com/alexmackey/IntroToWebGLWithThreeJS
如果您想在不使用 GL 语言的情况下构建它，您应该更深入地研究 JavaScript 使用动态 data bindings 创建您自己的 pseudo-class 库。否则，您可能最终会使用一小部分功能强大的框架，这只会减慢您的 API.
I would restrain from using
canvas, as they are good formodelvisualization rather as gamefront-end. Checkoutd3.jsfor it's awesomeness and unfortunately performance issues.
Here I have written a nice fiddle, that creates 100x100 matrix with hovers, and perfromance is not so good. You can easly tweak it to get 100k element matrix: https://jsfiddle.net/urahara/zL0fxyn3/2/
EDIT:
WebGLis the only reasonable solution.
WebGL 是正确答案。使用起来也很复杂。
但是根据图块的大小，React 可以工作，但您无法高效地渲染 100k dom 个节点……无论您如何操作。相反，您需要呈现用户可见的图块子集。
要完成这样的事情，您需要大量优化代码，而 firebase 很可能达不到标准。我推荐一个基于 websockets 的二进制协议和一个有意义的数据库（快速查找多个数字索引范围和订阅）。
最终，我可能会选择：
- webgl（比较three.js和pixi.js）
- golang 中的自定义数据服务器（persistence/fallback 由 mysql 引擎管理，如 maria 或 aws 的 aurora）
- 用 golang 编写的 websocket 服务器
- websockets（无包装库，二进制协议）
对于 websocket 服务器，golang 超过 node.js 的唯一原因是 CPU 性能，这意味着更低的延迟和每个服务器更多的客户端。它们在网络方面的表现大致相同。
您可能会忽略其中的大部分内容，但只要了解如果您确实遇到性能问题，将其中的一些部分换掉会有帮助。
做一个处理 2 个并发用户和 1000 个图块的原型，然后从那里开始。按优先顺序排列：
- 不要渲染 100k dom 个节点！
- webgl 而不是 dom
- 二进制 websocket 协议，基于 socket.io 或类似协议（不是 firebase）
- 在 go 中自定义数据服务器
- 二进制 websocket 协议未使用 socket.io（例如节点中的 ws 包）
- go 中的 websocket 服务器（不是那么重要，也许永远不会）