2

I'm writing an online whiteboard application for fun, where multiple users view the same whiteboard and can draw on it. I'm using websockets (vanilla JS on the frontend, Scala on the backend), and right now am essentially just broadcasting mouse events from one user to the rest of the users, and rendering the image client-side.

However, this results in a transient shared state, whereas I would like to have users be able to hop on at any time and see the preserved shared state. I'm thinking this will probably require having shared rendering code on the backend and the frontend, so that clients render events as they stream but the server can send raw image data when clients associate.

So my question here is: what are some other design patterns I should be aware of for this kind of project? This is a for fun/learning project, so this is an open-ended question, but I'll accept an answer that contains some useful references for this kind of data flow.

Nathan
  • 73,987
  • 14
  • 40
  • 69

1 Answers1

3

So my question here is: what are some other design patterns I should be aware of for this kind of project?

You don't have to have rendering code on the server. You can just save all the accumulated events that led to the current whiteboard and send those to a new client and let the new client render the whiteboard for itself as if they were listening when all the events originally happened.

If that's more data than is practical, then you can compress raw events. For example a straight or nearly straight line segment does not need all the intervening mouse positions, it really just needs the first and last position of the segment.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • @Nathan - Did this answer your question? – jfriend00 Aug 25 '16 at 02:39
  • It's a good answer, although it's something I've already considered. It seems to get very expensive fast with the number of mouse events I have, and I can't compress the events too much without losing too much resolution. I'm going to hold off on accepting the answer as I'm looking for something with some more external resources into some broad patterns here, e.g., it would be really great to see some write-ups on how some large multiplayer games address this kind of problem. Thank you for the answer though! – Nathan Aug 25 '16 at 06:36
  • @Nathan - Compressing straight line segments to first and last points uses tons less data and loses no resolution and it's just as accurate as a rendered image, but a lot more compact. So, appropriate compression makes a lot of sense with no drawbacks. Rendering saves every intermediary point. It's the difference between vector graphics and bitmap graphics. There's a huge reason Google moved from bitmap graphics to vector graphics for Google Maps. It's way, way more efficient. – jfriend00 Aug 25 '16 at 07:57