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

I'm learning React.

I'd like to create a game with a basic tile-board (like here / but where tiles can have two states ('available' or 'already clicked').

In terms of speed, React looks interesting as with its virtual DOM/diffs, I could only adjust the css and text inside tiles that have been clicked (so that they visually differ form those still not clicked by anyone).

My goal (and personal challenge haha) is to make this game playable by 1000 simultaneous players who can click where they want on a 100,000-tiles board.(distribution among clients in real time of tile status would be done with Firebase)

Should I use basic standard React and its built-in features (onclick events,ts listeners...) or is it impossible with only-React to enable that many events/listeners for 1000 people on 100K tiles in real time with any user being able to click anywhere (on available tiles) ?

Should I use alternative/plentary tools and techniques such as canvas, React Art, GPU acceleration, webgl, texture atlases....?

I'm learning React.

I'd like to create a game with a basic tile-board (like here http://richard.to/projects/beersweeper/ but where tiles can have two states ('available' or 'already clicked').

In terms of speed, React looks interesting as with its virtual DOM/diffs, I could only adjust the css and text inside tiles that have been clicked (so that they visually differ form those still not clicked by anyone).

My goal (and personal challenge haha) is to make this game playable by 1000 simultaneous players who can click where they want on a 100,000-tiles board.(distribution among clients in real time of tile status would be done with Firebase)

Should I use basic standard React and its built-in features (onclick events,ts listeners...) or is it impossible with only-React to enable that many events/listeners for 1000 people on 100K tiles in real time with any user being able to click anywhere (on available tiles) ?

Should I use alternative/plentary tools and techniques such as canvas, React Art, GPU acceleration, webgl, texture atlases....?

• javascript
• firebase
• reactjs
• reactjs-flux

Share Follow edited Mar 22, 2015 at 15:18 user229044♦ 240k4141 gold badges344344 silver badges347347 bronze badges asked Mar 22, 2015 at 15:01 MathieuMathieu 4,8071313 gold badges6464 silver badges126126 bronze badges 2

• 1 You might want to implement it first. Benchmark. Do some calculations. See if it can handle 100k (in theory). Then you find bottle necks, fix, adjust, find alternatives to improve certain parts. – majidarif Commented Mar 22, 2015 at 15:20
• @majidarif yes thanks I know but as I'm a rookie and learning, the time I'd need to make structural changes would be high for me. I'd rather ask here which direction to take even if I have after to change it – Mathieu Commented Mar 22, 2015 at 16:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

WebGL is the right answer. It's also quite plicated to work with.

But depending on the size of the tiles, React could work but you can't render 100k dom nodes performantly... no matter how you do it. Instead, you need to render the subset of tiles visible to the user.

To pull something like this off, you'll need to have a lot of optimized code, and firebase most likely won't be up to par. I'd remend a binary protocol over websockets and a database that makes sense (fast lookups on multiple numeric index ranges, and subscriptions).

Ultimately, I'd probably go with:

• webgl (pare three.js and pixi.js)
• custom data server in golang (with persistence/fallback managed by a mysql engine like maria or aws's aurora)
• websocket server written in golang
• websockets (no wrapper library, binary protocol)

The only reason for golang over node.js for the websocket server is CPU performance, which means lower latency and more clients per server. They perform about the same for the network aspect.

You'll probably ignore most of this, but just understand that if you do have performance problems, switching some of the parts out for these will help.

Do a prototype that handles 2 concurrent users and 1000 tiles, and go from there. In order of priority:

1. don't render 100k dom nodes!
2. webgl instead of dom
3. binary websocket protocol, over socket.io or similar (not firebase)
4. custom data server in go
5. binary websocket protocol not using socket.io (e.g. ws package in node)
6. websocket server in go (not really that important, maybe never)

Lots of people use React as the V in MVC.

I believe that react is fine for UI but you should ask yourself what will be the server side logic, you still have to think about M and C

If you are looking for 1000 simultaneous users load, the keyword scalable will be your friend.

Also you should check out Node.js for the server side service. Express.js for it's fast implementation, and finally Pomelo.js which is a js game server implementation, based on node.js

On the subject of performance.. WebGL will most likely boost your performance. Here you can grab a nice tutorial on the topic : https://github./alexmackey/IntroToWebGLWithThreeJS

If you want to build it without GL languages whatsoever, you should digg deeper into JavaScript create your own pseudo-class library with dynamic data bindings. Otherwise you might end up using small percentage of a powerful framework that will only slow down your 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/urahara/zL0fxyn3/2/

---

EDIT: WebGL is the only reasonable solution.